/**
 * 英文版移动端宽度修复
 * 修复 header、.head-info、.bottom-btn 在390px屏幕上显示为502px的问题
 * 只影响英文模板，不影响中文模板
 */

/* 全局修复 - 确保html和body正确处理宽度 */
html {
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

body {
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Header修复 */
header {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Head-info修复 */
.head-info {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.head-info .l-wrap {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Bottom-btn修复 */
.bottom-btn {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  left: 0;
  right: 0;
}

.bottom-btn .btn-item {
  box-sizing: border-box;
}

/* 移动端特定修复 */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  header {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .head-info {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    padding: 0px 15px;
  }

  .head-info .l-wrap {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .logo {
    max-width: 60%;
    padding-right: 10px;
  }

  /* Bottom-btn移动端修复 */
  .bottom-btn {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    left: 0;
    right: 0;
  }

  .bottom-btn.is-active {
    width: 100%;
    box-sizing: border-box;
  }

  .bottom-btn .btn-item {
    width: 25%;
    box-sizing: border-box;
  }

  .bottom-btn .btn-item a,
  .bottom-btn .btn-item > div {
    box-sizing: border-box;
  }
}

/* 小屏幕设备额外修复 (390px及以下) */
@media (max-width: 390px) {
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  header,
  .head-info,
  .head-info .l-wrap,
  .bottom-btn {
    max-width: 100vw;
    overflow-x: hidden;
  }
}