/* ============================================================
   NOVA Theme (model24) - 公共样式
   风格：现代轻奢杂志风
   字体：HedvigLettersSerif (衬线标题) + Montserrat (无衬线正文)
   配色：深墨 #1A1A1A / 香槟金 #C9A962 / 米白 #FAF8F4 / 鼠尾草绿 #5A6B5B
   ============================================================ */

/* ========== 字体定义 ========== */


@font-face {
  font-family: 'novSans';
  src: url('../fonts/Montserrat-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

/* ========== 设计令牌 (CSS Variables) ========== */
:root {
  --nov-ink:       #1A1A1A;   /* 深墨：标题/正文深色 */
  --nov-ink-70:    #3D3D3D;
  --nov-ink-40:    #808080;
  --nov-ink-20:    #B5B5B5;
  --nov-gold:      #C9A962;   /* 香槟金：强调色 */
  --nov-gold-70:   #D9C28B;
  --nov-sage:      #5A6B5B;   /* 鼠尾草绿：辅助强调 */
  --nov-sage-70:   #819383;
  --nov-cream:     #FAF8F4;   /* 米白：页面背景 */
  --nov-linen:     #F2EFE9;   /* 亚麻：区块背景 */
  --nov-line:      #E8E4DD;   /* 淡金灰：分隔线/边框 */
  --nov-white:     #FFFFFF;
  --nov-shadow-s:  0 2px 12px rgba(26,26,26,0.06);
  --nov-shadow-m:  0 10px 30px rgba(26,26,26,0.08);
  --nov-shadow-l:  0 20px 60px rgba(26,26,26,0.12);
  --nov-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --nov-trans:     0.35s var(--nov-ease);
}

/* ========== 全站字体统一 (覆盖内联样式) ========== */
html, body {
  font-family: novSans, 'Montserrat', sans-serif !important;
  color: var(--nov-ink);
  background: var(--nov-cream);
}

.nov-body {
  margin: 0;
  padding: 0;
  background: var(--nov-cream);
  color: var(--nov-ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 标题统一用衬线 */
h1, h2, h3, h4, h5, h6 {
  font-family: novSans, 'Montserrat', sans-serif !important;
  font-weight: 400;
  color: var(--nov-ink);
  margin: 0;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

a, span, p, li, button, input, select, textarea, label, div {
  font-family: novSans, 'Montserrat', sans-serif !important;
}

a {
  color: var(--nov-ink);
  text-decoration: none;
  transition: color var(--nov-trans);
}

a:hover {
  color: var(--nov-gold);
}

/* UIKit 组件字体覆盖 */
.uk-container, .uk-section, .uk-grid,
.uk-button, .uk-input, .uk-select, .uk-textarea,
.uk-card, .uk-badge, .uk-label, .uk-alert,
.uk-dropdown, .uk-nav, .uk-offcanvas, .uk-modal,
.uk-pagination, .uk-breadcrumb, .uk-table {
  font-family: 'Montserrat', sans-serif !important;
}

/* ========== 通用按钮组件 (nov-btn) ========== */
.nov-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 34px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: all var(--nov-trans);
  background: transparent;
  color: var(--nov-ink);
}

.nov-btn i {
  font-size: 15px;
  transition: transform 0.4s var(--nov-ease);
}

/* 深墨底 + 金字 */
.nov-btn--dark {
  background: var(--nov-ink);
  color: var(--nov-gold) !important;
  border-color: var(--nov-ink);
}

.nov-btn--dark:hover {
  background: var(--nov-gold);
  color: var(--nov-ink) !important;
  border-color: var(--nov-gold);
}

.nov-btn--dark:hover i { transform: translateX(4px); }

/* 金底 + 深墨字 */
.nov-btn--gold {
  background: var(--nov-gold);
  color: var(--nov-ink) !important;
  border-color: var(--nov-gold);
}

.nov-btn--gold:hover {
  background: var(--nov-ink);
  color: var(--nov-gold) !important;
  border-color: var(--nov-ink);
}

.nov-btn--gold:hover i { transform: translateX(4px); }

/* 幽灵按钮：金边深墨字 */
.nov-btn--ghost {
  background: transparent;
  color: var(--nov-ink) !important;
  border-color: var(--nov-gold);
}

.nov-btn--ghost:hover {
  background: var(--nov-gold);
  color: var(--nov-ink) !important;
}

.nov-btn--ghost:hover i { transform: translateX(4px); }

/* ========== ========== Section 1: 双层导航 (nov-header) ========== ========== */

/* 第一层：深色信息条（社交/搜索/用户/购物车） */
.nov-topbar {
  background: var(--nov-ink);
  color: var(--nov-white);
  font-size: 12px;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* topbar/header 内容器宽度优化：覆盖 UIKit uk-container-large 默认 1200px，提升至 1400px
   仅作用于 .nov-topbar 和 .nov-header 内部，不影响其他页面/模块的 uk-container
   注意：.nov-topbar 设有 display:flex，子元素 .uk-container 会变成 flex item，
   宽度由内容决定。需加 width:100% + flex:1 让容器占满父元素宽度
   box-sizing: border-box 确保 padding 计入宽度，与 block 元素的 header 容器一致 */
.nov-topbar .uk-container,
.nov-topbar .uk-container.uk-container-large,
.nov-header .uk-container,
.nov-header .uk-container.uk-container-large {
  max-width: 1400px;
  width: 100%;
  flex: 1 1 100%;
}

.nov-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nov-topbar__left {
  display: flex;
  align-items: center;
  gap: 24px;
  color: rgba(255,255,255,0.65);
  font-size: 12px;
}

.nov-topbar__left p {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nov-topbar__left i {
  color: var(--nov-gold);
  font-size: 14px;
}

.nov-topbar__right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nov-topbar__social {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nov-topbar__social a {
  color: rgba(255,255,255,0.6);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  transition: all var(--nov-trans);
}

.nov-topbar__social a:hover {
  background: var(--nov-gold);
  color: var(--nov-ink);
}

.nov-topbar__divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.1);
  margin: 0 4px;
}

.nov-topbar__account {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.7);
  transition: color var(--nov-trans);
  text-decoration: none;
  cursor: pointer;
}

.nov-topbar__account:hover { color: var(--nov-gold); }
.nov-topbar__account i { font-size: 15px; }

/* 第二层：白色主导航区（Logo 居中 + 菜单两侧分布） */
.nov-header {
  background: var(--nov-cream);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--nov-line);
}

.nov-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 96px;
  gap: 24px;
  position: relative;
}

/* 左菜单 */
.nov-nav__menu--left,
.nov-nav__menu--right {
  display: flex;
  align-items: center;
  gap: 38px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.nov-nav__menu--right { justify-content: flex-end; }

.nov-nav__menu--left li,
.nov-nav__menu--right li {
  position: relative;
}

.nov-nav__menu--left a,
.nov-nav__menu--right a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nov-ink);
  padding: 8px 0;
  display: inline-block;
  text-decoration: none;
  position: relative;
}

.nov-nav__menu--left a::after,
.nov-nav__menu--right a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--nov-gold);
  transition: all var(--nov-trans);
  transform: translateX(-50%);
}

