/*
 * @Project      家具展示网站与小程序接口预留项目
 * @File         pages.css
 * @Description  页面级专属样式：首页专属（Featured 区块等）、分类页专属
 *               （侧栏筛选）、商品详情页专属（多图切换、规格选择），
 *               以及全局响应式适配（断点 1024px / 768px）。
 * @Author       易商企
 * @Date         2026
 */

/* ============================================================
 * 一、首页专属样式
 *    Featured 推荐区、品牌故事区等首页独有区块。
 * ============================================================ */

/* 特色推荐区（Featured Section）—— 首页专属 */
.fg-featured {
    background: var(--fg-bg-cream);
}

.fg-featured__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fg-space-xl);
    max-width: var(--fg-max-width);
    margin: 0 auto;
    padding: var(--fg-content-padding);
}

.fg-featured-card {
    position: relative;
    border-radius: var(--fg-radius-md);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    cursor: pointer;
}

.fg-featured-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.fg-featured-card:hover img {
    transform: scale(1.05);
}

.fg-featured-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--fg-space-xl);
}

.fg-featured-card__title {
    font-size: var(--fg-font-size-xl);
    font-weight: 600;
    color: var(--fg-white);
    margin-bottom: var(--fg-space-xs);
}

.fg-featured-card__sub {
    font-size: var(--fg-font-size-sm);
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
 * 二、分类页专属样式
 *    左侧筛选栏 + 右侧商品网格 + 顶部排序/分类信息。
 * ============================================================ */
.fg-category-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--fg-space-xl);
    max-width: var(--fg-max-width);
    margin: 0 auto;
    padding: var(--fg-space-xl) var(--fg-space-lg);
}

/* 左侧筛选项 */
.fg-sidebar {
    position: sticky;
    top: calc(var(--fg-header-height) + 24px);
    align-self: start;
}

.fg-sidebar__section {
    margin-bottom: var(--fg-space-xl);
}

.fg-sidebar__title {
    font-size: var(--fg-font-size-base);
    font-weight: 600;
    color: var(--fg-dark);
    margin-bottom: var(--fg-space-md);
    padding-bottom: var(--fg-space-sm);
    border-bottom: 1px solid var(--fg-border);
}

/* 分类筛选列表 */
.fg-sidebar__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fg-sidebar__list a {
    display: block;
    padding: 8px 12px;
    font-size: var(--fg-font-size-sm);
    color: var(--fg-text);
    border-radius: var(--fg-radius-sm);
    transition: all 0.3s ease;
}

.fg-sidebar__list a:hover {
    background: var(--fg-primary-pale);
    color: var(--fg-primary);
}

.fg-sidebar__list a.fg-active {
    background: var(--fg-primary);
    color: var(--fg-white);
}

/* 价格区间滑块（占位样式） */
.fg-sidebar__price-range {
    display: flex;
    flex-direction: column;
    gap: var(--fg-space-sm);
}

.fg-sidebar__price-inputs {
    display: flex;
    align-items: center;
    gap: var(--fg-space-sm);
}

.fg-sidebar__price-inputs input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--fg-border);
    border-radius: var(--fg-radius-sm);
    font-size: var(--fg-font-size-sm);
    text-align: center;
}

.fg-sidebar__price-inputs input:focus {
    border-color: var(--fg-primary);
}

.fg-sidebar__price-inputs span {
    color: var(--fg-muted);
}

/* 右侧商品区域头部 */
.fg-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--fg-space-lg);
    padding-bottom: var(--fg-space-md);
    border-bottom: 1px solid var(--fg-border);
}

.fg-category-header__info {
    font-size: var(--fg-font-size-sm);
    color: var(--fg-muted);
}

.fg-category-header__sort {
    display: flex;
    align-items: center;
    gap: var(--fg-space-sm);
    font-size: var(--fg-font-size-sm);
    color: var(--fg-muted);
}

.fg-category-header__sort select {
    padding: 8px 12px;
    border: 1px solid var(--fg-border);
    border-radius: var(--fg-radius-sm);
    font-size: var(--fg-font-size-sm);
    color: var(--fg-text);
    background: var(--fg-white);
    cursor: pointer;
}

/* ============================================================
 * 三、商品详情页专属样式
 *    多图切换、规格选择、商品信息 + 按钮区。
 * ============================================================ */
.fg-product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fg-space-3xl);
    max-width: var(--fg-max-width);
    margin: 0 auto;
    padding: var(--fg-space-xl) var(--fg-space-lg) var(--fg-space-4xl);
}

/* 左侧：多图切换 */
.fg-gallery {
    position: sticky;
    top: calc(var(--fg-header-height) + 16px);
    align-self: start;
}

/* 主图显示区 */
.fg-gallery__main {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--fg-radius-md);
    overflow: hidden;
    background: var(--fg-light);
    margin-bottom: var(--fg-space-md);
}

.fg-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* 缩略图列表 */
.fg-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--fg-space-sm);
}

.fg-gallery__thumb {
    aspect-ratio: 1 / 1;
    border-radius: var(--fg-radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
    background: var(--fg-light);
}

.fg-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fg-gallery__thumb.fg-active {
    border-color: var(--fg-primary);
}

.fg-gallery__thumb:hover {
    border-color: var(--fg-primary-light);
}

/* 右侧：商品信息 */
.fg-product-info__brand {
    font-size: var(--fg-font-size-xs);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--fg-space-sm);
}

