/*
 * 移动端优化样�?- 基于Base UI设计原则
 * 版本: 1.0.0
 * 描述: 专门针对移动端的样式优化，提升用户体�?
 * 参�? https://base-ui.com/react/components/number-field
 */

/* 移动端投票按钮位置修�?- 最高优先级强制修复 */
@media (max-width: 1023px) {
  /* 投票按钮容器修复 - 更强力的修复 */
  body .flex.flex-col.items-center.justify-center.self-start.pt-1,
  body .flex-shrink-0.ml-2.md\:ml-3.flex.flex-col.items-center.justify-center.self-start.pt-1,
  body .flex-shrink-0.ml-2.flex.flex-col.items-center.justify-center.self-start.pt-1,
  body .flex.flex-col.items-center.justify-center.self-start,
  body .flex-shrink-0.ml-2.flex.flex-col.items-center.justify-center.self-start {
    transform: translateY(0) !important; /* 强制容器位置固定 */
    position: relative !important; /* 强制定位稳定 */
    top: 0 !important; /* 强制垂直位置固定 */
    padding-top: 0 !important; /* 移除上边�?*/
    margin-top: 0 !important; /* 强制上边距为0 */
    transition: none !important; /* 完全禁用过渡效果 */
    align-self: flex-start !important; /* 强制对齐方式 */
    justify-self: flex-start !important; /* 强制对齐方式 */
  }

  /* 投票按钮本身修复 - 更强�?*/
  body .blocksy-child-theme .product-card .vote-btn,
  body .woocommerce ul.products li.product .product-card .vote-btn,
  body .woocommerce-page ul.products li.product .product-card .vote-btn,
  body .vote-btn,
  body .w-8.h-8.bg-\[#39896c\].hover\:bg-\[#2d6b56\].rounded-full.flex.items-center.justify-center.text-white.transition-colors.duration-200.mb-1.flex-shrink-0 {
    transform: translateY(0) !important; /* 强制静止状态位置固�?*/
    position: relative !important; /* 强制定位稳定 */
    top: 0 !important; /* 强制垂直位置固定 */
    left: 0 !important; /* 强制水平位置固定 */
    margin-top: 0 !important; /* 强制上边距为0 */
    margin-bottom: 0 !important; /* 强制下边距为0 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important; /* 禁用transform过渡，只允许背景色和阴影过渡 */
  }

  /* 投票按钮的父容器修复 - 更强�?*/
  body .flex-shrink-0,
  body .ml-2,
  body .md\:ml-3,
  body .flex,
  body .flex-col,
  body .items-center,
  body .justify-center,
  body .self-start,
  body .pt-1,
  body .min-w-\[3rem\],
  body .lg\:items-end,
  body .lg\:justify-end {
    transform: translateY(0) !important; /* 强制位置固定 */
    position: relative !important; /* 强制定位稳定 */
    top: 0 !important; /* 强制垂直位置固定 */
    padding-top: 0 !important; /* 移除上边�?*/
    margin-top: 0 !important; /* 强制上边距为0 */
    transition: none !important; /* 完全禁用过渡效果 */
  }

  /* 投票按钮内部图标修复 - 防止上滑 */
  body .vote-btn i,
  body .vote-btn .fas,
  body .vote-btn .fa-arrow-up,
  body .vote-btn .text-sm,
  body .product-card .vote-btn i,
  body .product-card .vote-btn .fas,
  body .product-card .vote-btn .fa-arrow-up,
  body .product-card .vote-btn .text-sm {
    transform: translateY(0) !important; /* 强制图标位置固定 */
    position: relative !important; /* 强制定位稳定 */
    top: 0 !important; /* 强制垂直位置固定 */
    left: 0 !important; /* 强制水平位置固定 */
    margin-top: 0 !important; /* 强制上边距为0 */
    margin-bottom: 0 !important; /* 强制下边距为0 */
    transition: color 0.3s ease, font-size 0.3s ease !important; /* 只允许颜色和字体大小过渡，禁用transform过渡 */
  }

  /* 移动端强制禁用悬停效�?- 最高优先级 */
  body .blocksy-child-theme .product-card .vote-btn:hover,
  body .woocommerce ul.products li.product .product-card .vote-btn:hover,
  body .woocommerce-page ul.products li.product .product-card .vote-btn:hover,
  body .vote-btn:hover {
    transform: translateY(0) !important; /* 强制禁用悬停变换，保持静止位�?*/
    position: relative !important; /* 强制定位稳定 */
    top: 0 !important; /* 强制垂直位置固定 */
    left: 0 !important; /* 强制水平位置固定 */
    margin-top: 0 !important; /* 强制上边距为0 */
    margin-bottom: 0 !important; /* 强制下边距为0 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important; /* 禁用transform过渡，只允许背景色和阴影过渡 */
  }
}

