/* ========================================================================== */

/* AI搜索组件样式文件 */

/* 生成时间: 2025-12-02 */

/* ========================================================================== */

/* CSS根变量定义 - 全局主题变量集合 */

/* 方便查看颜色变量,具体在Shoplazza主题颜色变量中 */

/* :root {
  // === 布局相关变量 ===
  --page-width-base: 1440px; // 页面基础宽度
  --page-width: var(--page-width-base); // 页面实际宽度（引用基础宽度）
  --page-spacing: 16px; // 页面间距设置
  // === 字体大小变量 ===
  --type-text-font-size: 14px; // 正文文本字体大小
  --type-heading-font-size: 30px; // 标题字体大小
  --type-nav-font-size: 16px; // 导航字体大小
  // === 通用颜色变量 ===
  --color-general-bg: rgba(235, 57, 27, 1); // 通用背景颜色（橙红色）
  --color-general-heading-text: #202020; // 通用标题文本颜色（深灰色）
  --color-product-title-text: #202020; // 产品标题文本颜色（深灰色）
  --color-general-text: #202020; // 通用文本颜色（深灰色）
  // === 价格相关颜色 ===
  --color-price-text: rgba(235, 27, 211, 1); // 价格文本颜色（紫红色）
  --color-compare-at-price-text: rgba(32,32,32,.6); // 对比价格文本颜色（半透明深灰色）
  --color-save-price-text: #EB391B; // 节省价格文本颜色（橙红色）
  // === 标签相关颜色 ===
  --color-custom-label-text: #E75D32; // 自定义标签文本颜色（橙红色）
  --color-custom-label-bg: #FFF9F1; // 自定义标签背景颜色（浅米色）
  --color-label-bg: rgba(198, 156, 109, 1); // 标签背景颜色（棕色）
  --color-sold-label-bg: #FFFFFF; // 已售罄标签背景颜色（白色）
  --color-sold-label-text: #202020; // 已售罄标签文本颜色（深灰色）
  --color-label-text: #FFFFFF; // 标签文本颜色（白色）
  // === 按钮相关颜色 ===
  --color-btn-bg: #202020; // 按钮背景颜色（深灰色）
  --color-btn-text: #FFFFFF; // 按钮文本颜色（白色）
  --color-quick-shop-btn-bg: #FFFFFF; // 快速购买按钮背景颜色（白色）
  --color-quick-shop-btn-icon: #000000; // 快速购买按钮图标颜色（黑色）
  --color-toggle-btn-bg: #FFFFFF; // 切换按钮背景颜色（白色）
  --color-toggle-btn-icon: #000000; // 切换按钮图标颜色（黑色）
  // === 通知栏颜色 ===
  --color-announcement-bg: #FFFFFF; // 通知栏背景颜色（白色）
  --color-announcement-text: #000000; // 通知栏文本颜色（黑色）
  // === 购物车相关颜色 ===
  --color-cart-dot-bg: rgba(198, 156, 109, 1); // 购物车指示器背景颜色（棕色）
  --color-cart-dot-text: #FFFFFF; // 购物车指示器文本颜色（白色）
  // === 页头相关颜色 ===
  --color-header-bg: #FFFFFF; // 页头背景颜色（白色）
  --color-header-text: #202020; // 页头文本颜色（深灰色）
  --color-header-search-bg: rgba(230, 230, 230, 0.4); // 页头搜索框背景颜色（半透明白色）
  --color-header-search-text: #202020; // 页头搜索框文本颜色（深灰色）
  --color-header-search-btn-bg: #202020; // 页头搜索按钮背景颜色（深灰色）
  --color-header-search-btn-text: #FFFFFF; // 页头搜索按钮文本颜色（白色）
  // === 菜单相关颜色 ===
  --color-menu-bg: #F8F8F8; // 菜单背景颜色（浅灰色）
  --color-menu-item-bg: #FFFFFF; // 菜单项背景颜色（白色）
  --color-menu-item-text: #202020; // 菜单项文本颜色（深灰色）
  --color-actived-menu-item-bg: rgba(198, 156, 109, 1); // 激活菜单项背景颜色（棕色）
  --color-actived-menu-item-text: #FFFFFF; // 激活菜单项文本颜色（白色）
  // === 页脚相关颜色 ===
  --color-footer-bg: rgba(40, 40, 40, 1); // 页脚背景颜色（深灰色）
  --color-footer-border: rgba(230, 230, 230, 0.1); // 页脚边框颜色（半透明白色）
  --color-footer-text: rgba(255, 255, 255, 1); // 页脚文本颜色（白色）
  // === 订阅相关颜色 ===
  --color-newsletter-border: #E6E6E6; // 订阅框边框颜色（浅灰色）
  --color-newsletter-bg: #FFFFFF; // 订阅框背景颜色（白色）
  --color-newsletter-text: #202020; // 订阅框文本颜色（深灰色）
  --color-newsletter-btn-bg: #202020; // 订阅按钮背景颜色（深灰色）
  --color-newsletter-btn-text: #FFFFFF; // 订阅按钮文本颜色（白色）
  // === 边框和覆盖层颜色 ===
  --color-border: #E6E6E6; // 边框颜色（浅灰色）
  --color-overlay-title: #292929; // 覆盖层标题颜色（深灰色）
  --color-overlay-text: #292929; // 覆盖层文本颜色（深灰色）
  // === 功能组件颜色 ===
  --color-countdown-bg: rgba(248, 248, 248, 0.8); // 倒计时背景颜色（半透明白色）
  --color-countdown-time-text: #EA3F36; // 倒计时时间文本颜色（红色）
  --color-background-shipping-success: #E5FFE2; // 配送成功背景颜色（浅绿色）
  --color-text-shipping-success: #3AAA2E; // 配送成功文本颜色（绿色）
  --color-cart-subtotal-bg: #F6F6F6; // 购物车小计背景颜色（浅灰色）
  // 颜色相关
  --color-body-bg: rgba(235, 57, 27, 1); // 主体背景颜色（橙红色）
  --color-body-bg-80: rgba(235, 57, 27, 0.8); // 主体背景颜色（80%透明度）
  --color-product-title-text: #202020; // 产品标题文本颜色（深灰色）
  --color-primary-btn-bg: #202020; // 主要按钮背景颜色（深灰色）
  --color-primary-btn-bg-10: rgba(32, 32, 32, 0.1); // 主要按钮背景颜色（10%透明度）
  --color-primary-btn-text: #FFFFFF; // 主要按钮文本颜色（白色）
  --color-quick-shop-btn-bg: #FFFFFF; // 快速购买按钮背景颜色（白色）
  --color-quick-shop-btn-icon: #000000; // 快速购买按钮图标颜色（黑色）
  --color-toggle-btn-bg: #FFFFFF; // 切换按钮背景颜色（白色）
  --color-toggle-btn-icon: #000000; // 切换按钮图标颜色（黑色）
  // === 文本颜色变体 ===
  --color-body-text: #202020; // 主体文本颜色（深灰色）
  --color-body-text-50: rgba(32, 32, 32, 0.5); // 主体文本颜色（50%透明度）
  --color-body-text-60: rgba(32, 32, 32, 0.6); // 主体文本颜色（60%透明度）
  --color-body-text-70: rgba(32, 32, 32, 0.7); // 主体文本颜色（70%透明度）
  --color-body-text-75: rgba(32, 32, 32, 0.75); // 主体文本颜色（75%透明度）
  --color-body-text-80: rgba(32, 32, 32, 0.8); // 主体文本颜色（80%透明度）
  --color-body-text-85: rgba(32, 32, 32, 0.85); // 主体文本颜色（85%透明度）
  --color-body-text-90: rgba(32, 32, 32, 0.9); // 主体文本颜色（90%透明度）
  // === 菜单项文本颜色变体 ===
  --color-menu-item-text-70: rgba(32, 32, 32, 0.7); // 菜单项文本颜色（70%透明度）
  --color-menu-item-text-80: rgba(32, 32, 32, 0.8); // 菜单项文本颜色（80%透明度）
  --color-menu-item-text-90: rgba(32, 32, 32, 0.9); // 菜单项文本颜色（90%透明度）
  // === 激活菜单项颜色 ===
  --color-actived-menu-item-bg: rgba(198, 156, 109, 1); // 激活菜单项背景颜色（棕色）
  --color-actived-menu-item-text: #FFFFFF; // 激活菜单项文本颜色（白色）
  // === 页头文本颜色变体 ===
  --color-header-search-text-50: rgba(32, 32, 32, 0.5); // 页头搜索文本颜色（50%透明度）
  --color-header-text-70: rgba(32, 32, 32, 0.7); // 页头文本颜色（70%透明度）
  // 边框颜色
  --color-border: #E6E6E6; // 边框颜色（浅灰色）
  --color-border-35: rgba(230, 230, 230, 0.35); // 边框颜色（35%透明度）
  --color-border-60: rgba(230, 230, 230, 0.6); // 边框颜色（60%透明度）
  // 蒙层标题颜色
  --color-overlay-title: #202020; // 覆盖层标题颜色（深灰色）
  // 蒙层文字颜色
  --color-overlay-text: #202020; // 覆盖层文本颜色（深灰色）
  // 圆角
  --global-large-border-radius: 12px; // 全局大圆角
  --global-border-radius: 8px; // 全局标准圆角
  --global-small-border-radius: 4px; // 全局小圆角
  --global-fixed-border-radius: 8px; // 全局固定圆角
  --btn-border-radius: 8px; // 按钮圆角
  --btn-fixed-border-radius: 8px; // 按钮固定圆角
  // 字体相关
  --font-body-family: Lato, sans-serif; // 正文字体族
  --font-body-style: normal; // 正文字体样式
  --font-body-weight: 400; // 正文字体粗细
  --font-heading-family: Lato, sans-serif; // 标题字体族
  --font-heading-style: normal; // 标题字体样式
  --font-heading-weight: 400; // 标题字体粗细
  // 倒计时
  --color-countdown-bg: rgba(248, 248, 248, 0.8); // 倒计时背景颜色（半透明白色）
  --color-countdown-time-text: #EA3F36; // 倒计时时间文本颜色（红色）
  --color-background-shipping-success: #E5FFE2; // 配送成功背景颜色（浅绿色）
  --color-text-shipping-success: #3AAA2E; // 配送成功文本颜色（绿色）
  --color-cart-subtotal-bg: #F6F6F6; // 购物车小计背景颜色（浅灰色）
  // mask
  --color-mask-bg: rgba(0, 0, 0, 0.3); // 遮罩背景颜色（半透明黑色）
  // 提供给插件
  --breakpoint: 960; // 响应式断点（像素）
  // z-index
  --z-index-dropdown: 1000; // 下拉菜单层级
  --z-index-sticky: 1020; // 粘性定位元素层级
  --z-index-fixed: 1030; // 固定定位元素层级
  --z-index-modal-backdrop: 1040; // 模态框背景层级
  --z-index-modal: 1050; // 模态框层级
  --z-index-popover: 1060; // 弹出框层级
  --z-index-tooltip: 1070; // 工具提示层级
} */