.fg-product-info__name {
    font-size: var(--fg-font-size-2xl);
    font-weight: 600;
    color: var(--fg-dark);
    line-height: var(--fg-line-height-tight);
    margin-bottom: var(--fg-space-md);
}

.fg-product-info__rating {
    display: flex;
    align-items: center;
    gap: var(--fg-space-sm);
    margin-bottom: var(--fg-space-md);
    font-size: var(--fg-font-size-sm);
    color: var(--fg-muted);
}

.fg-product-info__rating-stars {
    color: var(--fg-new);
    display: flex;
    gap: 2px;
}

.fg-product-info__rating-stars svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* 价格展示 */
.fg-product-info__prices {
    display: flex;
    align-items: baseline;
    gap: var(--fg-space-md);
    margin-bottom: var(--fg-space-lg);
    padding-bottom: var(--fg-space-lg);
    border-bottom: 1px solid var(--fg-border);
}

.fg-product-info__price-current {
    font-size: var(--fg-font-size-3xl);
    font-weight: 600;
    color: var(--fg-dark);
}

.fg-product-info__price-original {
    font-size: var(--fg-font-size-lg);
    color: var(--fg-muted);
    text-decoration: line-through;
}

.fg-product-info__price-discount {
    font-size: var(--fg-font-size-sm);
    color: var(--fg-sale);
    font-weight: 600;
    padding: 4px 12px;
    background: rgba(209, 39, 39, 0.1);
    border-radius: var(--fg-radius-pill);
}

/* 规格选择区域 */
.fg-product-info__specs {
    margin-bottom: var(--fg-space-xl);
}

.fg-product-info__spec-group {
    margin-bottom: var(--fg-space-lg);
}

.fg-product-info__spec-label {
    font-size: var(--fg-font-size-sm);
    font-weight: 600;
    color: var(--fg-dark);
    margin-bottom: var(--fg-space-sm);
}

.fg-product-info__spec-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fg-space-sm);
}

.fg-product-info__spec-option {
    padding: 10px 20px;
    border: 1px solid var(--fg-border);
    border-radius: var(--fg-radius-sm);
    font-size: var(--fg-font-size-sm);
    color: var(--fg-text);
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--fg-white);
}

.fg-product-info__spec-option:hover {
    border-color: var(--fg-primary);
    color: var(--fg-primary);
}

.fg-product-info__spec-option.fg-active {
    border-color: var(--fg-primary);
    background: var(--fg-primary);
    color: var(--fg-white);
}

/* 颜色规格圆点（特殊样式） */
.fg-product-info__spec-option--color {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border-width: 3px;
}

.fg-product-info__spec-option--color.fg-active {
    border-color: var(--fg-primary);
    outline: 2px solid var(--fg-primary);
    outline-offset: 2px;
}

/* 规格/SKU 选择组（详情页实际使用 .fg-spec-* 类，样式与上方 fg-product-info__spec-* 保持一致） */
.fg-spec-group {
    margin-bottom: var(--fg-space-lg);
}
.fg-spec-group__label {
    font-size: var(--fg-font-size-sm);
    font-weight: 600;
    color: var(--fg-dark);
    margin-bottom: var(--fg-space-sm);
}
.fg-spec-selected {
    font-weight: 400;
    color: var(--fg-muted);
}
.fg-spec-group__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fg-space-sm);
}
.fg-spec-option {
    padding: 10px 20px;
    border: 1px solid var(--fg-border);
    border-radius: var(--fg-radius-sm);
    font-size: var(--fg-font-size-sm);
    color: var(--fg-text);
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--fg-white);
}
.fg-spec-option:hover {
    border-color: var(--fg-primary);
    color: var(--fg-primary);
}
.fg-spec-option.fg-active {
    border-color: var(--fg-primary);
    background: var(--fg-primary);
    color: var(--fg-white);
}

/* 操作按钮区 */
.fg-product-info__actions {
    display: flex;
    gap: var(--fg-space-md);
    padding-top: var(--fg-space-lg);
    border-top: 1px solid var(--fg-border);
}

.fg-product-info__actions .fg-btn {
    flex: 1;
}

/* 商品描述/详情 Tab（详情页下方） */
.fg-product-description {
    max-width: var(--fg-max-width);
    margin: 0 auto;
    padding: 0 var(--fg-space-lg) var(--fg-space-4xl);
}

.fg-product-description__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--fg-border);
    margin-bottom: var(--fg-space-xl);
}

