/* ==================== 0. 全局变量 ==================== */
:root {
  --ala-primary: #8a444c;
  --ala-white: #ffffff;
  --ala-white-2: #f5f5f5;
  --ala-text-primary: #101010;
  --ala-text-secondary: #333333;
  --ala-text-tertiary: #666666;
  --ala-text-light: #999999;
  --ala-layout-padding: clamp(16px, calc(16px + 0.09577 * (100vw - 375px)), 118px);
  --btn-accented-bgcolor-hover: #666666 !important;
}

/* ==================== 1. 基础重置 ==================== */
body.ala-homepage-template {
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--ala-white) !important;
  font-family: "Microsoft YaHei UI", sans-serif !important;
  overflow-x: hidden !important;
}

/* 移除 WoodMart 干扰 */
body.ala-homepage-template .wd-page-wrapper,
body.ala-homepage-template .main-page-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ==================== 2. 桌面端导航栏 (120px) ==================== */
.ala-nav-bar,
.ala-sticky-header {
  width: 100% !important;
  min-height: 120px !important;
  background-color: var(--ala-white-2) !important;
  position: relative !important;
  z-index: 1000 !important;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  box-sizing: border-box !important;
}

/* Sticky Header 定位 */
.ala-sticky-header {
  position: fixed !important;
  top: -120px;
  left: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10000 !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.ala-sticky-header.show {
  top: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ala-nav-container {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important; /* 居中 */
  padding: 0 var(--ala-layout-padding) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 120px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.ala-nav-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  position: relative !important;
}

.ala-nav-left {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  z-index: 10 !important;
}

.ala-nav-center {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  max-width: 600px !important;
  display: flex !important;
  justify-content: center !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.ala-nav-center > * {
  pointer-events: auto !important;
}

.ala-nav-right {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  z-index: 10 !important;
}

.ala-logo {
  font-family: "Nohemi", "Arial Black", "Helvetica", sans-serif !important;
  font-size: 40px !important;
  font-weight: 600 !important;
  color: var(--ala-primary) !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.ala-nav-icons {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important; /* 缩小间距 */
}

.ala-nav-icon {
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ala-text-secondary) !important;
  position: relative !important;
  cursor: pointer !important;
}

.ala-nav-icon svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

.ala-cart-count {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  background-color: var(--ala-primary) !important;
  color: var(--ala-white) !important;
  font-size: 10px !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  line-height: 1 !important;
  z-index: 5 !important;
}

.ala-nav-search-wrapper {
  width: 100% !important;
  max-width: 600px !important; /* Figma 大约 600px */
}

.ala-nav-search-form {
  width: 100% !important;
  height: 60px !important;
  background: var(--ala-white) !important;
  border: 1px solid #999999 !important;
  border-radius: 30px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.ala-nav-search-input {
  flex: 1 !important;
  height: 100% !important;
  padding: 0 24px !important;
  border: none !important;
  background: transparent !important;
  font-size: 16px !important;
  color: var(--ala-text-tertiary) !important;
  outline: none !important;
  box-shadow: none !important;
}

.ala-nav-search-btn {
  width: 80px !important;
  height: 62px !important; /* 增加 2px 以覆盖上下边框 */
  background: var(--ala-primary) !important;
  border: none !important;
  margin: -1px !important; /* 向外扩展 1px 覆盖边框 */
  border-radius: 0 30px 30px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: opacity 0.3s !important;
  position: relative !important;
  z-index: 2 !important;
}

.ala-nav-search-btn:hover {
  opacity: 0.9 !important;
}

.ala-nav-search-btn svg {
  width: 20px !important;
  height: 20px !important;
}

/* ==================== 3. 移动端导航栏 (120px) ==================== */
.ala-mobile-header,
.ala-mobile-sticky-header {
  width: 100% !important;
  height: 120px !important;
  background-color: var(--ala-white-2) !important;
  padding: 26px 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  position: relative !important;
  z-index: 1000 !important;
}

/* 移动端 Sticky Header 特有样式 */
.ala-mobile-sticky-header {
  position: fixed !important;
  top: -120px;
  left: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10000 !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.ala-mobile-sticky-header.show {
  top: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ala-mobile-nav,
.ala-mobile-nav__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.ala-mobile-logo {
  font-family: "Nohemi", "Arial Black", sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--ala-primary) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  text-align: center !important;
}

.ala-mobile-icons-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.ala-mobile-icon {
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ala-text-secondary) !important;
  cursor: pointer !important;
}

/* 移动端搜索栏通用样式 (包含静态和 Sticky) */
.ala-mobile-search-wrapper {
  display: none !important;
  width: 100% !important;
  height: 36px !important;
}

@media (max-width: 768px) {
  .ala-mobile-search-wrapper {
    display: block !important;
  }
}

.ala-search-box {
  width: 100% !important;
  height: 36px !important;
  background: var(--ala-white) !important;
  border: 1px solid var(--ala-primary) !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  box-shadow: 4px 4px 8px rgba(102, 102, 102, 0.25) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ala-search-field {
  flex: 1 !important;
  height: 100% !important;
  padding: 0 16px !important;
  border: none !important;
  background: transparent !important;
  font-size: 12px !important;
  outline: none !important;
  box-shadow: none !important;
}

.ala-search-submit {
  width: 60px !important;
  height: 100% !important;
  background: var(--ala-primary) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==================== 4. 响应式控制 ==================== */
@media (max-width: 768px) {
  .ala-nav-bar { display: none !important; }
  .ala-mobile-header { display: flex !important; }
  .ala-footer { display: none !important; }
  .ala-footer-mobile { display: block !important; }
}

@media (min-width: 769px) {
  .ala-nav-bar { display: block !important; }
  .ala-mobile-header { display: none !important; }
  .ala-footer { display: block !important; }
  .ala-footer-mobile { display: none !important; }
}