/* ========================================================================== */

/* 自定义CSS变量 */

/* ========================================================================== */

:root {
    /* 模块间距 - 默认16px */
    --module-spacing: 16px;
}

/* 平板设备 - 间距调整为12px */

@media (max-width: 768px) {
    :root {
        --module-spacing: 12px;
    }
}

/* 手机设备 - 间距调整为6px */

@media (max-width: 480px) {
    :root {
        --module-spacing: 6px;
    }
}

/* 指针样式 */

.ai-search-wrapper .pointer{
    cursor: pointer;
}

.ai-search-wrapper i{
    font-style: normal;
}

/* ========================================================================== */

/* 页面布局与搜索表单样式 */

/* ========================================================================== */

.ai-search-wrapper {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    background: #F8FAFC !important;
}

.ai-search-entry {
    display: inline-flex;
    width: auto;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    background: transparent !important;
}

.ai-search-wrapper .ai-page-container {
    max-width: var(--ai-search-page-width, 1664px);
    padding: 0 var(--page-spacing, 32px);
    margin: 0 auto;
    box-sizing: border-box;
    background: #F8FAFC;
}

.ai-search-wrapper .ai-search-results-container {
    padding-top: var(--module-spacing, 28px);
    background: #F8FAFC;
}

.ai-search-wrapper .search-results-bar {
    max-width: var(--ai-search-page-width, 1664px);
    margin: 0 auto 20px;
}