.fg-product-description__tab {
    padding: 12px 28px;
    font-size: var(--fg-font-size-sm);
    font-weight: 500;
    color: var(--fg-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.fg-product-description__tab:hover {
    color: var(--fg-text);
}

.fg-product-description__tab.fg-active {
    color: var(--fg-primary);
    border-bottom-color: var(--fg-primary);
}

.fg-product-description__content {
    font-size: var(--fg-font-size-sm);
    color: var(--fg-text);
    line-height: var(--fg-line-height-loose);
    max-width: 720px;
}

.fg-product-description__content p {
    margin-bottom: var(--fg-space-md);
}

/* 详情富文本（后台富文本编辑器内容） */
.fg-rich-content { line-height: 1.8; word-break: break-word; }
.fg-rich-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }

/* 规格 / SKU 表 */
.fg-spec-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.fg-spec-table th, .fg-spec-table td {
    text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--fg-border);
    font-size: var(--fg-font-size-sm); vertical-align: middle;
}
.fg-spec-table th { color: #667085; font-weight: 600; width: 38%; }
.fg-spec-origin { color: #98a2b3; text-decoration: line-through; margin-left: 8px; font-size: 12px; }
.fg-spec-stock { color: #667085; margin-left: 8px; font-size: 12px; }

/* ============================================================
 * 四、全局响应式适配
 *    桌面 > 1024px（默认）/ 平板 768-1024px / 移动 < 768px
 * ============================================================ */

/* —— 平板端（768px - 1024px） —— */
@media (max-width: 1024px) {
    /* 商品网格：4 列 → 3 列 */
    .fg-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 分类入口：8 列 → 4 列 */
    .fg-category-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .fg-hero {
        max-height: 420px;
    }
    .fg-hero__title {
        font-size: var(--fg-font-size-2xl);
    }

    /* 页脚：5 列 → 3 列 */
    .fg-footer__links-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 信任条：4 列 → 2 列 */
    .fg-trust-band__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 分类页：侧栏折叠到上方（简化） */
    .fg-category-layout {
        grid-template-columns: 1fr;
    }

    .fg-sidebar {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: var(--fg-space-md);
    }

    .fg-sidebar__section {
        flex: 1;
        min-width: 200px;
        margin-bottom: 0;
    }

    /* 详情页：依然是两列，间距缩小 */
    .fg-product-detail {
        gap: var(--fg-space-xl);
    }
}

/* —— 移动端（< 768px） —— */
@media (max-width: 767px) {
    /* 商品网格：3 列 → 2 列 */
    .fg-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--fg-space-sm);
    }

    /* 分类入口：8 列 → 横向滚动 */
    .fg-category-grid {
        grid-template-columns: repeat(8, 1fr);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--fg-space-xs);
        padding-bottom: var(--fg-space-sm);
        /* 左右渐隐边缘：首尾卡片淡出，提示可滑动 */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .fg-category-grid::-webkit-scrollbar {
        display: none;
    }

    .fg-category-card {
        scroll-snap-align: start;
        min-width: 100px;
    }

    .fg-hero {
        max-height: 400px;
        min-height: 280px;
    }
    /* 文字区限制在容器内（bottom:0 定位），超高时裁顶部而不上顶，避免 subtitle 顶出 */
    .fg-hero__text {
        padding: 24px var(--fg-space-lg) 44px;
        max-width: 100%;
        max-height: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    .fg-hero__title {
        font-size: var(--fg-font-size-xl);
        margin-bottom: var(--fg-space-xs);
    }
    .fg-hero__desc {
        font-size: var(--fg-font-size-sm);
        line-height: 1.5;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .fg-hero__dots {
        right: 20px;
        bottom: 16px;
    }

    /* 隐藏 USP 条 */
    .fg-usp-bar {
        display: none;
    }

    /* 隐藏 Mega 菜单（移动端简化） */
    .fg-mega-menu {
        display: none;
    }

    /* 移动端搜索条全宽 */
    .fg-search-bar__inner {
        padding: 0 16px;
        height: 52px;
    }

    .fg-search-bar__input {
        font-size: var(--fg-font-size-sm);
    }

    /* 导航菜单：水平滚动 */
    .fg-nav__list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        gap: 0;
    }

    .fg-nav__link {
        padding: 12px 16px;
        white-space: nowrap;
        font-size: var(--fg-font-size-xs);
    }

    /* 页脚：5 列 → 2 列 → 移动端 1 列 */
    .fg-footer__links-grid {
        grid-template-columns: 1fr 1fr;
    }

    .fg-footer__bottom-inner {
        flex-direction: column;
        gap: var(--fg-space-md);
        text-align: center;
    }

    /* 信任条：2 列 */
    .fg-trust-band__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--fg-space-lg);
    }

    .fg-trust-band__number {
        font-size: var(--fg-font-size-2xl);
    }

    /* 详情页：单列 */
    .fg-product-detail {
        grid-template-columns: 1fr;
    }

    .fg-gallery {
        position: static;
    }

    .fg-product-info__name {
        font-size: var(--fg-font-size-xl);
    }

    .fg-product-info__price-current {
        font-size: var(--fg-font-size-2xl);
    }

    .fg-product-info__actions {
        flex-direction: column;
    }

    /* Featured 区：单列 */
    .fg-featured__grid {
        grid-template-columns: 1fr;
    }

    /* 分类页头部排序：堆叠 */
    .fg-category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--fg-space-sm);
    }

    /* 搜索框隐藏（移动端 Header 简化） */
    .fg-search {
        display: none;
    }

    /* 分类页侧栏：单列 */
    .fg-sidebar {
        flex-direction: column;
    }

    .fg-sidebar__section {
        min-width: 100%;
    }
}

/* ============================================================
 * 五、关于我们页面专属样式
 * ============================================================ */

