/* ==========================================================================
   Taimei — 新版纯黑页脚（全屏宽度黑色背景）
   需在页面自身 style.css 之后引入，以覆盖旧版页脚规则。
   ========================================================================== */

.footer {
  position: relative;
  height: 468px;
  background: #000000;
  /* 不能裁剪：::before 需要以 100vw 全宽铺黑，裁剪会把黑色限制在 1440px 内容区 */
  overflow: visible;
}

/* 黑色背景扩展到全屏宽度 */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: #000000;
  z-index: 0;
}

/* Logo（仅保留太美主 logo） */
.footer__brands .footer__logo,
.footer__logo {
  position: absolute;
  top: 207px;
  left: 158px;
  width: 149px;
  height: 54px;
  z-index: 1;
}

.footer__brand-2 {
  display: none;
}

/* 4 列导航 */
.footer__nav {
  position: absolute;
  top: 100px;
  left: 409px;
  display: flex;
  gap: 20px;
  z-index: 1;
}

.footer__nav::before,
.footer__info::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -60px;
  width: 1px;
  height: 270px;
  background: #ffffff;
}

.footer__nav-col {
  display: flex;
  flex-direction: column;
}

.footer__nav-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 25px;
  color: #ffffff;
}

.footer__nav-col a {
  font-size: 12px;
  font-weight: 300;
  line-height: 25px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.footer__nav-col a:hover {
  opacity: 0.8;
}

/* 右侧地址 + 社交 + 二维码 */
.footer__info {
  position: absolute;
  top: 100px;
  left: 1027px;
  width: 255px;
  z-index: 1;
}

.footer__address {
  margin: 0;
  font-size: 12px;
  line-height: 25px;
  color: #ffffff;
}

.footer__address strong,
.footer__address span {
  display: block;
}

.footer__address strong {
  font-weight: 700;
}

.footer__address span {
  font-weight: 300;
}

.footer__social {
  position: absolute;
  top: 146px;
  left: 1px;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* 社交图标：默认态半透明（偏暗），鼠标悬停变亮 */
.footer__social a {
  display: inline-flex;
  color: #ffffff;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.footer__social a:hover {
  opacity: 1;
}

.footer__social img {
  width: 20px;
  height: 20px;
}

/* 二维码：左侧无 logo，右侧带太美 logo */
.footer__qr {
  position: absolute;
  top: 189px;
  left: 0;
  width: 80px;
  height: 80px;
  z-index: 1;
}

.footer__qr--taimei {
  left: 152px;
}

/* 返回顶部 */
.footer__badge {
  position: absolute;
  top: 99px;
  left: 1320px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 1;
}

.footer__badge img {
  display: block;
  width: 100%;
  height: 100%;
}

/* 底部版权（设计稿中该行为居中，左右留白 71px/73px 对称） */
.footer__legal {
  position: absolute;
  top: 416px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  z-index: 1;
}

.footer__legal span {
  position: static;
  font-size: 12px;
  line-height: 25px;
  color: #ffffff;
  white-space: nowrap;
}

/* Cookies 链接（打开 Cookie 偏好设置弹窗） */
.footer__legal a.footer__legal-link {
  position: static;
  font-size: 12px;
  line-height: 25px;
  color: #ffffff;
  white-space: nowrap;
  text-decoration: none;
}

.footer__legal a.footer__legal-link:hover {
  text-decoration: underline;
}

/* 兼容：旧结构残留元素隐藏 */
.footer__cube,
.footer__glow,
.footer__title,
.footer__contact {
  display: none;
}

/* ==========================================================================
   窄屏（≤1439px）：修正全屏黑底层的对齐
   .footer 位于固定 1440px 画布 .page 内；视口窄于 1440px 时 CSS 会把 .page
   的 margin:auto 解析为 0（不产生负边距），.page 左边缘落在 0 而非居中，
   上面 ::before 的 left:50% + translateX(-50%) 会让这层黑底整体右移
   G = 720 - 视口宽/2，左侧那段失去覆盖（目前靠 .footer 自身黑底兜住，属隐患）。
   这里直接钉在左边缘并清掉位移，使黑底严格铺满视口；
   ≥1440px 不命中本规则，PC 效果不变。
   ========================================================================== */

@media (max-width: 1439px) {
  .footer::before {
    left: 0;
    transform: none;
  }
}