/* Flex容器样式 */

.ai-search-wrapper .flex-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* 搜索表单 */

.ai-search-wrapper .ai-search-form {
    flex: 1;
    text-align: left;
    max-width: 100%;
}

/* 搜索输入框容器 */

.ai-search-wrapper .search-input-wrapper {
    display: flex;
    background: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
    border-radius: 9999px;
    border: 1px solid #EAECF0;
    width: 100%;
    max-width: 720px;
    height: 56px;
    padding-left: 24px;
    padding-right: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.ai-search-wrapper .search-input-wrapper:focus-within {
    border-color: #101828;
    box-shadow: 0 0 0 4px rgba(16, 24, 40, 0.1);
}

/* 搜索输入框 */

.ai-search-wrapper .ai-search-input {
    flex: 1;
    padding: 0;
    border: none;
    outline: none;
    font-size: 14px;
    line-height: 1.5;
    color: #101828;
    background: transparent;
    font-weight: 600;
}

.ai-search-wrapper .ai-search-input::placeholder {
    color: #667085;
    font-weight: 400;
}


/* 搜索按钮 */

.ai-search-wrapper .search-button {
    border: none;
    cursor: pointer;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    background: #101828;
    margin-right: 0;
    border-radius: 9999px;
    align-self: center;
    width: 44px;
    height: 44px;
}

.ai-search-entry .search-button {
    border: none;
    cursor: pointer;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    background: #101828;
    margin-right: 0;
    border-radius: 9999px;
    align-self: center;
    width: 44px;
    height: 44px;
}

.ai-search-wrapper .search-button:hover:not(:disabled) {
    background: var(--color-header-search-btn-bg);
}

.ai-search-wrapper .search-button:active:not(:disabled) {
    background: var(--color-header-search-btn-bg);
}

.ai-search-wrapper .search-button:disabled {
    background: #d9d9d9;
    cursor: not-allowed;
}

.ai-search-entry .search-button:disabled {
    background: #d9d9d9;
    cursor: not-allowed;
}

.ai-search-wrapper .search-icon {
    fill: currentColor;
}

.ai-search-entry .search-icon {
    fill: currentColor;
}

/* 搜索建议下拉样式 */

.ai-search-wrapper .search-input-wrapper {
    position: relative;
}

.ai-search-wrapper .ai-search-trigger-wrapper {
    width: auto !important;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
}

.ai-search-entry .ai-search-trigger-wrapper {
    display: flex;
    width: auto !important;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ai-search-wrapper .ai-search-trigger-wrapper .search-button {
    width: 44px;
    height: 44px;
}

.ai-search-entry .ai-search-trigger-wrapper .search-button {
    width: 44px;
    height: 44px;
}

.search-suggestions {
    position: fixed;
    top: 72px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(960px, calc(100vw - 32px));
    background: #fff;
    border: 1px solid #EAECF0;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 9999;
    max-height: 680px;
    overflow: hidden;
    display: none;
    margin-top: 0;
    flex-direction: column;
}

.search-suggestions.show {
    display: flex;
}

.search-suggestions .suggestion-search-wrapper {
    display: flex;
    background: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
    border-radius: 9999px;
    border: 1px solid #EAECF0;
    width: auto !important;
    max-width: none !important;
    margin: 16px 30px 12px;
    flex-shrink: 0;
    height: 56px;
    padding-left: 24px;
    padding-right: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.search-suggestions .suggestion-search-wrapper:focus-within {
    border-color: #101828;
    box-shadow: 0 0 0 4px rgba(16, 24, 40, 0.1);
}

.search-suggestions .suggestion-search-wrapper .ai-search-input {
    flex: 1;
    padding: 0;
    border: none;
    outline: none;
    font-size: 14px;
    line-height: 1.5;
    color: #101828;
    background: transparent;
    font-weight: 600;
    min-width: 0;
}

.search-suggestions .suggestion-search-wrapper .ai-search-input::placeholder {
    color: #667085;
    font-weight: 400;
}

.search-suggestions .suggestion-search-wrapper .search-button {
    border: none;
    cursor: pointer;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    background: #101828;
    margin-right: 0;
    border-radius: 9999px;
    align-self: center;
    width: 44px;
    height: 44px;
}

.search-suggestions .suggestion-search-wrapper .search-button:hover:not(:disabled) {
    background: var(--color-header-search-btn-bg);
}

.search-suggestions .suggestion-search-wrapper .search-button:active:not(:disabled) {
    background: var(--color-header-search-btn-bg);
}

.search-suggestions .suggestion-search-wrapper .search-button:disabled {
    background: #d9d9d9;
    cursor: not-allowed;
}

.search-suggestions .suggestion-search-wrapper .search-icon {
    fill: currentColor;
}

/* 移动端定位调整 - 1023px以下使用固定定位 */
@media (max-width: 1023px) {
    .ai-search-wrapper.ai-search-mobile-header {
        display: block;
        width: min(260px, 42vw);
        max-width: 42vw;
        min-width: 160px;
        margin: 0;
        flex: 0 1 auto;
        background: transparent !important;
    }
    .ai-search-wrapper.ai-search-mobile-header .ai-search-form {
        width: 100%;
    }
    .ai-search-wrapper.ai-search-mobile-header .search-input-wrapper {
        width: 100% !important;
        max-width: none !important;
        height: 48px;
        padding-left: 16px;
        padding-right: 6px;
    }
    .ai-search-wrapper.ai-search-mobile-header .ai-search-input {
        min-width: 0;
        font-size: 14px;
    }
    .ai-search-wrapper.ai-search-mobile-header .search-button {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }
    .ai-search-wrapper {
        width: auto;
        max-width: none;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        flex: 1;
    }
    .ai-search-wrapper .ai-search-form {
        width: 100%;
        min-width: 0;
    }
    .search-suggestions {
        position: fixed;
        top: 96px;
        left: 16px;
        right: 16px;
        bottom: auto;
        transform: none;
        width: auto;
        max-height: min(620px, calc(100vh - 180px - env(safe-area-inset-bottom)));
        height: min(620px, calc(100vh - 180px - env(safe-area-inset-bottom)));
        overflow: hidden;
        background: #fff;
        z-index: 9999;
        border: 1px solid #EAECF0;
        border-radius: 16px;
        box-shadow: 0 24px 80px rgba(16, 24, 40, 0.16);
    }
    /* 修复移动端搜索框显示问题 */
    .ai-search-wrapper .search-input-wrapper {
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        height: 48px;
        padding-left: 16px;
        padding-right: 8px;
    }
    .ai-search-wrapper .ai-search-trigger-wrapper {
        width: auto !important;
        max-width: none !important;
        min-width: 0;
        height: auto;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .ai-search-wrapper .ai-search-input {
        font-size: 16px;
    }
    .ai-search-wrapper .search-button {
        width: 40px;
        height: 40px;
    }
    .ai-search-entry[data-ai-search-mobile-entry] {
        margin-left: 8px;
        flex: 0 0 auto;
    }
    .ai-search-entry[data-ai-search-mobile-entry] .search-button {
        width: 40px;
        height: 40px;
    }
}

/* 新布局容器 */

.suggestion-dropdown-content {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 16px;
    padding: 0 16px 16px;
    max-height: min(600px, calc(100vh - 252px));
    overflow-y: auto;
    min-height: 0;
}

/* 左侧边栏 */

.search-suggestions .suggestion-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.search-suggestions .suggestion-block {
    border: 1px solid #EAECF0;
    border-radius: 12px;
    background: #fff;
    padding: 16px;
}

.search-suggestions .suggestion-block-title {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    color: #101828;
    margin: 0 0 12px 0;
}

.search-suggestions .suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-suggestions .suggestion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    background: #F8FAFC;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #101828;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-suggestions .suggestion-item:hover {
    background: #F2F4F7;
}

.search-suggestions .suggestion-item.active {
    background: #F2F4F7;
}

.search-suggestions .suggestion-arrow {
    flex-shrink: 0;
    color: #667085;
}

/* Collection chips */

.search-suggestions .collection-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-suggestions .collection-chip {
    border: 1px solid #EAECF0;
    border-radius: 9999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #475467;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.search-suggestions .collection-chip:hover {
    border-color: #101828;
    color: #101828;
}

/* Smart filter chips */

.search-suggestions .smart-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-suggestions .smart-filter-chip {
    background: rgba(16, 24, 40, 0.1);
    border-radius: 9999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #101828;
}

/* Featured cards */

.search-suggestions .featured-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.search-suggestions .featured-card {
    border: 1px solid #EAECF0;
    border-radius: 12px;
    background: #F8FAFC;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.search-suggestions .featured-card:hover {
    border-color: #101828;
    background: #fff;
}

.search-suggestions .featured-card-title {
    display: block;
    font-size: 14px;
    font-weight: 900;
    color: #101828;
}

.search-suggestions .featured-card-desc {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #475467;
}

/* Suggestion footer */

.search-suggestions .suggestion-footer {
    position: sticky;
    bottom: 0;
    border-top: 1px solid #EAECF0;
    background: #fff;
    padding: 16px;
    margin-top: 0;
    flex-shrink: 0;
}

.search-suggestions .view-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    background: #101828;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}

.search-suggestions .view-all-button:hover {
    background: #344054;
}

.search-suggestions .view-all-arrow {
    flex-shrink: 0;
}

/* 商品网格 */

.search-suggestions .suggestion-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.search-suggestions .suggestion-product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.search-suggestions .suggestion-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.12);
}

.search-suggestions .suggestion-product-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.search-suggestions .suggestion-product-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 10;
    padding-top: 0;
    background: #F8FAFC;
    border-radius: 8px;
    overflow: hidden;
}

