/*
 * 我要买卡｜手机白屏安全恢复第五阶段
 * 合并恢复：Logo/顶部、左右溢出、商品卡片、付款方式图片
 *
 * 纯 CSS：不使用 JavaScript，不修改 DOM，不接触数据库。
 */

/* =========================================================
   1. 全站横向溢出控制：去除手机端两侧多余空白/横向滚动
   ========================================================= */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

#content,
.site-wrapper,
.page-wrapper,
.main-wrapper,
#main,
#container {
  min-width: 0;
  max-width: 100%;
}

.container,
.container-fluid,
.j-container {
  min-width: 0;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

/* 防止 Journal 3 某些行因负边距造成手机端横向溢出 */
@media (max-width: 767px) {
  .row {
    margin-left: -8px;
    margin-right: -8px;
  }

  .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }

  .container,
  .container-fluid,
  .j-container {
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* =========================================================
   2. 手机端 Logo、顶部菜单、搜索框对齐
   ========================================================= */
@media (max-width: 767px) {
  header,
  #header,
  .header,
  .mobile-header {
    max-width: 100%;
  }

  .mobile-header .logo,
  .mobile-logo,
  #logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
  }

  .mobile-header .logo img,
  .mobile-logo img,
  #logo img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-height: 42px !important;
    max-width: 150px !important;
    object-fit: contain;
  }

  .mobile-header .menu-trigger,
  .mobile-header .mobile-menu-trigger,
  .mobile-header .search-trigger,
  .mobile-header .cart,
  .mobile-header .account {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
  }

  .header-search,
  .search-wrapper,
  .search-form,
  #search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .header-search input,
  .search-wrapper input,
  .search-form input,
  #search input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 42px;
    box-sizing: border-box;
  }
}

/* =========================================================
   3. 商品图片尺寸、卡片间距、名称高度统一
   ========================================================= */
.product-layout,
.product-grid,
.product-list,
.product-thumb {
  min-width: 0;
}

.product-thumb {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.product-thumb .image,
.product-thumb .product-img,
.product-layout .image,
.product-layout .product-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumb .image img,
.product-thumb .product-img img,
.product-layout .image img,
.product-layout .product-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center;
  display: block;
  background: #fff;
}

.product-thumb .caption,
.product-thumb .caption-wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.product-thumb .name,
.product-thumb .product-name {
  line-height: 1.45;
  min-height: 2.9em;
  margin-top: 10px;
}

.product-thumb .price {
  margin-top: auto;
}

@media (max-width: 767px) {
  .product-layout,
  .product-grid {
    margin-bottom: 14px;
  }

  .product-thumb {
    padding: 10px;
  }

  .product-thumb .name,
  .product-thumb .product-name {
    font-size: 14px;
    min-height: 2.8em;
  }
}

/* =========================================================
   4. 付款方式图片放大与统一
   适用于 Commonwealth Bank、Interac、工商银行、支付宝、
   微信、PayPal 等现有付款方式图片。
   ========================================================= */
.payment-method img,
.payment-methods img,
.payment-option img,
.payment-options img,
.payment-card img,
.payment-cards img,
.payment-logo img,
.payment-logos img,
.checkout-payment img,
#payment-method img,
[id*="payment"] img,
[class*="payment"] img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 190px !important;
  max-height: 72px !important;
  object-fit: contain !important;
  margin-left: auto;
  margin-right: auto;
}

.payment-method,
.payment-option,
.payment-card,
.checkout-payment .radio,
.checkout-payment .form-check {
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .payment-method img,
  .payment-methods img,
  .payment-option img,
  .payment-options img,
  .payment-card img,
  .payment-cards img,
  .payment-logo img,
  .payment-logos img,
  .checkout-payment img,
  #payment-method img,
  [id*="payment"] img,
  [class*="payment"] img {
    max-width: 165px !important;
    max-height: 64px !important;
  }

  .payment-method,
  .payment-option,
  .payment-card,
  .checkout-payment .radio,
  .checkout-payment .form-check {
    padding: 12px;
  }
}

/* 防止付款方式文字与图片互相挤压 */
.payment-method label,
.payment-option label,
.payment-card label,
.checkout-payment label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* =========================================================
   5. 安全保护：不影响关键交互
   ========================================================= */
button,
input,
select,
textarea,
a {
  touch-action: manipulation;
}

.product-thumb a,
.product-thumb button,
.product-info a,
.product-info button,
.checkout-payment input,
.checkout-payment label {
  pointer-events: auto;
}