/* About Hero */
.fg-about-hero {
    width: 100%;
    aspect-ratio: 16 / 4;
    height: auto;
    min-height: 200px;
    max-height: 320px;
    background: linear-gradient(135deg, var(--fg-primary-pale) 0%, var(--fg-bg-cream) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fg-about-hero__text {
    max-width: 700px;
    padding: 0 var(--fg-space-lg);
}

.fg-about-hero__title {
    font-size: var(--fg-font-size-4xl);
    font-weight: 600;
    color: var(--fg-dark);
    margin-bottom: var(--fg-space-md);
    line-height: var(--fg-line-height-tight);
}

.fg-about-hero__desc {
    font-size: var(--fg-font-size-lg);
    color: var(--fg-muted);
    line-height: var(--fg-line-height-loose);
}

/* 品牌故事 */
.fg-about-story__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fg-space-3xl);
    max-width: var(--fg-max-width);
    margin: 0 auto;
    padding: var(--fg-content-padding);
    align-items: center;
}

.fg-about-story__image {
    border-radius: var(--fg-radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.fg-about-story__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fg-about-story__text h2 {
    font-size: var(--fg-font-size-2xl);
    font-weight: 600;
    color: var(--fg-dark);
    margin-bottom: var(--fg-space-lg);
}

.fg-about-story__text p {
    font-size: var(--fg-font-size-base);
    color: var(--fg-text);
    line-height: var(--fg-line-height-loose);
    margin-bottom: var(--fg-space-md);
}

/* 品牌理念 */
.fg-about-values__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--fg-space-xl);
    max-width: var(--fg-max-width);
    margin: 0 auto;
    padding: var(--fg-content-padding);
}

.fg-about-value-card {
    text-align: center;
    padding: var(--fg-space-xl);
}

.fg-about-value-card__icon {
    width: 48px;
    height: 48px;
    color: var(--fg-primary);
    margin: 0 auto var(--fg-space-md);
}

.fg-about-value-card__title {
    font-size: var(--fg-font-size-lg);
    font-weight: 600;
    color: var(--fg-dark);
    margin-bottom: var(--fg-space-sm);
}

.fg-about-value-card__desc {
    font-size: var(--fg-font-size-sm);
    color: var(--fg-muted);
    line-height: var(--fg-line-height-base);
}

/* 发展历程 */
.fg-about-timeline__list {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--fg-content-padding);
}

.fg-about-timeline__item {
    display: flex;
    gap: var(--fg-space-xl);
    padding: var(--fg-space-lg) 0;
    border-bottom: 1px solid var(--fg-border);
}

.fg-about-timeline__item:last-child {
    border-bottom: none;
}

.fg-about-timeline__year {
    font-size: var(--fg-font-size-xl);
    font-weight: 600;
    color: var(--fg-primary);
    min-width: 80px;
    flex-shrink: 0;
}

.fg-about-timeline__desc {
    font-size: var(--fg-font-size-base);
    color: var(--fg-text);
    line-height: var(--fg-line-height-base);
}

/* ============================================================
 * 六、联系我们页面专属样式
 * ============================================================ */

/* Contact Hero */
.fg-contact-hero {
    width: 100%;
    aspect-ratio: 16 / 5;
    height: auto;
    min-height: 180px;
    max-height: 280px;
    background: linear-gradient(135deg, var(--fg-primary-pale) 0%, var(--fg-bg-cream) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fg-contact-hero__text {
    max-width: 700px;
    padding: 0 var(--fg-space-lg);
}

.fg-contact-hero__title {
    font-size: var(--fg-font-size-4xl);
    font-weight: 600;
    color: var(--fg-dark);
    margin-bottom: var(--fg-space-md);
    line-height: var(--fg-line-height-tight);
}

.fg-contact-hero__desc {
    font-size: var(--fg-font-size-lg);
    color: var(--fg-muted);
    line-height: var(--fg-line-height-loose);
}

/* 联系方式 + 表单布局 */
.fg-contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--fg-space-3xl);
    max-width: var(--fg-max-width);
    margin: 0 auto;
    padding: var(--fg-content-padding);
}

/* 联系信息 */
.fg-contact-info__title {
    font-size: var(--fg-font-size-xl);
    font-weight: 600;
    color: var(--fg-dark);
    margin-bottom: var(--fg-space-xl);
}

.fg-contact-info__item {
    display: flex;
    gap: var(--fg-space-md);
    margin-bottom: var(--fg-space-xl);
}

.fg-contact-info__icon {
    width: 24px;
    height: 24px;
    color: var(--fg-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.fg-contact-info__label {
    font-size: var(--fg-font-size-base);
    font-weight: 600;
    color: var(--fg-dark);
    margin-bottom: var(--fg-space-xs);
}

.fg-contact-info__text {
    font-size: var(--fg-font-size-sm);
    color: var(--fg-muted);
    line-height: var(--fg-line-height-base);
}

.fg-contact-info__text a {
    color: var(--fg-primary);
    text-decoration: none;
}

.fg-contact-info__text a:hover {
    text-decoration: underline;
}

/* 留言表单 */
.fg-contact-form__title {
    font-size: var(--fg-font-size-xl);
    font-weight: 600;
    color: var(--fg-dark);
    margin-bottom: var(--fg-space-xl);
}

.fg-contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fg-space-md);
    margin-bottom: var(--fg-space-md);
}

.fg-contact-form__group {
    margin-bottom: var(--fg-space-md);
}

.fg-contact-form__label {
    display: block;
    font-size: var(--fg-font-size-sm);
    font-weight: 500;
    color: var(--fg-text);
    margin-bottom: var(--fg-space-xs);
}

.fg-contact-form__input,
.fg-contact-form__select,
.fg-contact-form__textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--fg-border);
    border-radius: var(--fg-radius-sm);
    font-size: var(--fg-font-size-base);
    color: var(--fg-text);
    background: var(--fg-white);
    transition: border-color 0.3s ease;
}