.search-suggestions .suggestion-product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.search-suggestions .suggestion-product-card:hover .suggestion-product-image {
    transform: scale(1.05);
}

.search-suggestions .suggestion-product-badge {
    position: absolute;
    left: 8px;
    top: 8px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #101828;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
    backdrop-filter: blur(4px);
}

.search-suggestions .suggestion-product-info {
    padding: 8px 8px 0 8px;
}

.search-suggestions .suggestion-product-title {
    font-size: 14px;
    font-weight: 700;
    color: #101828;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggestions .suggestion-product-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.search-suggestions .suggestion-product-price-current {
    font-size: 14px;
    font-weight: 700;
    color: #101828;
}

.search-suggestions .suggestion-product-price-compare {
    font-size: 12px;
    color: #98A2B3;
    text-decoration: line-through;
}

.search-suggestions .suggestion-product-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 8px;
}

.search-suggestions .suggestion-product-reason {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
    color: #6B8F71;
    padding-bottom: 8px;
}

/* 右侧主内容 */

.search-suggestions .suggestion-main {
    border: 1px solid #EAECF0;
    border-radius: 12px;
    background: #fff;
    padding: 16px;
    min-width: 0;
}

.search-suggestions .suggestion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.search-suggestions .suggestion-header-title {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    color: #101828;
    margin: 0;
}

