/*
 * Vine Studio Mobile UI V2
 * 保持桌面 UI，重新整理手机端品牌、导航、按钮和内容布局。
 */

:root {
    --vine-mobile-page-x: 16px;
    --vine-mobile-gap: 12px;
    --vine-mobile-card-radius: 22px;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

img,
video {
    height: auto;
}

/* 页面主容器不允许超出屏幕 */
main,
#main,
#content,
.main-content,
.page-content,
.content-wrapper,
.container {
    max-width: 100%;
}

/* 手机端输入框防止 iOS 自动放大 */
input,
select,
textarea,
button {
    font: inherit;
}

@media (max-width: 820px) {
    /*
     * 页头采用两层：
     * 第一层品牌和登录/注册按钮；
     * 第二层导航菜单。
     */
    header,
    nav,
    .navbar,
    .site-header,
    .topbar {
        width: 100% !important;
        min-height: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 12px !important;
        row-gap: 10px !important;
        padding:
            calc(12px + env(safe-area-inset-top))
            var(--vine-mobile-page-x)
            12px !important;
    }

    /* 品牌名称保持一行，避免 Vine Studio商城被拆成三行 */
    .logo,
    .brand,
    .site-brand,
    .navbar-brand,
    .site-title,
    header > h1,
    nav > h1 {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: clamp(1.4rem, 6.4vw, 2rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -.035em !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-bottom: 0 !important;
    }

    /*
     * 登录、注册、账户按钮位于品牌右侧。
     * 选择器兼容常见模板命名。
     */
    .auth-actions,
    .header-actions,
    .nav-actions,
    .user-actions,
    header > .actions,
    nav > .actions {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: auto !important;
        margin: 0 !important;
    }

    /*
     * 导航占据完整第二行，横向滚动而不是挤压换行。
     */
    .nav-links,
    .navbar-nav,
    .nav-menu,
    .menu,
    header ul,
    nav ul {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 2px 0 3px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        list-style: none !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
    }

    .nav-links::-webkit-scrollbar,
    .navbar-nav::-webkit-scrollbar,
    .nav-menu::-webkit-scrollbar,
    .menu::-webkit-scrollbar,
    header ul::-webkit-scrollbar,
    nav ul::-webkit-scrollbar {
        display: none;
    }

    .nav-links > *,
    .navbar-nav > *,
    .nav-menu > *,
    .menu > *,
    header ul > *,
    nav ul > * {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .nav-links a,
    .navbar-nav a,
    .nav-menu a,
    .menu a,
    header ul a,
    nav ul a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        border-radius: 11px !important;
        white-space: nowrap !important;
        font-size: .94rem !important;
        line-height: 1 !important;
    }

    /* 导航下划线不要撑开页面 */
    .nav-links a::after,
    .navbar-nav a::after,
    .nav-menu a::after,
    .menu a::after,
    header ul a::after,
    nav ul a::after {
        bottom: 2px !important;
    }

    header button,
    header .btn,
    nav button,
    nav .btn,
    .auth-actions a,
    .header-actions a,
    .nav-actions a,
    .user-actions a {
        width: auto !important;
        min-width: 0 !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 9px 14px !important;
        border-radius: 13px !important;
        white-space: nowrap !important;
        font-size: .92rem !important;
        line-height: 1.1 !important;
    }

    /* 主内容统一屏幕边距 */
    main,
    #main,
    #content,
    .main-content,
    .page-content,
    .content-wrapper {
        width: 100% !important;
        padding-left: var(--vine-mobile-page-x) !important;
        padding-right: var(--vine-mobile-page-x) !important;
    }

    /* 首页大卡片 */
    .hero,
    .hero-section,
    .hero-card,
    .banner,
    .landing-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        margin: 24px auto 20px !important;
        padding: 34px 24px !important;
        border-radius: 26px !important;
    }

    .hero h1,
    .hero-title,
    .hero-card h1,
    .landing-card h1 {
        max-width: 100% !important;
        margin-top: 8px !important;
        font-size: clamp(2rem, 9.5vw, 3.4rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -.045em !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .hero p,
    .hero-description,
    .hero-card p,
    .landing-card p {
        max-width: 100% !important;
        font-size: clamp(1rem, 4.25vw, 1.18rem) !important;
        line-height: 1.68 !important;
    }

    /* 内容区按钮 */
    .hero .btn,
    .hero button,
    .hero-card .btn,
    .landing-card .btn,
    .primary-button {
        width: auto !important;
        max-width: 100% !important;
        min-height: 48px !important;
        padding: 12px 20px !important;
        border-radius: 15px !important;
    }

    /* 卡片和网格 */
    .grid,
    .cards,
    .card-grid,
    .product-grid,
    .goods-grid,
    .article-grid,
    .order-grid,
    .dashboard-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .card,
    .panel,
    .box,
    .widget,
    .product-card,
    .goods-card,
    .article-card,
    .order-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px !important;
        border-radius: var(--vine-mobile-card-radius) !important;
    }

    /* 图片保持比例 */
    .card img,
    .product-card img,
    .goods-card img,
    .article-card img {
        width: 100% !important;
        max-height: 280px;
        object-fit: cover;
        border-radius: 15px;
    }

    /* 标题自适应 */
    main h1 {
        font-size: clamp(1.9rem, 9vw, 2.8rem) !important;
        line-height: 1.12 !important;
    }

    main h2 {
        font-size: clamp(1.5rem, 7vw, 2.05rem) !important;
        line-height: 1.18 !important;
    }

    main h3 {
        font-size: clamp(1.18rem, 5.4vw, 1.5rem) !important;
    }

    /* 表单 */
    form {
        width: 100% !important;
        max-width: 100% !important;
    }

    input,
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 46px;
        font-size: 16px !important;
    }

    /* 表格允许横向滑动 */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* 避免动画 transform 导致手机横向溢出 */
    .vine-motion-left,
    .vine-motion-right {
        transform: translateY(12px) !important;
    }

    .vine-motion-left.vine-visible,
    .vine-motion-right.vine-visible {
        transform: translateY(0) !important;
    }
}

@media (max-width: 480px) {
    :root {
        --vine-mobile-page-x: 13px;
    }

    header,
    nav,
    .navbar,
    .site-header,
    .topbar {
        column-gap: 8px !important;
        row-gap: 8px !important;
    }

    .logo,
    .brand,
    .site-brand,
    .navbar-brand,
    .site-title,
    header > h1,
    nav > h1 {
        font-size: clamp(1.28rem, 6vw, 1.65rem) !important;
    }

    header button,
    header .btn,
    nav button,
    nav .btn,
    .auth-actions a,
    .header-actions a,
    .nav-actions a,
    .user-actions a {
        min-height: 40px !important;
        padding: 8px 11px !important;
        font-size: .86rem !important;
    }

    .nav-links a,
    .navbar-nav a,
    .nav-menu a,
    .menu a,
    header ul a,
    nav ul a {
        min-height: 38px !important;
        padding: 7px 10px !important;
        font-size: .88rem !important;
    }

    .hero,
    .hero-section,
    .hero-card,
    .banner,
    .landing-card {
        margin-top: 17px !important;
        padding: 28px 19px !important;
        border-radius: 22px !important;
    }

    .hero h1,
    .hero-title,
    .hero-card h1,
    .landing-card h1 {
        font-size: clamp(1.85rem, 10vw, 2.75rem) !important;
    }

    .card,
    .panel,
    .box,
    .widget,
    .product-card,
    .goods-card,
    .article-card,
    .order-card {
        padding: 17px !important;
        border-radius: 19px !important;
    }
}

@media (max-width: 350px) {
    .logo,
    .brand,
    .site-brand,
    .navbar-brand,
    .site-title {
        font-size: 1.18rem !important;
    }

    .nav-links a,
    .navbar-nav a,
    .nav-menu a,
    .menu a {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: .82rem !important;
    }
}

/* 横屏手机 */
@media (max-height: 520px) and (orientation: landscape) {
    header,
    nav,
    .navbar,
    .site-header,
    .topbar {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .hero,
    .hero-section,
    .hero-card,
    .banner,
    .landing-card {
        margin-top: 12px !important;
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }
}

/* iPhone 安全区域 */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}