.fg-contact-form__input:focus,
.fg-contact-form__select:focus,
.fg-contact-form__textarea:focus {
    outline: none;
    border-color: var(--fg-primary);
}

.fg-contact-form__textarea {
    resize: vertical;
    font-family: inherit;
}

/* ============================================================
 * 七、平板端响应式（768px - 1024px）
 * ============================================================ */
@media (max-width: 1024px) {
    .fg-about-story__content {
        grid-template-columns: 1fr;
    }

    .fg-about-values__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fg-contact-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 * 八、移动端响应式（< 768px）
 * ============================================================ */
@media (max-width: 767px) {
    .fg-about-hero {
        max-height: 240px;
        min-height: 160px;
    }

    .fg-about-hero__title {
        font-size: var(--fg-font-size-2xl);
    }

    .fg-about-hero__desc {
        font-size: var(--fg-font-size-base);
    }

    .fg-about-values__grid {
        grid-template-columns: 1fr;
    }

    .fg-about-timeline__item {
        flex-direction: column;
        gap: var(--fg-space-sm);
    }

    .fg-about-timeline__year {
        min-width: auto;
    }

    .fg-contact-hero {
        max-height: 200px;
        min-height: 140px;
    }

    .fg-contact-hero__title {
        font-size: var(--fg-font-size-2xl);
    }

    .fg-contact-hero__desc {
        font-size: var(--fg-font-size-base);
    }

    .fg-contact-form__row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 * 八点一、小屏手机响应式（< 480px）
 * ============================================================ */
@media (max-width: 480px) {
    /* —— 商品网格：2列保持但间距缩小 —— */
    .fg-products-grid {
        gap: var(--fg-space-sm);
        padding: 0 var(--fg-space-sm);
    }

    /* —— 分类网格 —— */
    .fg-category-grid {
        padding: 0 var(--fg-space-sm);
    }

    /* —— Hero 进一步缩小 —— */
    .fg-hero {
        max-height: 360px;
        min-height: 250px;
    }
    .fg-hero__text {
        padding: 18px var(--fg-space-md) 44px;
        max-height: 100%;
    }
    .fg-hero__title {
        font-size: var(--fg-font-size-base);
    }
    .fg-hero__desc {
        font-size: var(--fg-font-size-xs);
        line-height: 1.5;
    }

    /* —— 分类页侧栏 —— */
    .fg-category-layout {
        padding: var(--fg-space-md) var(--fg-space-sm);
        gap: var(--fg-space-md);
    }
    .fg-sidebar__section {
        min-width: 100%;
    }

    /* —— 商品详情页 —— */
    .fg-product-detail {
        padding: var(--fg-space-md) var(--fg-space-sm) var(--fg-space-2xl);
        gap: var(--fg-space-lg);
    }
    .fg-gallery__thumbs {
        grid-template-columns: repeat(3, 1fr);
    }
    .fg-product-info__name {
        font-size: var(--fg-font-size-lg);
    }
    .fg-product-info__price-current {
        font-size: var(--fg-font-size-xl);
    }
    .fg-product-description {
        padding: 0 var(--fg-space-sm) var(--fg-space-xl);
    }
    .fg-product-description__tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* —— Featured 区 —— */
    .fg-featured-card__overlay {
        padding: var(--fg-space-md);
    }
    .fg-featured-card__title {
        font-size: var(--fg-font-size-base);
    }

    /* —— 分类页头部 —— */
    .fg-category-header {
        padding-bottom: var(--fg-space-sm);
        margin-bottom: var(--fg-space-md);
    }

    /* —— 信任条：2列保持 —— */
    .fg-trust-band__number {
        font-size: var(--fg-font-size-xl);
    }
    .fg-trust-band__label {
        font-size: var(--fg-font-size-xs);
    }

    /* —— 页脚链接：单列 —— */
    .fg-footer__links-grid {
        grid-template-columns: 1fr;
    }
    .fg-footer__links {
        padding: var(--fg-space-xl) 0;
    }

    /* —— About 页面 —— */
    .fg-about-hero {
        max-height: 200px;
        min-height: 140px;
        aspect-ratio: 16 / 3;
    }
    .fg-about-hero__title {
        font-size: var(--fg-font-size-xl);
    }
    .fg-about-hero__desc {
        font-size: var(--fg-font-size-sm);
    }
    .fg-about-story__text h2 {
        font-size: var(--fg-font-size-lg);
    }
    .fg-about-value-card {
        padding: var(--fg-space-md);
    }
    .fg-about-value-card__title {
        font-size: var(--fg-font-size-base);
    }
    .fg-about-timeline__year {
        font-size: var(--fg-font-size-base);
    }
    .fg-about-timeline__desc {
        font-size: var(--fg-font-size-sm);
    }

    /* —— Contact 页面 —— */
    .fg-contact-hero {
        max-height: 180px;
        min-height: 130px;
        aspect-ratio: 16 / 4;
    }
    .fg-contact-hero__title {
        font-size: var(--fg-font-size-xl);
    }
    .fg-contact-hero__desc {
        font-size: var(--fg-font-size-sm);
    }
    .fg-contact-layout {
        padding: 0 var(--fg-space-sm);
        gap: var(--fg-space-xl);
    }
    .fg-contact-info__title,
    .fg-contact-form__title {
        font-size: var(--fg-font-size-lg);
    }
    .fg-contact-form__input,
    .fg-contact-form__select,
    .fg-contact-form__textarea {
        padding: 10px 12px;
        font-size: var(--fg-font-size-sm);
    }
}

/* ============================================================
 * 九、商品详情页 — 分期信息
 * ============================================================ */
.fg-installment-info {
    margin-top: var(--fg-space-md);
    font-size: var(--fg-font-size-sm);
    color: var(--fg-muted);
}

/* ============================================================
 * 十、商品描述 Tab 面板
 * ============================================================ */
.fg-product-description__panel {
    display: none;
}

.fg-product-description__panel.fg-active {
    display: block;
}

/* ============================================================
 * 十一、规格参数列表
 * ============================================================ */
.fg-specs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fg-specs-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--fg-border);
}