.search-suggestions .suggestion-header-subtitle {
    font-size: 18px;
    font-weight: 900;
    color: #101828;
    margin: 4px 0 0 0;
}

.search-suggestions .suggestion-status-badge {
    padding: 4px 12px;
    background: #F8FAFC;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    color: #475467;
}

.search-suggestions .suggestion-placeholder {
    background: #F8FAFC;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.search-suggestions .suggestion-placeholder-text {
    font-size: 14px;
    font-weight: 600;
    color: #101828;
    margin: 0;
}

.search-suggestions .suggestion-placeholder-desc {
    margin: 8px 0 0 0;
    font-size: 14px;
    color: #475467;
}

/* 移动端 suggestions 布局 - 对齐新UI：单列，推荐区在上，商品区在下 */
@media (max-width: 1023px) {
    .search-suggestions .suggestion-search-wrapper {
        width: calc(100% - 24px) !important;
        height: 48px;
        margin: 12px auto 8px;
        padding-left: 16px;
        padding-right: 8px;
    }
    .search-suggestions .suggestion-search-wrapper .ai-search-input {
        font-size: 16px;
        min-width: 0;
    }
    .search-suggestions .suggestion-search-wrapper .search-button {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    .suggestion-dropdown-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 12px;
        flex: 1 1 0;
        height: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        position: relative;
        z-index: 1;
        background: #fff;
    }
    .search-suggestions .suggestion-footer {
        position: static;
        flex-shrink: 0;
        padding: 12px;
        background: #fff;
        z-index: 1;
    }
    .search-suggestions .suggestion-sidebar {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .search-suggestions .suggestion-main {
        padding: 12px;
    }
    .search-suggestions .suggestion-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .search-suggestions .featured-cards {
        grid-template-columns: 1fr;
    }
}

/* 保留旧的样式以兼容 */

.ai-search-wrapper .search-suggestion-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 14px;
    color: #101828;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-search-wrapper .search-suggestion-item.active{
    background-color: #F2F4F7;
}

.ai-search-wrapper .search-suggestion-item:last-child {
    border-bottom: none;
}

.ai-search-wrapper .search-suggestion-item:hover {
    background-color: #F2F4F7;
}

.ai-search-wrapper .search-suggestion-item:active {
    background-color: #EAECF0;
}

/* 图标按钮容器 */

.ai-search-wrapper .icon-buttons-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 12px;
}

.ai-search-wrapper .icon-buttons-container .icon-button {
    position: relative;
    border: none;
    cursor: pointer;
    color: white;
    background: none;
}

.ai-search-wrapper .ai-search-search-container.sticky .icon-buttons-container .icon-button {
    display: flex;
}

.ai-search-wrapper .icon-buttons-container .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #FB2C36;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* ========================================================================== */

/* 搜索结果栏样式 */

/* ========================================================================== */

.ai-search-wrapper .search-results-bar {
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    background: #fff;
    margin-bottom: 20px;
    border: 1px solid #EAECF0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.ai-search-wrapper .search-results-title {
    font-size: 24px;
    font-weight: 900;
    color: #101828;
}

.ai-search-wrapper .search-results-title-line {
    width: 1px;
    height: 28px;
    background: #EAECF0;
    margin: 0;
    display: inline;
}

.ai-search-wrapper .search-results-count {
    font-size: 16px;
    font-weight: 600;
    color: #667085;
    display: inline-flex;
}

.ai-search-wrapper .search-results-count i {
    font-size: 24px;
    font-weight: 900;
    color: #101828;
    font-style: unset;
    margin-left: 3px;
    margin-right: 3px;
}

/* ========================================================================== */

/* 筛选和排序区域样式 */

/* ========================================================================== */

.ai-search-wrapper .filters-section {
    padding: 28px 32px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #EAECF0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.ai-search-wrapper .filters-section .filters-tabs button {
    display: flex;
    align-items: center;
}

.ai-search-wrapper .filters-section-small {
    display: none;
    justify-content: space-between;
    align-items: center;
}

.ai-search-wrapper .sales-sort-icon {
    display: inline-grid;
    width: 10px;
    line-height: 5px;
    margin-left: 5px;
    gap: 2px;
}

/* 筛选组样式 */

.ai-search-wrapper .filter-group {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 10px;
}

.ai-search-wrapper .filter-group h3 {
    font-size: 18px;
    color: #101828;
    margin: 0;
    line-height: normal;
    white-space: nowrap;
    width: 64px;
    flex-shrink: 0;
    font-weight: 700;
}

.ai-search-wrapper .category-tags-container .filter-group h3 {
    font-weight: 700;
}

.ai-search-wrapper .filter-group:not(.category-tags-container) h3 {
    font-weight: 500;
}

/* 筛选项选项样式 */

.ai-search-wrapper .filters-section .filters-tabs button,

.ai-search-wrapper .sort-option,

.ai-search-wrapper .filter-group-option {
    padding: 0 20px;
    border: 1px solid #D0D5DD;
    background-color: #fff;
    color: #667085;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    word-break: break-word;
    min-width: 50px;
    min-height: 40px;
    font-weight: 500;
}

.ai-search-wrapper .category-tags-container .filter-group-option {
    min-height: 48px;
    font-weight: 700;
}