/* ===== 移动端基础变量 ===== */
:root {
  /* 移动端专用颜�?*/
  --mobile-primary: #3b82f6;
  --mobile-primary-hover: #2563eb;
  --mobile-bg: #ffffff;
  --mobile-surface: #f8fafc;
  --mobile-border: #e2e8f0;
  --mobile-text: #1e293b;
  --mobile-text-secondary: #64748b;
  
  /* 移动端间�?*/
  --mobile-padding: 1rem;
  --mobile-gap: 0.75rem;
  --mobile-radius: 12px;
  
  /* 移动端触摸区�?*/
  --mobile-touch-target: 44px;
  --mobile-button-height: 48px;
  
  /* 移动端字�?*/
  --mobile-font-size-sm: 0.875rem;
  --mobile-font-size-base: 1rem;
  --mobile-font-size-lg: 1.125rem;
  --mobile-font-size-xl: 1.25rem;
  --mobile-font-size-2xl: 1.5rem;
}

/* ===== 移动端布局优化 ===== */
@media (max-width: 767px) {
  /* 移动端容器优�?*/
  .blocksy-child-theme .container {
    max-width: 100% !important;
    padding-left: var(--mobile-padding) !important;
    padding-right: var(--mobile-padding) !important;
    margin: 0 !important;
  }

  /* 移动端网格布局 - 单列垂直布局 */
  .blocksy-child-theme .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mobile-gap) !important;
    width: 100% !important;
  }

  /* 移动端列布局优化 */
  .blocksy-child-theme .lg\\:col-span-8,
  .blocksy-child-theme .lg\\:col-span-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* 移动端视口控�?*/
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  main {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 移动端图片优�?*/
  .blocksy-child-theme img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: var(--mobile-radius) !important;
  }

  /* 移动端产品信息区�?*/
  .blocksy-child-theme .lg\\:col-span-2 {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 移动端订购区�?- 固定底部设计 */
  .blocksy-child-theme .sticky-sidebar {
    position: static !important;
    margin-top: var(--mobile-gap) !important;
    background: var(--mobile-bg) !important;
    border-radius: var(--mobile-radius) !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
    padding: var(--mobile-padding) !important;
  }

  /* 移动端主图区域优�?*/
  .blocksy-child-theme .blocksy-child-isolated__mobile-image-container {
    margin: 0 calc(-1 * var(--mobile-padding)) !important;
    border-radius: 0 !important;
  }

  /* 移动端产品标题优�?*/
  .blocksy-child-theme h1 {
    font-size: var(--mobile-font-size-2xl) !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
    font-weight: 700 !important;
    color: var(--mobile-text) !important;
  }

  /* AI-EDIT v6.111.5 �?移动端站点图标尺寸限制（页眉与底部栏�?*/
  /* 页眉�?logo：限制高�?宽度，防止过�?*/
  .custom-header .logo-image,
  .custom-header img[alt],
  .custom-header img {
    max-height: 28px !important;
    height: 28px !important;
    width: auto !important;
  }

  /* 移动端底部按钮栏内的站点图标：进一步收�?*/
  .mobile-bottom-bar .logo-image,
  .mobile-bottom-bar img[alt],
  .mobile-bottom-bar img {
    max-height: 24px !important;
    height: 24px !important;
    width: auto !important;
  }

  /* 移动端价格样式优�?*/
  .blocksy-child-theme .price {
    font-size: var(--mobile-font-size-xl) !important;
    font-weight: 600 !important;
    color: #059669 !important;
    margin-bottom: 1rem !important;
  }

  /* 移动端描述文本优�?*/
  .blocksy-child-theme .woocommerce-product-details__short-description {
    font-size: var(--mobile-font-size-sm) !important;
    line-height: 1.6 !important;
    color: var(--mobile-text-secondary) !important;
    margin-bottom: 1rem !important;
  }

  /* AI-EDIT v6.111.4 �?移动端隐藏商品描述内图片（提高可读性，避免重复展示�?*/
  .woocommerce.single-product.blocksy-child-theme .woocommerce-product-details__short-description img,
  .woocommerce.single-product.blocksy-child-theme .woocommerce-Tabs-panel--description img,
  .woocommerce.single-product.blocksy-child-theme #tab-description img {
    display: none !important; /* 移动端不显示描述内图�?*/
  }
}