/* ============================================================
 * 十二、特性列表
 * ============================================================ */
.fg-feature-list {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: var(--fg-space-md);
}

/* ============================================================
 * 十三、高亮链接
 * ============================================================ */
.fg-link-highlight {
    color: var(--fg-primary);
}

/* ============================================================
 * 十四、文章系统（列表 / 详情 / 首页推荐）
 *   —— 视觉语言统一对齐商品卡片（components.css 第六节）
 * ============================================================ */

/* 区块标题：标题与「查看全部」同行（左对齐，区别于居中的默认标题）
   宽度约束与 .fg-articles-grid / 商品网格保持一致，避免标题被顶到视口边缘 */
.fg-section-header--row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    text-align: left;
    max-width: var(--fg-max-width);
    margin: 0 auto var(--fg-space-3xl);
    padding: var(--fg-content-padding);
}
/* 文章分类 Tab 复用 .fg-tab，去除 a 标签默认下划线 */
.fg-articles-tabs .fg-tab {
    text-decoration: none;
}
.fg-section-header__more {
    font-size: var(--fg-font-size-sm);
    color: var(--fg-primary);
    text-decoration: none;
    white-space: nowrap;
}
.fg-section-header__more:hover {
    text-decoration: underline;
}

/* 文章网格（与商品网格一致：max-width + content-padding） */
.fg-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fg-space-xl);
    max-width: var(--fg-max-width);
    margin: 0 auto;
    padding: var(--fg-content-padding);
}

/* 文章卡片 —— 视觉对齐 .fg-product-card */
.fg-article-card {
    position: relative;
    background: var(--fg-white);
    border-radius: var(--fg-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    cursor: pointer;
}
.fg-article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fg-shadow-md);
}
.fg-article-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--fg-light);
}
.fg-article-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.fg-article-card:hover .fg-article-card__media img {
    transform: scale(1.05);
}
.fg-article-card__badge {
    position: absolute;
    top: var(--fg-space-sm);
    left: var(--fg-space-sm);
    padding: 4px 12px;
    font-size: var(--fg-font-size-xs);
    font-weight: 600;
    color: var(--fg-white);
    border-radius: var(--fg-radius-pill);
    z-index: 2;
    text-transform: uppercase;
}
.fg-article-card__badge--news { background: var(--fg-primary); }
.fg-article-card__badge--guide { background: #2a7de1; }
.fg-article-card__badge--promotion { background: var(--fg-sale); }

.fg-article-card__body {
    padding: var(--fg-space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.fg-article-card__date {
    font-size: var(--fg-font-size-xs);
    color: var(--fg-muted);
    margin-bottom: var(--fg-space-sm);
}
.fg-article-card__title {
    font-size: var(--fg-font-size-base);
    font-weight: 500;
    color: var(--fg-text);
    margin-bottom: var(--fg-space-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: var(--fg-line-height-base);
}
.fg-article-card__title a {
    color: var(--fg-text);
    text-decoration: none;
}
.fg-article-card__title a:hover {
    color: var(--fg-primary);
}
.fg-article-card__summary {
    font-size: var(--fg-font-size-sm);
    color: var(--fg-muted);
    line-height: var(--fg-line-height-base);
    margin-bottom: var(--fg-space-md);
    flex: 1;
}
.fg-article-card__more {
    font-size: var(--fg-font-size-sm);
    font-weight: 600;
    color: var(--fg-primary);
    text-decoration: none;
}
.fg-article-card__more:hover {
    text-decoration: underline;
}

/* 文章详情布局 */
.fg-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--fg-space-2xl);
    max-width: var(--fg-max-width);
    margin: 0 auto;
    /* 上下留出充足呼吸空间，避免文章块紧贴面包屑与页脚 */
    padding: var(--fg-space-2xl) 24px var(--fg-space-4xl);
    align-items: start;
}

/* 文章主体：升级为与侧边栏对等的白色卡片，左右结构更平衡 */
.fg-article-detail {
    background: var(--fg-white);
    border: 1px solid var(--fg-border);
    border-radius: var(--fg-radius-lg);
    padding: var(--fg-space-2xl);
    box-shadow: var(--fg-shadow-sm);
}

/* 元信息：左侧分类徽标，右侧「日期 · 作者 · 阅读量」，底部细分割线 */
.fg-article-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fg-space-sm);
    font-size: var(--fg-font-size-sm);
    color: var(--fg-muted);
    padding-bottom: var(--fg-space-md);
    margin-bottom: var(--fg-space-xl);
    border-bottom: 1px solid var(--fg-border);
}
/* 除徽标外的首个信息项整体推到右侧，形成左徽标 / 右信息的两段式排版 */
.fg-article-detail__meta > span:not(.fg-article-detail__badge) {
    margin-left: auto;
}
.fg-article-detail__badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    font-size: var(--fg-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--fg-white);
    border-radius: var(--fg-radius-pill);
    text-transform: uppercase;
}
.fg-article-detail__title {
    font-size: var(--fg-font-size-2xl);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--fg-space-lg);
    color: var(--fg-dark);
    letter-spacing: -0.01em;
}
.fg-article-detail__cover {
    display: block;
    width: auto;
    /* 不再全宽撑满（方形 Logo 会被拉得过大），限制最大宽度并居中 */
    max-width: min(100%, 640px);
    margin: 0 auto var(--fg-space-2xl);
    border-radius: var(--fg-radius-lg);
    box-shadow: var(--fg-shadow-sm);
}

