/* ==========================================
   全局移动端基础样式
   提供统一的移动端优化规则，修复触摸体验
   ========================================== */

/* --- 基础触摸优化 --- */
* {
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* 防止 iOS 双击缩放 */
button, a, input, select, textarea, .lang-option, .dropdown-item, .nav-link {
    touch-action: manipulation;
}

/* 移除 iOS 输入框默认样式 */
input, textarea, select, button {
    -webkit-appearance: none;
    border-radius: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/* --- 移动端字体缩放 --- */
@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    body {
        font-size: 14px;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
}

/* --- 通用移动端容器 --- */
@media (max-width: 768px) {
    .container {
        width: 92%;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 480px) {
    .container {
        width: 94%;
    }
}

/* --- 移动端按钮优化（更大的触摸区域） --- */
@media (max-width: 768px) {
    .btn, button[type="submit"], .btn-auth, .auth-submit {
        min-height: 44px;
        padding: 12px 20px;
        font-size: 14px;
    }

    .btn i, button[type="submit"] i {
        margin-right: 6px;
    }

    .btn-outline {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .btn, button[type="submit"], .btn-auth {
        width: 100%;
        justify-content: center;
    }

    .btn-outline {
        margin-top: 10px;
    }
}

/* --- 移动端表单优化 --- */
@media (max-width: 768px) {
    input, textarea, select {
        font-size: 16px !important; /* 防止 iOS 缩放 */
        padding: 12px 15px;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-group label {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 480px) {
    input, textarea, select {
        padding: 10px 12px;
    }
}

/* --- 移动端表格优化 --- */
@media (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        margin-bottom: 12px;
        padding: 8px;
        background: white;
    }

    td {
        border: none;
        position: relative;
        padding: 8px 8px 8px 40%;
        text-align: right;
        border-bottom: 1px solid #f0f0f0;
    }

    td:last-child {
        border-bottom: none;
    }

    td:before {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 600;
        color: var(--primary-blue, #003366);
        font-size: 12px;
        white-space: nowrap;
    }
}

/* --- 移动端图片优化 --- */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

/* --- 移动端卡片间距 --- */
@media (max-width: 768px) {
    .grid > *,
    .products-grid > *,
    .collections-grid > *,
    .values-grid > *,
    .team-grid > *,
    .features-grid > * {
        margin-bottom: 0;
    }
}

/* --- 移动端滚动优化 --- */
@media (max-width: 768px) {
    .scrollable {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        scroll-behavior: smooth;
    }
}

/* --- 移动端隐藏/显示 --- */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .show-mobile {
        display: none !important;
    }
}

/* --- 移动端弹窗/模态框优化 --- */
@media (max-width: 768px) {
    .modal-content,
    .auth-container,
    .toast-container {
        width: 92%;
        max-width: 400px;
        margin: 0 auto;
    }

    .toast {
        min-width: auto;
        width: 90%;
        max-width: 350px;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }
}

/* --- 移动端 Hero 区域优化 --- */
@media (max-width: 768px) {
    .hero-slider {
        height: 60vh;
        min-height: 350px;
    }

    .hero, .page-header {
        height: auto;
        min-height: 250px;
        padding: 80px 0 40px;
    }

    .hero h1, .page-header h1 {
        font-size: 28px;
    }

    .hero p, .page-header p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .hero-slider {
        height: 50vh;
        min-height: 280px;
    }

    .hero h1, .page-header h1 {
        font-size: 24px;
    }

    .hero p, .page-header p {
        font-size: 13px;
    }
}

/* --- 移动端 Section 间距 --- */
@media (max-width: 768px) {
    .section, section {
        padding: 40px 0;
    }

    .section-header {
        margin-bottom: 30px;
    }

    .section-header h2 {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .section, section {
        padding: 30px 0;
    }

    .section-header h2 {
        font-size: 22px;
    }
}

/* 导航遮罩由 common.css 统一管理 */

/* --- 移动端双列布局转单列 --- */
@media (max-width: 768px) {
    .two-column,
    .product-detail,
    .product-container,
    .about-content,
    .story-content,
    .contact-container,
    .craft-content {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
}

/* --- 移动端网格自适应 --- */
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
}

/* --- 移动端 Header 补充（主要样式见 common.css）--- */

/* Footer 移动端布局由 common.css 统一管理 */

/* --- 移动端面包屑 --- */
@media (max-width: 768px) {
    .breadcrumb {
        padding: 15px 0 10px;
        font-size: 12px;
    }

    .breadcrumb li {
        font-size: 12px;
        margin: 0 5px;
    }
}

/* --- 移动端分页 --- */
@media (max-width: 768px) {
    .pagination {
        margin-top: 30px;
    }

    .pagination ul li a {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .pagination ul li a {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
}

/* --- 移动端产品卡片优化 --- */
@media (max-width: 768px) {
    .product-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .product-card:hover {
        transform: translateY(-4px);
    }

    .product-img {
        height: 220px;
    }

    .product-content {
        padding: 12px;
    }

    .product-content h3 {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .product-content .price {
        font-size: 15px;
    }

    /* 仅针对圆形图标按钮（首页/详情页），不影响产品列表页的条形按钮 */
    .product-card .product-img ~ .product-actions button,
    .product-gallery .product-actions button {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .product-img {
        height: 180px;
    }

    .product-content h3 {
        font-size: 13px;
    }

    .product-content .price {
        font-size: 14px;
    }

    .product-badge {
        font-size: 10px;
        padding: 3px 10px;
    }
}

/* --- 移动端 toast 消息 --- */
@media (max-width: 768px) {
    .toast {
        padding: 12px 20px;
        font-size: 13px;
        border-radius: 8px;
    }
}

/* --- 移动端搜索可下拉选择 --- */
@media (max-width: 768px) {
    .searchable-select .select-options {
        max-height: 200px;
    }

    .searchable-select .select-option {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* --- 移动端 Tab 优化 --- */
@media (max-width: 768px) {
    .tabs-header {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 0;
    }

    .tab-btn {
        white-space: nowrap;
        padding: 12px 18px;
        font-size: 13px;
        flex-shrink: 0;
    }
}

/* 导航关闭按钮由 common.css 统一管理 */

/* --- 移动端用户下拉菜单 --- */
@media (max-width: 768px) {
    .user-dropdown {
        right: -50px;
        min-width: 160px;
    }

    .user-dropdown .dropdown-item {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* --- 移动端 Profile Header --- */
@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
        padding: 25px 15px;
        gap: 15px;
    }

    .profile-avatar {
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }

    .profile-info {
        text-align: center;
    }

    .profile-info h2 {
        font-size: 20px;
    }

    .profile-info p {
        font-size: 13px;
    }

    .profile-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .profile-stat {
        text-align: center;
    }

    .profile-stat-value {
        font-size: 20px;
    }

    .profile-stat-label {
        font-size: 11px;
    }

    .profile-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .profile-tab {
        white-space: nowrap;
        padding: 12px 16px;
        font-size: 13px;
        flex-shrink: 0;
    }

    .tab-content {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .profile-header {
        padding: 20px 10px;
    }

    .profile-avatar {
        width: 60px;
        height: 60px;
    }

    .profile-info h2 {
        font-size: 18px;
    }

    .profile-tab {
        padding: 10px 12px;
        font-size: 12px;
    }

    .tab-content {
        padding: 10px;
    }
}

/* --- 移动端订单列表 --- */
@media (max-width: 768px) {
    .orders-container {
        padding: 12px;
    }

    .orders-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 15px;
    }

    .orders-header h2 {
        font-size: 18px;
    }

    .order-card {
        margin-bottom: 12px;
        border-radius: 10px;
    }

    .order-header {
        flex-direction: column;
        gap: 8px;
        padding: 12px 15px;
    }

    .order-header-left {
        flex-wrap: wrap;
        gap: 8px;
    }

    .order-info-item {
        min-width: 80px;
    }

    .order-info-label {
        font-size: 10px;
    }

    .order-info-value {
        font-size: 12px;
    }

    .order-status {
        padding: 3px 10px;
        font-size: 11px;
    }

    .order-body {
        padding: 12px 15px;
    }

    .order-product-item {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 0;
    }

    .order-product-img {
        width: 60px;
        height: 60px;
    }

    .order-product-name {
        font-size: 13px;
    }

    .order-product-price {
        font-size: 14px;
    }

    .order-footer {
        padding: 12px 15px;
        flex-direction: column;
        gap: 10px;
    }

    .order-total {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .order-card {
        margin-bottom: 10px;
    }

    .order-product-img {
        width: 50px;
        height: 50px;
    }

    .order-product-name {
        font-size: 12px;
    }

    .order-product-price {
        font-size: 13px;
    }

    .order-total {
        font-size: 15px;
    }
}

/* --- 移动端成功页面 --- */
@media (max-width: 768px) {
    .success-card {
        padding: 40px 20px;
    }

    .success-icon {
        font-size: 50px;
    }

    .success-title {
        font-size: 24px;
    }

    .success-message {
        font-size: 14px;
    }

    .order-details {
        padding: 15px;
    }

    .detail-row {
        flex-direction: column;
        padding: 10px 0;
        gap: 4px;
    }

    .detail-label {
        font-size: 12px;
    }

    .detail-value {
        font-size: 14px;
    }

    .success-actions {
        flex-direction: column;
        gap: 10px;
    }

    .success-actions .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .success-card {
        padding: 30px 15px;
    }

    .success-icon {
        font-size: 40px;
    }

    .success-title {
        font-size: 22px;
    }
}

/* --- 移动端购物车 --- */
@media (max-width: 768px) {
    .cart-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cart-summary {
        position: static;
        order: -1;
    }

    .cart-item {
        padding: 12px;
        gap: 10px;
    }

    .cart-item-image img {
        width: 60px;
        height: 60px;
    }

    .cart-item-name {
        font-size: 13px;
    }

    .cart-item-price {
        font-size: 14px;
    }

    .cart-item-total {
        font-size: 15px;
    }

    .quantity-control button {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .quantity-control span {
        min-width: 28px;
        font-size: 14px;
    }

    .remove-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .cart-item {
        padding: 10px;
    }

    .cart-item-image img {
        width: 50px;
        height: 50px;
    }

    .cart-item-name {
        font-size: 12px;
    }

    .cart-item-total {
        font-size: 14px;
    }

    .quantity-control button {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .quantity-control span {
        min-width: 24px;
        font-size: 13px;
    }
}

/* --- 移动端结账页面 --- */
@media (max-width: 768px) {
    .checkout-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .checkout-form {
        padding: 15px;
    }

    .order-summary {
        position: static;
        order: -1;
    }

    .form-section {
        padding: 15px;
        margin-bottom: 15px;
    }

    .form-section-title {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-control {
        padding: 10px 12px;
        font-size: 16px;
    }

    .order-item {
        padding: 10px 0;
    }

    .order-item-image {
        width: 60px;
        height: 60px;
    }

    .order-item-name {
        font-size: 13px;
    }

    .order-item-price {
        font-size: 14px;
    }

    .summary-row {
        font-size: 14px;
        padding: 8px 0;
    }

    .summary-total {
        font-size: 18px;
    }

    .btn-place-order, .btn-submit {
        width: 100%;
        padding: 14px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .checkout-form {
        padding: 12px;
    }

    .form-section {
        padding: 12px;
        margin-bottom: 12px;
    }

    .form-section-title {
        font-size: 15px;
    }

    .order-item-image {
        width: 50px;
        height: 50px;
    }

    .summary-total {
        font-size: 16px;
    }
}

/* --- 移动端空状态 --- */
@media (max-width: 768px) {
    .empty-state {
        padding: 40px 20px;
    }

    .empty-state i {
        font-size: 48px;
    }

    .empty-state h3 {
        font-size: 18px;
    }

    .empty-state p {
        font-size: 13px;
    }

    .login-required {
        padding: 30px 20px;
    }

    .login-required i {
        font-size: 40px;
    }

    .login-required h3 {
        font-size: 18px;
    }

    .login-required p {
        font-size: 13px;
    }
}

/* --- 移动端 Toast 消息 --- */
@media (max-width: 768px) {
    .toast {
        padding: 12px 20px;
        font-size: 13px;
        border-radius: 8px;
        max-width: 90%;
    }
}