.nov-nav__menu--left li.uk-active a,
.nov-nav__menu--right li.uk-active a,
.nov-nav__menu--left a:hover,
.nov-nav__menu--right a:hover {
  color: var(--nov-gold);
}

.nov-nav__menu--left li.uk-active a::after,
.nov-nav__menu--right li.uk-active a::after,
.nov-nav__menu--left a:hover::after,
.nov-nav__menu--right a:hover::after {
  width: 100%;
}

/* Logo 居中 */
.nov-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  color: var(--nov-ink);
  padding: 0 32px;
  flex-shrink: 0;
}

.nov-logo__mark {
  font-family: novSans, 'Montserrat', sans-serif !important;
  font-size: 40px;
  font-weight: 400;
  color: var(--nov-ink);
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0;
  transition: color var(--nov-trans);
}

.nov-logo:hover .nov-logo__mark {
  color: var(--nov-gold);
}

.nov-logo__sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--nov-ink-40);
  margin-top: 6px;
  margin-bottom: 0;
  line-height: 1;
}

/* 右侧功能：搜索/用户/购物车 */
.nov-nav__tools {
  display: none; /* 顶层工具已放在 topbar */
}

/* 移动端汉堡按钮 */
.nov-nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--nov-line);
  background: transparent;
  cursor: pointer;
  padding: 10px;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.nov-nav__toggle span {
  display: block;
  height: 2px;
  background: var(--nov-ink);
  transition: all var(--nov-trans);
}

/* ========== 搜索弹窗 ========== */
.nov-search-modal .uk-modal-dialog {
  background: var(--nov-white);
  border-radius: 0;
  padding: 48px;
  box-shadow: var(--nov-shadow-l);
}

.nov-search-title {
  font-family: novSans, 'Montserrat', sans-serif !important;
  font-size: 32px;
  font-weight: 400;
  text-align: center;
  color: var(--nov-ink);
  margin: 0 0 32px;
  letter-spacing: 0.05em;
}

