/**
 * 前台头/底布局变体 — 视觉强化版
 * 对应 views/layouts/headers/header_XX.php、footers/footer_XX.php
 * 配置：config/storefront_layout.php（1–10）
 *
 * 布局安全：避免误选嵌套 .container；页脚用 .sf-footer__newsletter / .sf-footer__main。
 */

/* ── 全变体通用微调（不破坏 shop.css 结构）──────────────────── */
.site-header[class*="hdr-layout-"] {
  transition: box-shadow 0.35s ease, background 0.35s ease, border-color 0.25s ease;
  box-sizing: border-box;
}

.site-header[class*="hdr-layout-"] .hdr2-icon {
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.site-header[class*="hdr-layout-"] .hdr2-icon:hover {
  background: rgba(0, 0, 0, 0.05);
}

.site-header[class*="hdr-layout-"] .hdr2-search .hdr2-search__wrap {
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* ── Header 01 · 经典留白（默认加强）──────────────────────── */
.site-header.hdr-layout-01 {
  background: #fff;
}

.site-header.hdr-layout-01.is-scrolled {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.site-header.hdr-layout-01 .hdr2-search .hdr2-search__wrap {
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.site-header.hdr-layout-01 .hdr2-search:focus-within .hdr2-search__wrap {
  box-shadow: inset 0 0 0 1px var(--theme-primary, #1a1a1a), 0 0 0 3px rgba(26, 26, 26, 0.08);
}

/* ── Header 02 · 居中 Logo + 底栏导航（细分隔 + 主题顶线 + 滚动阴影）──── */
.site-header.hdr-layout-02 {
  background: #fff;
}

.site-header.hdr-layout-02.is-scrolled {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.site-header.hdr-layout-02 .hdr2-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 992px) {
  .site-header.hdr-layout-02 .hdr2-row {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

.site-header.hdr-layout-02 .hdr2-menu {
  border-top: none;
  background: linear-gradient(180deg, #f6f6f6 0%, #fbfbfb 45%, #ffffff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  position: relative;
}

/* 顶线：用主题强调色做轻量品牌条（不过度抢眼） */
.site-header.hdr-layout-02 .hdr2-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    var(--theme-accent, #c62828) 20%,
    var(--theme-accent, #c62828) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 0.42;
  pointer-events: none;
}

@media (min-width: 992px) {
  .site-header.hdr-layout-02 .hdr2-menu .parent_link {
    letter-spacing: 0.08em;
    font-size: 0.69rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.72);
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    transition: color 0.2s ease, opacity 0.2s ease;
  }

  .site-header.hdr-layout-02 .hdr2-menu .parent_link:hover,
  .site-header.hdr-layout-02 .hdr2-menu .parent_link:focus-visible {
    color: var(--theme-primary, #1a1a1a);
  }
}

/* ── Header 03 · 浮起导航（柔和阴影）──────────────────────── */
.site-header.hdr-layout-03 {
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}

.site-header.hdr-layout-03 .hdr2-menu {
  border-top: none;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

/* mega-menu 仅桌面显示；gap 只作用于 d-flex 的 menu__panel */
@media (min-width: 992px) {
  .site-header.hdr-layout-03 .hdr2-menu .menu__panel.menu__level-01 {
    gap: 0.25rem 0.5rem;
  }
}

/* ── Header 04 · 品牌色底边强调 ───────────────────────────── */
.site-header.hdr-layout-04 {
  border-bottom: none;
  box-shadow: none;
}

.site-header.hdr-layout-04::after {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  max-width: 100%;
  background: linear-gradient(
    90deg,
    var(--theme-primary, #1a1a1a) 0%,
    var(--theme-accent, #c9a227) 50%,
    var(--theme-primary, #1a1a1a) 100%
  );
  opacity: 0.92;
}

.site-header.hdr-layout-04.is-scrolled::after {
  opacity: 1;
}

/* ── Header 05 · 暖灰画布 ─────────────────────────────────── */
.site-header.hdr-layout-05 {
  background: #f6f5f3;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.site-header.hdr-layout-05 .hdr2-search .hdr2-search__wrap {
  background: #fff;
  border-radius: 12px;
}

.site-header.hdr-layout-05 .hdr2-menu {
  background: rgba(255, 255, 255, 0.88);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.hdr-layout-05 .hdr2-menu {
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.hdr-layout-05 .hdr2-menu {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.92);
  }
}

/* ── Header 06 · 双层分隔（精致）─────────────────────────── */
.site-header.hdr-layout-06 {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 12px 40px rgba(0, 0, 0, 0.04);
}

.site-header.hdr-layout-06 .hdr2-menu {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.site-header.hdr-layout-06 .hdr2-logo {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Header 07 · 导航丝带（浅底）──────────────────────────── */
.site-header.hdr-layout-07 .hdr2-menu {
  border-top: 1px solid var(--border, #e8e8e8);
  background: linear-gradient(180deg, #f3f3f1 0%, #fafafa 100%);
}

.site-header.hdr-layout-07 .hdr2-menu .parent_link:hover,
.site-header.hdr-layout-07 .hdr2-menu .parent_menu_item:hover > .parent_link {
  color: var(--theme-primary, #1a1a1a);
}

/* ── Header 08 · 宽屏编辑风（只加宽顶栏与导航内 container，不误伤其他嵌套）── */
.site-header.hdr-layout-08 > .container,
.site-header.hdr-layout-08 .hdr2-menu > .container {
  max-width: 1320px;
}

@media (min-width: 992px) {
  .site-header.hdr-layout-08 .hdr2-logo img {
    max-height: 56px;
  }
}

.site-header.hdr-layout-08 .hdr2-search .hdr2-search__wrap {
  border-radius: 14px;
}

@media (min-width: 992px) {
  .site-header.hdr-layout-08 .hdr2-row {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* ── Header 09 · 极简线框（下划线仅桌面 mega-menu，避免影响下拉层叠）── */
.site-header.hdr-layout-09 {
  background: #fff;
  border-bottom: none;
  box-shadow: none;
}

.site-header.hdr-layout-09.is-scrolled {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

@media (min-width: 992px) {
  .site-header.hdr-layout-09 .hdr2-menu .parent_link {
    padding-bottom: 0.35rem;
  }

  .site-header.hdr-layout-09 .hdr2-menu .parent_link span {
    position: relative;
    display: inline-block;
  }

  .site-header.hdr-layout-09 .hdr2-menu .parent_menu_item:hover > .parent_link span::after,
  .site-header.hdr-layout-09 .hdr2-menu .parent_menu_item:focus-within > .parent_link span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--theme-primary, #1a1a1a);
    border-radius: 2px;
    pointer-events: none;
  }
}

/* ── Header 10 · 顶部微渐变 + 高级感 ─────────────────────── */
.site-header.hdr-layout-10 {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f8 55%, #f5f4f2 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.site-header.hdr-layout-10 .hdr2-menu {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.5);
}

/* ── Footer 通用：底栏链接过渡 ───────────────────────────── */
.sf-footer[class*="sf-footer--"] .footer-bottom-bar a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* 社交图标（原内联 onmouse* 会破坏浅色脚） */
.sf-footer:not(.sf-footer--02) .sf-footer__social-link:hover {
  border-color: rgba(255, 255, 255, 0.92) !important;
  color: #fff !important;
}

.sf-footer.sf-footer--02 .sf-footer__social-link {
  border-color: rgba(0, 0, 0, 0.16) !important;
  color: rgba(45, 42, 38, 0.55) !important;
}

.sf-footer.sf-footer--02 .sf-footer__social-link:hover {
  border-color: var(--theme-primary, #1a1a1a) !important;
  color: var(--theme-primary, #1a1a1a) !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

.sf-footer.sf-footer--04 .sf-footer__social-link:hover {
  border-color: rgba(180, 210, 255, 0.75) !important;
  color: #fff !important;
}

.sf-footer .sf-footer__col-link {
  color: rgba(255, 255, 255, 0.45) !important;
}

.sf-footer .sf-footer__col-link:hover {
  color: #fff !important;
}

.sf-footer.sf-footer--02 .sf-footer__col-link {
  color: rgba(45, 42, 38, 0.58) !important;
}

.sf-footer.sf-footer--02 .sf-footer__col-link:hover {
  color: var(--theme-primary, #1a1a1a) !important;
}

.sf-footer .sf-footer__legal-link {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 0.72rem;
}

.sf-footer .sf-footer__legal-link:hover {
  color: rgba(255, 255, 255, 0.75) !important;
}

.sf-footer.sf-footer--02 .sf-footer__legal-link {
  color: rgba(45, 42, 38, 0.45) !important;
}

.sf-footer.sf-footer--02 .sf-footer__legal-link:hover {
  color: var(--theme-primary, #1a1a1a) !important;
}

/* ── Footer 01 · 标准深色（略提亮层次）────────────────────── */
.sf-footer.sf-footer--01 {
  background: linear-gradient(180deg, #1a1a1a 0%, #141414 100%) !important;
}

.sf-footer.sf-footer--01 .sf-footer__newsletter {
  background: rgba(255, 255, 255, 0.02);
}

/* ── Footer 02 · 浅色「编辑杂志」风（与默认深色脚差异大）────────────── */
.sf-footer.sf-footer--02 {
  background: linear-gradient(180deg, #f7f4ee 0%, #ebe5d9 38%, #e2d8c8 100%) !important;
  color: rgba(45, 42, 38, 0.82) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.sf-footer.sf-footer--02 .sf-footer__newsletter {
  background: #fffefb !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 12px 40px rgba(62, 48, 28, 0.08);
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
  position: relative;
}

.sf-footer.sf-footer--02 .sf-footer__newsletter::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--theme-accent, #8b4513) 25%,
    var(--theme-accent, #8b4513) 75%,
    transparent
  );
  opacity: 0.35;
  pointer-events: none;
}

.sf-footer.sf-footer--02 .sf-footer__main {
  padding-top: 3rem !important;
  padding-bottom: 2.5rem !important;
}

/* 覆盖内联浅色字：统一改为墨色层次 */
.sf-footer.sf-footer--02 [style*="color:var(--white)"] {
  color: #1f1d1b !important;
}

.sf-footer.sf-footer--02 [style*="rgba(255,255,255,.7)"] {
  color: rgba(45, 42, 38, 0.88) !important;
}

.sf-footer.sf-footer--02 [style*="rgba(255,255,255,.5)"] {
  color: rgba(45, 42, 38, 0.55) !important;
}

.sf-footer.sf-footer--02 [style*="rgba(255,255,255,.45)"] {
  color: rgba(45, 42, 38, 0.58) !important;
}

.sf-footer.sf-footer--02 [style*="rgba(255,255,255,.3)"] {
  color: rgba(45, 42, 38, 0.42) !important;
}

.sf-footer.sf-footer--02 [style*="rgba(255,255,255,.35)"] {
  color: rgba(45, 42, 38, 0.4) !important;
}

.sf-footer.sf-footer--02 [style*="rgba(255,255,255,.6)"] {
  color: rgba(45, 42, 38, 0.5) !important;
}

.sf-footer.sf-footer--02 h6 {
  color: #1a1816 !important;
  letter-spacing: 0.14em !important;
}

.sf-footer.sf-footer--02 a[style*="color:rgba(255,255,255"] {
  color: rgba(45, 42, 38, 0.55) !important;
}

.sf-footer.sf-footer--02 #footerNewsletterEmail {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #1a1816 !important;
}

.sf-footer.sf-footer--02 #footerNewsletterEmail:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--theme-primary, #1a1a1a) !important;
}

.sf-footer.sf-footer--02 #footerNewsletterBtn.btn-white {
  background: var(--theme-primary, #1a1a1a) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

.sf-footer.sf-footer--02 .footer-bottom-bar {
  background: rgba(255, 255, 255, 0.45) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.sf-footer.sf-footer--02 .footer-bottom-bar .container {
  color: rgba(45, 42, 38, 0.45) !important;
}

.sf-footer.sf-footer--02 .footer-bottom-bar a {
  color: rgba(45, 42, 38, 0.5) !important;
}

.sf-footer.sf-footer--02 .footer-bottom-bar a:hover {
  color: var(--theme-primary, #1a1a1a) !important;
}

/* ── Footer 03 · 金线点缀（订阅区）────────────────────────── */
.sf-footer.sf-footer--03 .sf-footer__newsletter {
  border-bottom: 1px solid rgba(201, 162, 39, 0.45) !important;
  background: linear-gradient(90deg, transparent 0%, rgba(201, 162, 39, 0.06) 50%, transparent 100%);
}

/* ── Footer 04 · 深蓝海岸 + 侧栏强调（与 02 浅色反差大）────────────── */
.sf-footer.sf-footer--04 {
  background: linear-gradient(165deg, #0c1520 0%, #0a1628 42%, #060d18 100%) !important;
  color: rgba(230, 236, 245, 0.78) !important;
  border-top: 3px solid var(--theme-accent, #3d7ea6);
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.35);
}

.sf-footer.sf-footer--04 .sf-footer__newsletter {
  background: linear-gradient(90deg, rgba(61, 126, 166, 0.12) 0%, rgba(12, 21, 32, 0.92) 28%, rgba(12, 21, 32, 0.92) 100%) !important;
  border-bottom: 1px solid rgba(120, 170, 210, 0.22) !important;
  padding-top: 2.75rem !important;
  padding-bottom: 2.75rem !important;
  position: relative;
}

.sf-footer.sf-footer--04 .sf-footer__newsletter::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--theme-accent, #4a9eff), var(--theme-primary, #1e3a5f));
  opacity: 0.9;
  pointer-events: none;
}

.sf-footer.sf-footer--04 .sf-footer__newsletter .container,
.sf-footer.sf-footer--04 .sf-footer__main {
  max-width: 1140px;
}

.sf-footer.sf-footer--04 .sf-footer__main {
  padding-top: 3.25rem !important;
  padding-bottom: 2.75rem !important;
}

.sf-footer.sf-footer--04 .row.g-3.g-lg-5 {
  --bs-gutter-x: 1.85rem;
  --bs-gutter-y: 1.5rem;
}

.sf-footer.sf-footer--04 h6 {
  color: #f0f4fa !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.sf-footer.sf-footer--04 #footerNewsletterEmail {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(140, 180, 220, 0.35) !important;
}

.sf-footer.sf-footer--04 #footerNewsletterBtn.btn-white {
  background: linear-gradient(180deg, var(--theme-accent, #4a9eff), #2d6a9a) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

.sf-footer.sf-footer--04 .footer-bottom-bar {
  background: rgba(0, 0, 0, 0.25) !important;
  border-top: 1px solid rgba(100, 140, 180, 0.2) !important;
}

/* ── Footer 05 · 顶部强调色条 + 订阅按钮 ───────────────────── */
.sf-footer.sf-footer--05 {
  border-top: 4px solid var(--theme-accent, #d32f2f);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.12);
}

.sf-footer.sf-footer--05 #footerNewsletterBtn.btn-white {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 0.65rem 1.35rem;
}

/* ── Footer 06 · 透气间距 ─────────────────────────────────── */
.sf-footer.sf-footer--06 .row.g-3.g-lg-5 {
  --bs-gutter-y: 2rem;
}

.sf-footer.sf-footer--06 .sf-footer__newsletter {
  padding-top: 2.75rem !important;
  padding-bottom: 2.75rem !important;
}

/* ── Footer 07 · 字距与层级 ───────────────────────────────── */
.sf-footer.sf-footer--07 {
  letter-spacing: 0.015em;
}

.sf-footer.sf-footer--07 h6 {
  letter-spacing: 0.12em !important;
  opacity: 0.95;
}

/* ── Footer 08 · 订阅区收紧、主区加宽 ─────────────────────── */
.sf-footer.sf-footer--08 .sf-footer__newsletter {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.sf-footer.sf-footer--08 .sf-footer__main {
  padding-top: 3.5rem !important;
  padding-bottom: 3rem !important;
}

/* ── Footer 09 · 冷灰蓝调 ─────────────────────────────────── */
.sf-footer.sf-footer--09 {
  background: linear-gradient(180deg, #16161d 0%, #0e0e12 100%) !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.sf-footer.sf-footer--09 .sf-footer__newsletter {
  border-bottom-color: rgba(120, 140, 180, 0.2) !important;
}

/* ── Footer 10 · 极简底栏 + 顶部分割 ─────────────────────── */
.sf-footer.sf-footer--10 {
  background: #0a0a0c !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sf-footer.sf-footer--10 .footer-bottom-bar {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
  padding-top: 1.1rem !important;
  padding-bottom: 1.1rem !important;
}

/* 订阅输入：多版本统一略美化（覆盖内联圆角过「鼓」时仍协调） */
.sf-footer #footerNewsletterEmail {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sf-footer #footerNewsletterEmail:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}