.ai-search-wrapper .filters-section .filters-tabs button:hover,

.ai-search-wrapper .sort-option:hover,

.ai-search-wrapper .filter-group-option:hover {
    border-color: #101828;
    color: #101828;
}

.ai-search-wrapper .filters-section .filters-tabs button.active,

.ai-search-wrapper .sort-option.active,

.ai-search-wrapper .filter-group-option.active {
    background-color: #101828;
    color: #FFFFFF;
    border-color: #101828;
}

/* 分类标签容器 */

.ai-search-wrapper .category-tags-container {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #EAECF0;
}

/* 筛选项容器布局 */

.ai-search-wrapper .sort-container,

.ai-search-wrapper .sort-option,

.ai-search-wrapper .price-filter,

.ai-search-wrapper .filters-section .filters-tabs,

.ai-search-wrapper .filter-group-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    white-space: nowrap;
    align-items: center;
}

/* 排序和价格筛选容器 */
.ai-search-wrapper .sort-price-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid #EAECF0;
}

/* 当 search-facets-container 为空时，移除 margin-top 和 border-top */
#search-facets-container:empty + .sort-price-container {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.ai-search-wrapper .sort-container {
    flex: 1;
}

.ai-search-wrapper .price-filter {
    justify-content: right;
    white-space: nowrap;
}

/* 价格输入框样式 */

.ai-search-wrapper .price-input {
    padding: 8px 12px;
    border: 1px solid var(--color-border, #E6E6E6);
    border-radius: 4px;
    font-size: 14px;
    width: 100px;
    background-color: #FFFFFF;
}

.ai-search-wrapper .price-input:focus {
    outline: none;
    border-color: #0066cc;
}

.ai-search-wrapper .price-mix,

.ai-search-wrapper .price-max {
    padding: 0 16px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    font-size: 16px;
    width: 112px;
    background-color: #FFFFFF;
    height: 44px;
}

.ai-search-wrapper .price-mix:focus,

.ai-search-wrapper .price-max:focus {
    outline: none;
    border-color: #101828;
}

/* 价格筛选按钮 */

.ai-search-wrapper .price-filter-button {
    padding: 0 20px;
    background-color: #101828;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: background-color 0.2s ease;
    height: 44px;
}

.ai-search-wrapper .price-filter-button:hover {
    background-color: var(--color-btn-bg, #202020);
}

.ai-search-wrapper .filters-section-normal .price-filter h3 {
    margin: 0;
    color: #101828;
    font-size: 16px;
    font-weight: 500;
}

.ai-search-wrapper .filters-section-normal .price-filter-inputs {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* 排序和价格筛选容器 */

.ai-search-wrapper .sort-price-container label {
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.ai-search-wrapper .sort-price-container select {
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    outline: none;
}

.ai-search-wrapper .sort-price-container select:focus {
    border-color: #1890ff;
}

/* 侧边栏筛选容器 */

.ai-search-wrapper .sidebar-filters-container {
    height: 100vh;
    margin: 0;
    overflow: auto;
    background: #ffff;
}

.ai-search-wrapper .selected-filter-tags-container {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
    margin-bottom: 8px;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}

.ai-search-wrapper .selected-filter-tag {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-radius: 9999px;
    background: #101828;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
}

.ai-search-wrapper .selected-filter-tag svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.ai-search-wrapper .selected-filter-clear-all {
    appearance: none;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid #D0D5DD;
    background: transparent;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
}

.ai-search-wrapper .selected-filter-clear-all:hover {
    background: #fff;
    color: #101828;
    border-color: #101828;
}

@media (max-width: 1024px) {
    .ai-search-wrapper .sidebar-filters-container {
        height: auto;
        background: #F8FAFC;
        border-radius: 24px 24px 0 0;
        padding: 16px;
        max-height: 86vh;
        overflow-y: auto;
    }
    .ai-search-wrapper .sidebar-filters-container .filters-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 12px 0;
        background: transparent;
        border-bottom: none;
    }
    .ai-search-wrapper .sidebar-filters-container .filters-header span {
        font-size: 20px;
        font-weight: 700;
        color: #101828;
    }
    .ai-search-wrapper .sidebar-filters-container .filters-header svg {
        width: 40px;
        height: 40px;
        padding: 8px;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
    }
    .ai-search-wrapper .selected-filter-tags-container {
        display: none;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 0;
        margin-bottom: 8px;
        padding-top: 4px;
        padding-left: 0;
        padding-right: 0;
    }
    .ai-search-wrapper .selected-filter-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 9999px;
        background: #101828;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        margin-left: 16px;
    }
    .ai-search-wrapper .selected-filter-tag svg {
        width: 14px;
        height: 14px;
    }
    .ai-search-wrapper .selected-filter-clear-all {
        padding: 6px 12px;
        border-radius: 9999px;
        border: 1px solid #D0D5DD;
        background: transparent;
        color: #667085;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        margin-left: 16px;
    }
    .ai-search-wrapper .selected-filter-clear-all:hover {
        background: #fff;
        color: #101828;
        border-color: #101828;
    }
    .ai-search-wrapper .sidebar-filters-container .filters-section {
        padding: 0;
    }
    .ai-search-wrapper .sidebar-filters-container .sidebar-footer-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 16px;
        padding-top: 12px;
        padding-bottom: 8px;
        background: #F8FAFC;
        position: sticky;
        bottom: 0;
    }
    .ai-search-wrapper .sidebar-filters-container .sidebar-clear-btn {
        height: 48px;
        border-radius: 9999px;
        border: 1px solid #CBD5E1;
        background: #fff;
        color: #101828;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }
    .ai-search-wrapper .sidebar-filters-container .sidebar-view-btn {
        height: 48px;
        border-radius: 9999px;
        border: none;
        background: #101828;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }
}

.ai-search-wrapper .sidebar-filters-container .filters-section {
    margin: 0;
}

.ai-search-wrapper .sidebar-filters-container .filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}

.ai-search-wrapper .sidebar-filters-container .filter-group {
    display: block;
}

.ai-search-wrapper .sidebar-filters-container .price-filter-inputs {
    display: flex;
    gap: 10px;
}

/* ========================================================================== */

/* 搜索结果容器样式 */

/* ========================================================================== */

.ai-search-wrapper .search-results-container {
    margin-top: var(--module-spacing, 16px);
    margin-bottom: var(--module-spacing, 16px);
    border-radius: 12px;
    padding: 28px 32px 10px 32px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding-top: 0px;
}

/* 搜索状态样式（无结果、错误） */

.ai-search-wrapper .search-status .no-results,

.ai-search-wrapper .search-status .error {
    border-bottom: 1px solid #EAECF0;
    padding: 50px 0px;
    border-radius: 12px;
    background-color: #fff;
}

.ai-search-wrapper .search-status span {
    color: #101828;
    font-size: 14px;
}

/* ========================================================================== */

/* 搜索结果网格样式 */

/* ========================================================================== */

.ai-search-wrapper .loading,

.ai-search-wrapper .error,

.ai-search-wrapper .no-results,

.ai-search-wrapper .results-count {
    text-align: center;
    padding: 15px;
    font-size: 14px;
}

.ai-search-wrapper .loading {
    color: #1890ff;
}

.ai-search-wrapper .error {
    color: #ff4d4f;
    background: #fff2f0;
    border: 1px solid #ffccc7;
    border-radius: 4px;
}

.ai-search-wrapper .no-results {
    color: #999;
}

.ai-search-wrapper .results-count {
    color: var(--color-general-text);
    font-weight: 500;
}

/* 搜索结果网格布局 - 匹配原项目 */

.ai-search-wrapper .search-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: var(--module-spacing);
}

@media (min-width: 768px) {
    .ai-search-wrapper .search-results-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (min-width: 1280px) {
    .ai-search-wrapper .search-results-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
    }
}

/* ========================================================================== */

/* 商品项样式 */

/* ========================================================================== */

/* 商品图片容器 */
.ai-search-wrapper .product-image-wrapper {
    width: 100%;
    padding-top: 125%;
    /* 4:5 比例 */
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    border-radius: 12px;
}

.ai-search-wrapper .product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 商品项容器 - 匹配原项目样式 */

.ai-search-wrapper .product-item {
    position: relative;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ai-search-wrapper .product-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.ai-search-wrapper .product-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* 小图列表样式 */

.ai-search-wrapper .product-thumbnails {
    display: flex;
    gap: 4px;
    padding: 8px 12px 0 12px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #e0e0e0 transparent;
}

.ai-search-wrapper .product-thumbnails::-webkit-scrollbar {
    height: 4px;
}

.ai-search-wrapper .product-thumbnails::-webkit-scrollbar-track {
    background: transparent;
}

.ai-search-wrapper .product-thumbnails::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 2px;
}

.ai-search-wrapper .product-thumbnail {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    opacity: 0.7;
    display: flex;
}

.ai-search-wrapper .product-thumbnail:hover {
    opacity: 1;
    border-color: #e0e0e0;
}

.ai-search-wrapper .product-thumbnail.active {
    border-color: #1890ff;
    opacity: 1;
    box-shadow: 0 0 0 1px #1890ff;
}

.ai-search-wrapper .product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ai-search-wrapper .product-item:hover .product-image {
    transform: scale(1.05);
}

/* 折扣标签样式 */

.ai-search-wrapper .discount-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #ff3b30;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 12px;
    z-index: 10;
}