.nov-search-modal .uk-input {
  background: transparent;
  border: 1px solid var(--nov-line);
  padding: 18px 52px;
  height: auto;
  font-size: 15px;
  color: var(--nov-ink);
  transition: border-color var(--nov-trans);
  border-radius: 0;
}

.nov-search-modal .uk-input:focus {
  border-color: var(--nov-gold);
  outline: none;
}

.nov-search-modal .uk-form-icon {
  color: var(--nov-ink-40);
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}

.nov-search-btn {
  display: block;
  margin: 24px auto 0;
  padding: 14px 48px;
  background: var(--nov-ink);
  color: var(--nov-gold) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--nov-ink);
  cursor: pointer;
  transition: all var(--nov-trans);
  border-radius: 0;
}

.nov-search-btn:hover {
  background: var(--nov-gold);
  color: var(--nov-ink) !important;
  border-color: var(--nov-gold);
}

/* ========== 用户下拉菜单 ========== */
.nov-user-dropdown .uk-dropdown {
  border-radius: 0;
  padding: 12px 0;
  background: var(--nov-white);
  box-shadow: var(--nov-shadow-m);
  border: 1px solid var(--nov-line);
  min-width: 220px;
}

.nov-user-dropdown .uk-dropdown-nav li a {
  color: var(--nov-ink);
  font-size: 13px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all var(--nov-trans);
  text-transform: none;
  letter-spacing: 0;
}

.nov-user-dropdown .uk-dropdown-nav li a i {
  color: var(--nov-gold);
  font-size: 16px;
}

.nov-user-dropdown .uk-dropdown-nav li a:hover {
  background: var(--nov-linen);
  color: var(--nov-ink);
}

/* ========== 移动端 Off-canvas ========== */
.nov-mobile-wrap .uk-offcanvas-bar {
  background: var(--nov-ink);
  color: var(--nov-white);
  width: 320px;
  padding: 36px 28px;
}

.nov-mobile-logo {
  font-family: novSans, 'Montserrat', sans-serif !important;
  font-size: 28px;
  color: var(--nov-gold);
  letter-spacing: 0.08em;
  display: inline-block;
  margin: 0 0 36px;
  text-decoration: none;
}

.nov-mobile-logo small {
  font-family: novSans, 'Montserrat', sans-serif !important;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--nov-ink-40);
  display: block;
  margin-top: 8px;
}

.nov-mobile-wrap .uk-offcanvas-bar .uk-nav li a {
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: all var(--nov-trans);
}

.nov-mobile-wrap .uk-offcanvas-bar .uk-nav li.uk-active a,
.nov-mobile-wrap .uk-offcanvas-bar .uk-nav li a:hover {
  color: var(--nov-gold);
  background: transparent;
}

.nov-mobile-wrap .uk-offcanvas-close {
  color: rgba(255,255,255,0.7);
}

/* ========== ========== Section Footer (nov-footer) ========== ========== */

.nov-footer {
  background: var(--nov-ink);
  color: rgba(255,255,255,0.7);
  margin-top: 0;
  padding-top: 0;
}

/* Footer 顶层：品牌大标 + 订阅 */
.nov-footer__hero {
  background: var(--nov-ink);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 72px 0 64px;
}

.nov-footer__hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}

.nov-footer__brand {
  max-width: 520px;
}

.nov-footer__brand-mark {
  font-family: novSans, 'Montserrat', sans-serif !important;
  font-size: 52px;
  font-weight: 400;
  color: var(--nov-gold);
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0 0 12px;
}

.nov-footer__brand-tag {
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: 0 0 28px;
}

.nov-footer__brand-desc {
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

.nov-footer__subscribe h4 {
  font-family: novSans, 'Montserrat', sans-serif !important;
  font-size: 22px;
  font-weight: 400;
  color: var(--nov-white);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}

.nov-footer__subscribe p {
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  margin: 0 0 22px;
}

.nov-footer__form {
  display: flex;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.12);
  transition: border-color var(--nov-trans);
}

.nov-footer__form:focus-within {
  border-color: var(--nov-gold);
}

.nov-footer__form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 16px 20px;
  color: var(--nov-white);
  font-size: 13px;
  border-radius: 0;
}

.nov-footer__form input::placeholder {
  color: rgba(255,255,255,0.35);
}

.nov-footer__form button {
  background: var(--nov-gold);
  color: var(--nov-ink);
  border: none;
  padding: 16px 30px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--nov-trans);
}