/* 正文：限制行宽（舒适阅读尺度），加大垂直节奏 */
.fg-article-detail__content {
    font-size: var(--fg-font-size-base);
    line-height: var(--fg-line-height-loose);
    color: var(--fg-text);
    max-width: 72ch;
}
.fg-article-detail__content h2 {
    font-size: var(--fg-font-size-xl);
    font-weight: 700;
    line-height: 1.35;
    margin: var(--fg-space-2xl) 0 var(--fg-space-md);
    color: var(--fg-dark);
}
.fg-article-detail__content h3 {
    font-size: var(--fg-font-size-lg);
    font-weight: 600;
    margin: var(--fg-space-xl) 0 var(--fg-space-sm);
    color: var(--fg-text);
}
.fg-article-detail__content p {
    margin-bottom: var(--fg-space-lg);
}
.fg-article-detail__content ul,
.fg-article-detail__content ol {
    margin-bottom: var(--fg-space-lg);
    padding-left: var(--fg-space-lg);
}
.fg-article-detail__content li {
    margin-bottom: var(--fg-space-sm);
}
.fg-article-detail__content a {
    color: var(--fg-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fg-article-detail__content a:hover {
    color: var(--fg-dark);
}
.fg-article-detail__content strong {
    color: var(--fg-dark);
    font-weight: 600;
}
.fg-article-detail__content img {
    display: block;
    max-width: min(100%, 560px);
    width: auto;
    height: auto;
    /* 居中显示，避免占满整行显得过大 */
    margin: var(--fg-space-lg) auto;
    border-radius: var(--fg-radius-md);
    box-shadow: var(--fg-shadow-sm);
}
/* 富文本：引用块 */
.fg-article-detail__content blockquote {
    margin: var(--fg-space-xl) 0;
    padding: var(--fg-space-md) var(--fg-space-lg);
    border-left: 4px solid var(--fg-primary);
    background: var(--fg-bg-cream);
    border-radius: 0 var(--fg-radius-md) var(--fg-radius-md) 0;
    color: var(--fg-text);
    font-style: italic;
}
.fg-article-detail__content blockquote p:last-child {
    margin-bottom: 0;
}
/* 富文本：行内代码与代码块 */
.fg-article-detail__content code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
    background: var(--fg-light);
    border-radius: var(--fg-radius-sm);
    padding: 2px 6px;
}
.fg-article-detail__content pre {
    margin: var(--fg-space-lg) 0;
    padding: var(--fg-space-md);
    background: var(--fg-light);
    border-radius: var(--fg-radius-md);
    overflow-x: auto;
}
.fg-article-detail__content pre code {
    background: none;
    padding: 0;
    font-size: var(--fg-font-size-sm);
}
/* 富文本：表格 */
.fg-article-detail__content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--fg-space-lg) 0;
    font-size: var(--fg-font-size-sm);
    overflow: hidden;
    border-radius: var(--fg-radius-md);
}
.fg-article-detail__content th,
.fg-article-detail__content td {
    border: 1px solid var(--fg-border);
    padding: var(--fg-space-sm) var(--fg-space-md);
    text-align: left;
}
.fg-article-detail__content th {
    background: var(--fg-bg-cream);
    font-weight: 600;
    color: var(--fg-dark);
}
/* 富文本：分隔线 */
.fg-article-detail__content hr {
    border: none;
    border-top: 1px solid var(--fg-border);
    margin: var(--fg-space-2xl) 0;
}

/* 返回列表：升级为 pill 按钮，hover 填充主色 */
.fg-article-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--fg-space-2xl);
    padding: var(--fg-space-sm) var(--fg-space-lg);
    background: var(--fg-bg-cream);
    color: var(--fg-primary);
    border: 1px solid var(--fg-border);
    border-radius: var(--fg-radius-pill);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fg-font-size-sm);
    transition: all 0.25s ease;
}
.fg-article-detail__back:hover {
    background: var(--fg-primary);
    color: var(--fg-white);
    border-color: var(--fg-primary);
    text-decoration: none;
}

