/* ============================================================
   redeemai-item-mobile-fix.css — Item Detail Page Mobile Layout
   Fixes: SKU tap targets, contact field stacking, pay grid,
   image height, form spacing, and overall phone usability.
   ============================================================ */

/* ─── PHONE BREAKPOINT (≤767.98px) ─── */
@media (max-width: 767.98px) {

  /* 1. Image area: cap height so buy form is visible without scrolling */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-media-col {
    max-height: 220px !important;
    min-height: 160px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-media-card {
    max-height: 220px !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-visual-fallback {
    max-height: 220px !important;
  }

  /* 2. SKU pills: touch-friendly sizing (44px recommended tap target) */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .sku-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 2px 0 !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .sku-list .sku {
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .sku-list .sku .badge-money {
    top: -10px !important;
    right: -8px !important;
    font-size: 10px !important;
    padding: 1px 4px !important;
  }

  /* 3. Contact field: stack select + input vertically on narrow phones */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .order-contact-field .d-flex.gap-2 {
    flex-direction: column !important;
    gap: 8px !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .order-contact-field select[name="contact_platform"] {
    flex: none !important;
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .order-contact-field input[name="contact"] {
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  /* 4. Payment method buttons: grid 2-col for consistent tap targets */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .pay-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .pay-list .pay {
    min-height: 44px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    justify-content: center !important;
    font-size: 13px !important;
    width: 100% !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .pay-list .pay img {
    width: 18px !important;
    height: 18px !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .pay-list .pay span {
    font-size: 13px !important;
  }

  /* 5. Quantity group: full width, larger buttons */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .input-group.qty-group {
    width: 100% !important;
    max-width: 180px !important;
    min-height: 44px !important;
    padding: 6px 10px !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .input-group.qty-group > button {
    width: 36px !important;
    height: 28px !important;
    font-size: 16px !important;
  }

  /* 6. Form inputs: consistent 44px touch target height */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-form .form-control {
    min-height: 44px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-form .form-select {
    min-height: 44px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  /* 7. Buy brief section: compact on mobile */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-buy-brief {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-buy-brief p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 4px 0 !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-buy-brief__chips {
    gap: 6px !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-buy-brief__chips > span {
    font-size: 11px !important;
    padding: 2px 8px !important;
  }

  /* 8. Form labels: visible and properly spaced */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-form .form-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    color: #374151 !important;
  }

  /* 9. Pay card section: proper mobile spacing */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-pay-card__head strong {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-pay-card__eyebrow {
    font-size: 11px !important;
  }

  /* 10. Query band and activation sections: tighter on phone */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page ~ .enterprise-item-query-band,
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-query-band {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page ~ .activation-entry--afterpay,
  body.aixiamo-body.store-single-catalog .enterprise-item-container .activation-entry--afterpay {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  /* 11. Captcha: full width on mobile */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-form .input-group:has(.captcha-input) {
    width: 100% !important;
    max-width: none !important;
  }

  /* 12. Optional card (draft selection): touch-friendly */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .optional-card {
    min-height: 44px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* 13. Title: proper sizing on phone */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 6px 0 4px !important;
    word-break: break-word !important;
  }

  /* 14. Back button: touch-friendly */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-back {
    min-height: 32px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* 15. Description panel: mobile padding */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-summary .panel-body {
    padding: 10px 14px !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-summary .panel-header {
    padding: 10px 14px !important;
  }

  /* 16. Post-order reward note: compact */
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .post-order-reward-note {
    font-size: 11px !important;
    padding: 8px 10px !important;
    line-height: 1.5 !important;
    border-radius: 10px !important;
  }
}

/* ─── EXTRA-SMALL PHONES (≤360px) ─── */
@media (max-width: 360px) {
  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-media-col {
    max-height: 180px !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-title {
    font-size: 16px !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .sku-list .sku {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .pay-list {
    grid-template-columns: 1fr !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-buy-brief {
    display: none !important;
  }

  body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-price-row .price {
    font-size: 24px !important;
  }
}

/* ──── 商品详情封面可见性回归修复（2026-09-18） ────
   final-experience-fix.css 的旧规则会在手机上隐藏有效封面，导致商品图区域整块消失。
   该文件在 Header 中最后加载，因此在这里恢复有效图片，并保留 onerror 回退海报。 */
@media (max-width: 767.98px) {
  html body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-media-col {
    display: flex !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
  }

  html body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-media-card {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    padding: 10px !important;
  }

  html body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-cover {
    display: block !important;
    position: absolute !important;
    inset: 10px !important;
    width: calc(100% - 20px) !important;
    height: calc(100% - 20px) !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  html body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-media-note,
  html body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-visual-fallback__footer {
    display: none !important;
  }

  html body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-media-card.is-media-fallback .enterprise-item-cover {
    display: none !important;
  }

  html body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-media-card.is-media-fallback .enterprise-item-visual-fallback {
    display: flex !important;
    height: 100% !important;
    min-height: 88px !important;
  }

  html body.aixiamo-body.store-single-catalog main.enterprise-item-page .enterprise-item-media-card.is-media-fallback .enterprise-item-visual-fallback__poster {
    min-height: 88px !important;
    height: 100% !important;
  }
}