.nov-footer__form button:hover {
  background: var(--nov-white);
}

/* Footer 中层：3栏链接网格 */
.nov-footer__main {
  padding: 60px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nov-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}

.nov-footer__col-title {
  font-family: novSans, 'Montserrat', sans-serif !important;
  font-size: 18px;
  font-weight: 400;
  color: var(--nov-white);
  margin: 0 0 24px;
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: 14px;
}

.nov-footer__col-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background: var(--nov-gold);
}

.nov-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nov-footer__list li {
  margin: 0 0 12px;
}

.nov-footer__list a {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  text-decoration: none;
  transition: all var(--nov-trans);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nov-footer__list a:hover {
  color: var(--nov-gold);
  padding-left: 4px;
}

/* 联系信息 */
.nov-footer__contact p {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  margin: 0 0 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.7;
}

.nov-footer__contact p i {
  color: var(--nov-gold);
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 3px;
}

/* Footer 底部：版权 + 支付卡种 */
.nov-footer__bottom {
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.nov-footer__copy {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  margin: 0;
}

.nov-footer__links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nov-footer__links a {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  text-decoration: none;
  transition: color var(--nov-trans);
}

.nov-footer__links a:hover { color: var(--nov-gold); }

.nov-footer__cards {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nov-footer__cards img {
  height: 28px;
  width: auto;
  display: block;
  opacity: 0.85;
  transition: all var(--nov-trans);
  background: var(--nov-white);
  padding: 4px 8px;
}

.nov-footer__cards img:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ========== 购物车徽章 ========== */
.nov-cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--nov-gold);
  color: var(--nov-ink);
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ========== 响应式：平板 ========== */
@media (max-width: 1199px) {
  .nov-nav__menu--left,
  .nov-nav__menu--right { gap: 24px; }
  .nov-nav__menu--left a,
  .nov-nav__menu--right a { font-size: 11px; letter-spacing: 1.5px; }
  .nov-logo__mark { font-size: 34px; }
  .nov-footer__hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .nov-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

/* ========== 响应式：手机 ========== */
@media (max-width: 959px) {
  .nov-topbar__left p + p { display: none; }
  .nov-topbar__social { display: none; }
  .nov-nav__menu--left,
  .nov-nav__menu--right { display: none; }
  .nov-nav { min-height: 76px; }
  .nov-nav__toggle { display: inline-flex; }
  .nov-logo { padding: 0 16px; }
  .nov-logo__mark { font-size: 28px; }
  .nov-logo__sub { display: none; }
  .nov-footer__hero { padding: 48px 0 40px; }
  .nov-footer__brand-mark { font-size: 36px; }
  .nov-footer__main { padding: 40px 0; }
  .nov-footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .nov-footer__bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 639px) {
  .nov-topbar__inner { justify-content: center; }
  .nov-topbar__left { display: none; }
  .nov-footer__form { flex-direction: column; gap: 0; }
  .nov-footer__form button { width: 100%; }
  .nov-footer__cards img { height: 24px; }
}

/* ============================================================
   兼容样式：产品列表/详情/购物车/用户中心等页面共享
   这些样式原属 model23 public.css，此处保留以确保
   除首页以外的页面不受 NOVA 主题重构影响
   ============================================================ */

/* bxzwjh 字体别名映射（消除数据库配置引用不存在字体时的控制台错误） */
@font-face {
  font-family: bxzwjh;
  src: url('../fonts/Montserrat-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

/* ========== 产品列表/详情页公共容器 ========== */
.am-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.am-section {
  position: relative;
}

.am-section-title {
  font-family: novSans, 'Montserrat', sans-serif !important;
  font-size: 36px;
  font-weight: 400;
  color: var(--nov-ink);
  margin: 0;
  line-height: 1.2;
}

/* ========== 分页样式（产品列表页等） ========== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 30px 0;
  padding: 0;
  list-style: none;
}

.pagination li a,
.pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--nov-line);
  color: var(--nov-ink);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 14px;
  box-sizing: border-box;
}

.pagination li a:hover {
  background-color: var(--nov-linen);
  border-color: var(--nov-gold);
}

.pagination li.active span {
  background-color: var(--nov-ink);
  border-color: var(--nov-ink);
  color: var(--nov-white);
}

.pagination li.disabled span {
  color: var(--nov-ink-20);
  cursor: not-allowed;
  background: var(--nov-linen);
}

/* ========== 产品列表/详情页响应式 ========== */
@media (max-width: 767px) {
  .am-container { padding: 0 16px; }
  .am-section-title { font-size: 26px; }
}