/* 缺货标签样式 */

.ai-search-wrapper .out-of-stock {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    z-index: 5;
}

/* 商品信息样式 */

.ai-search-wrapper .product-info {
    padding: 12px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.ai-search-wrapper .product-title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #101828;
}

.ai-search-wrapper .product-vendor,

.ai-search-wrapper .product-category {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

/* 价格样式 */

.ai-search-wrapper .product-price-wrapper {
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ai-search-wrapper .product-price {
    font-size: 14px;
    font-weight: 600;
    color: #101828;
}

.ai-search-wrapper .product-compare-price {
    display: block;
    font-size: 12px;
    color: #98A2B3;
    text-decoration: line-through;
    margin-left: 0;
}

/* 加入购物车按钮样式 */

.ai-search-wrapper .add-to-cart-btn {
    width: calc(100% - 24px);
    margin: 0 12px 12px;
    padding: 8px 12px;
    background-color: #101828;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    text-decoration: none;
}

/* .ai-search-wrapper .add-to-cart-btn:hover:not(:disabled) {
    background-color: #101828;
} */

.ai-search-wrapper .add-to-cart-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.ai-search-wrapper .cart-icon {
    margin-right: 6px;
}

/* ========================================================================== */

/* 分页样式 */

/* ========================================================================== */

.ai-search-wrapper .pagination-container {
    margin-top: 32px;
    background: white;
    z-index: var(--z-index-sticky);
    border-radius: 12px;
}

.ai-search-wrapper .pagination-container.mobile-pagination{
    position: relative;
}

.ai-search-wrapper .pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.ai-search-wrapper .pagination-info {
    font-size: 14px;
    color: #646A73;
}

.ai-search-wrapper .pagination-info span {
    margin-right: 4px;
    color: #646A73;
}

.ai-search-wrapper .pagination-info i {
    font-style: normal;
    color: #1F2329;
}

.ai-search-wrapper .pagination-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.ai-search-wrapper .load-more-container{
    padding-bottom: var(--module-spacing);
}

/* 分页按钮样式 */

.ai-search-wrapper .pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    color: var(--color-general-text);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.ai-search-wrapper .pagination-btn:hover:not(.disabled):not(.active) {
    border-color: #1890ff;
    color: #1890ff;
    background: #f0f8ff;
}

.ai-search-wrapper .pagination-btn.active {
    background: #000;
    border-color: #000;
    color: #fff;
    font-weight: 500;
}

.ai-search-wrapper .pagination-btn.disabled {
    background: #f5f5f5;
    border-color: #e0e0e0;
    color: #ccc;
    cursor: not-allowed;
}

/* 分页省略号样式 */

.ai-search-wrapper .pagination-ellipsis {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #646A73;
    font-size: 14px;
    letter-spacing: 2px;
    user-select: none;
}

/* 分页按钮过渡动画 */

.ai-search-wrapper .pagination-btn {
    transition: all 0.2s ease-in-out;
    transform: scale(1);
}

.ai-search-wrapper .pagination-btn:hover:not(.disabled):not(.active) {
    transform: scale(1.05);
}

.ai-search-wrapper .pagination-btn:active:not(.disabled) {
    transform: scale(0.95);
}

/* 省略号动画效果 */

.ai-search-wrapper .pagination-ellipsis {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 页码按钮入场动画 */

.ai-search-wrapper .pagination-btn {
    animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 分页跳转功能 */

.ai-search-wrapper .pagination-jump {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #646A73;
}

.ai-search-wrapper .pagination-jump input {
    width: 60px;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    line-height: 36px;
    height: 36px;
    background: #fff;
}

.ai-search-wrapper .pagination-jump input:focus {
    outline: none;
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.ai-search-wrapper .load-more-btn {
    background-color: var(--color-primary-btn-bg);
    border: none;
    color: var(--color-primary-btn-text);
    border-radius: var(--btn-border-radius);
    width: 100%;
    padding: 12px;
}

.ai-search-wrapper .no-more-data{
    text-align: center;
    padding: 24px 0;
    color: #646A73;
    font-size: 14px;
}

/* 响应式调整 */

@media (max-width: 1024px) {
    .ai-search-wrapper#ai-search-wrapper {
        background: #F4F6FA !important;
        padding: 28px 0;
    }
    .ai-search-wrapper#ai-search-wrapper .ai-page-container {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 0px;
    }
    .ai-search-wrapper .filters-section-normal {
        display: none;
    }
    .ai-search-wrapper .search-results-bar {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 28px 32px;
        margin-bottom: 20px;
        border-radius: 12px;
    }
    .ai-search-wrapper .search-results-title {
        font-size: 24px;
        line-height: 1.2;
    }
    .ai-search-wrapper .search-results-title-line {
        display: none;
    }
    .ai-search-wrapper .search-results-count {
        font-size: 16px;
        align-items: baseline;
    }
    .ai-search-wrapper .search-results-count i {
        font-size: 24px;
    }
    .ai-search-wrapper .filters-section-small {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 28px 32px;
        margin-bottom: 24px;
    }
    .ai-search-wrapper .mobile-filter-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 44px;
        padding: 0 16px;
        border: 1px solid #101828;
        border-radius: 8px;
        background: #101828;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        width: 100%;
    }
    .ai-search-wrapper .mobile-filter-button path {
        fill: currentColor;
    }
    .ai-search-wrapper .filters-section-small .filters-tabs {
        display: contents;
    }
    .ai-search-wrapper .mobile-filter-button {
        order: -1;
    }
    .ai-search-wrapper .filters-section-small .filters-tabs button {
        height: 44px;
        width: 100%;
        min-width: 0;
        padding: 0 16px;
        border: 1px solid #D0D5DD;
        border-radius: 8px;
        background: #fff;
        color: #667085;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        justify-content: center;
        text-align: center;
    }
    /* 小屏幕排序和价格筛选样式 */
    .ai-search-wrapper .sort-option,
    .ai-search-wrapper .price-input,
    .ai-search-wrapper .price-mix,
    .ai-search-wrapper .price-max,
    .ai-search-wrapper .price-filter-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .ai-search-wrapper .search-results-grid {
        gap: 6px;
    }
    .ai-search-wrapper .search-input-wrapper {
        max-width: 672px;
    }
    .ai-search-wrapper .pagination-btn {
        min-width: 32px;
        height: 32px;
        padding: 6px 8px;
        font-size: 13px;
    }
    .ai-search-wrapper .pagination {
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .ai-search-wrapper .pagination-buttons {
        gap: 4px;
    }
    .ai-search-wrapper .pagination-ellipsis {
        min-width: 24px;
        height: 32px;
        font-size: 12px;
    }
    .ai-search-wrapper .pagination-jump {
        display: none;
    }
    .ai-search-wrapper .pagination-info {
        font-size: 12px;
        width: 100%;
        text-align: center;
        order: -1;
    }
}

/* 分页响应式 - 中等屏幕 */

@media (max-width: 768px) and (min-width: 481px) {
    .ai-search-wrapper .pagination-btn {
        min-width: 34px;
        height: 34px;
        font-size: 13px;
    }
    .ai-search-wrapper .pagination-ellipsis {
        min-width: 30px;
        height: 34px;
        font-size: 13px;
    }
    .ai-search-wrapper .pagination-jump input {
        width: 50px;
    }
}

/* 分页容器响应式布局 */

.ai-search-wrapper .pagination {
    flex-wrap: wrap;
}

.ai-search-wrapper .pagination-buttons {
    flex-wrap: nowrap;
}

/* 触摸设备优化 */

@media (hover: none) and (pointer: coarse) {
    .ai-search-wrapper .pagination-btn {
        min-width: 44px;
        height: 44px;
    }
    .ai-search-wrapper .pagination-ellipsis {
        min-width: 44px;
        height: 44px;
    }
}