/* ===== 移动端数量选择器优�?- 基于Base UI ===== */
@media (max-width: 767px) {
  .baseui-number-field {
    width: 100% !important;
    max-width: 200px !important;
    height: var(--mobile-button-height) !important;
    border-radius: var(--mobile-radius) !important;
    border: 2px solid var(--mobile-border) !important;
    background: var(--mobile-bg) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }

  .baseui-number-field:focus-within {
    border-color: var(--mobile-primary) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  }

  .baseui-number-field .baseui-decrement-button,
  .baseui-number-field .baseui-increment-button {
    width: var(--mobile-touch-target) !important;
    height: 100% !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    background: var(--mobile-surface) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    outline: none !important;
  }

  .baseui-number-field .baseui-decrement-button:hover,
  .baseui-number-field .baseui-increment-button:hover {
    background: #e2e8f0 !important;
  }

  .baseui-number-field .baseui-decrement-button:active,
  .baseui-number-field .baseui-increment-button:active {
    background: #cbd5e1 !important;
  }

  .baseui-number-field .baseui-decrement-button:disabled,
  .baseui-number-field .baseui-increment-button:disabled {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
  }

  .baseui-number-field .baseui-input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-size: var(--mobile-font-size-lg) !important;
    font-weight: 500 !important;
    color: var(--mobile-text) !important;
    outline: none !important;
    padding: 0 0.5rem !important;
    height: 100% !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
  }

  .baseui-number-field .baseui-input::-webkit-outer-spin-button,
  .baseui-number-field .baseui-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }
}

/* ===== 移动端按钮优�?===== */
@media (max-width: 767px) {
  .blocksy-child-theme button {
    min-height: var(--mobile-button-height) !important;
    padding: 0.75rem 1.5rem !important;
    font-size: var(--mobile-font-size-base) !important;
    font-weight: 600 !important;
    border-radius: var(--mobile-radius) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    outline: none !important;
  }

  .blocksy-child-theme .single_add_to_cart_button {
    width: 100% !important;
    background: var(--mobile-primary) !important;
    color: white !important;
  }

  .blocksy-child-theme .single_add_to_cart_button:hover {
    background: var(--mobile-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3) !important;
  }

  .blocksy-child-theme .single_add_to_cart_button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3) !important;
  }
}

/* ===== 移动端表单优�?===== */
@media (max-width: 767px) {
  .blocksy-child-theme input,
  .blocksy-child-theme select,
  .blocksy-child-theme textarea {
    min-height: var(--mobile-touch-target) !important;
    padding: 0.75rem !important;
    font-size: var(--mobile-font-size-base) !important;
    border: 2px solid var(--mobile-border) !important;
    border-radius: var(--mobile-radius) !important;
    background: var(--mobile-bg) !important;
    transition: all 0.2s ease !important;
  }

  .blocksy-child-theme input:focus,
  .blocksy-child-theme select:focus,
  .blocksy-child-theme textarea:focus {
    border-color: var(--mobile-primary) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
  }
}

/* ===== 移动端卡片优�?===== */
@media (max-width: 767px) {
  .blocksy-child-theme .card,
  .blocksy-child-theme .product-card {
    border-radius: var(--mobile-radius) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;  /* 强制移除内边�?*/
    margin-bottom: var(--mobile-gap) !important;
    background: var(--mobile-bg) !important;
  }
}

/* 移动端商品卡样式已移至override.css统一管理 - 避免重复定义 */
/* 重复的移动端商品卡样式已删除，请查看override.css中的统一样式 */