/* 侧边栏：最新文章（与文章卡片对齐顶部，顶部跟随吸顶） */
.fg-article-sidebar {
    background: var(--fg-bg-cream);
    border: 1px solid var(--fg-border);
    border-radius: var(--fg-radius-lg);
    padding: var(--fg-space-xl);
    align-self: start;
    position: sticky;
    top: calc(var(--fg-header-height) + var(--fg-space-lg));
}
.fg-article-sidebar__title {
    margin: 0 0 var(--fg-space-lg);
    padding-bottom: var(--fg-space-sm);
    border-bottom: 2px solid var(--fg-primary);
    display: inline-block;
    font-size: var(--fg-font-size-lg);
    font-weight: 700;
    color: var(--fg-dark);
}
.fg-article-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fg-article-sidebar__list li {
    padding: var(--fg-space-md) 0;
    border-bottom: 1px solid var(--fg-border);
    transition: padding-left 0.25s ease;
}
.fg-article-sidebar__list li:last-child {
    border-bottom: none;
}
.fg-article-sidebar__list li:hover {
    padding-left: var(--fg-space-xs);
}
.fg-article-sidebar__list a {
    color: var(--fg-text);
    text-decoration: none;
    font-size: var(--fg-font-size-sm);
    line-height: var(--fg-line-height-base);
}
.fg-article-sidebar__list a:hover {
    color: var(--fg-primary);
}
.fg-article-sidebar__date {
    display: block;
    margin-top: var(--fg-space-xs);
    font-size: var(--fg-font-size-xs);
    color: var(--fg-muted);
}

/* 首页文章推荐区块（与 trust-band 同用米色节奏底） */
.fg-home-articles {
    background: var(--fg-bg-cream);
}

/* 响应式 */
@media (max-width: 1024px) {
    .fg-articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .fg-article-layout {
        grid-template-columns: 1fr;
        /* 平板端减小上下留白，避免纵向过长 */
        padding: var(--fg-space-xl) 24px var(--fg-space-3xl);
        gap: var(--fg-space-xl);
    }
    /* 单列下文章卡片与侧边栏内边距保持一致 */
    .fg-article-detail {
        padding: var(--fg-space-lg);
    }
    .fg-article-sidebar {
        position: static;
    }
}
@media (max-width: 640px) {
    .fg-articles-grid {
        grid-template-columns: 1fr;
    }
    /* 移动端：缩小留白与字号，元信息换行堆叠，正文取消行宽限制 */
    .fg-article-layout {
        padding: var(--fg-space-lg) 16px var(--fg-space-2xl);
    }
    .fg-article-detail {
        padding: var(--fg-space-md);
        border-radius: var(--fg-radius-md);
    }
    .fg-article-detail__title {
        font-size: var(--fg-font-size-xl);
    }
    .fg-article-detail__meta {
        margin-bottom: var(--fg-space-lg);
    }
    .fg-article-detail__meta > span:not(.fg-article-detail__badge) {
        margin-left: 0;
    }
    .fg-article-detail__content {
        max-width: none;
    }
}

/* ============================================================
 * 十四、品牌理念区块背景色
 * ============================================================ */
.fg-about-values--cream {
    background: var(--fg-bg-cream);
}

/* ============================================================
 * 十五、联系表单包装器
 * ============================================================ */
.fg-contact-form-wrapper {
    flex: 1;
}

/* ============================================================
 * 十六、联系区块
 * ============================================================ */
.fg-contact-section {
    padding: var(--fg-space-4xl) 0;
}

/* ============================================================
 * 十七、隐私政策 / 服务条款等单页
 * ============================================================ */
.fg-legal-hero {
    padding: 56px 0 32px;
    background: var(--fg-bg-cream);
    text-align: center;
}
.fg-legal-hero__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--fg-primary);
    margin: 0;
}
.fg-legal-hero__updated {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--fg-text-muted);
}
.fg-legal-content {
    padding: 40px 0 64px;
}
.fg-legal-body {
    max-width: 820px;
    margin: 0 auto;
    line-height: 1.9;
    color: var(--fg-text);
    font-size: var(--fg-font-size-base);
}
.fg-legal-body p {
    margin: 0 0 18px;
}
@media (max-width: 640px) {
    .fg-legal-hero {
        padding: 36px 0 24px;
    }
    .fg-legal-hero__title {
        font-size: 26px;
    }
    .fg-legal-body {
        font-size: var(--fg-font-size-sm);
    }
}

/* ============================================================
 * 十八、商品询盘弹窗（详情页「立即询盘」）
 * ============================================================ */
.fg-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 16, 12, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.fg-modal-overlay.is-active {
    display: flex;
}
.fg-modal {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    animation: fg-modal-in 0.18s ease-out;
}
@keyframes fg-modal-in {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.fg-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #f0ece8;
}
.fg-modal__header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--fg-primary);
}
.fg-modal__close {
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: var(--fg-text-muted);
    cursor: pointer;
}
.fg-modal__body {
    padding: 20px;
}
.fg-form-row {
    margin-bottom: 14px;
}
.fg-form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-text);
    margin-bottom: 6px;
}
.fg-form-row input,
.fg-form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2ddd8;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    color: var(--fg-text);
}
.fg-form-row input:focus,
.fg-form-row textarea:focus {
    outline: none;
    border-color: var(--fg-primary);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.12);
}
.fg-form-error {
    color: #d23b3b;
    font-size: 13px;
    min-height: 18px;
    margin-bottom: 10px;
}
.fg-btn-block {
    width: 100%;
}
@media (max-width: 640px) {
    .fg-modal { max-width: 100%; border-radius: 12px; }
    .fg-modal__header { padding: 14px 16px; }
    .fg-modal__body { padding: 16px; }
}