/* =============================================================
   乳牙惠惠 · 设计系统样式
   主题：温暖珊瑚 / 玫红（母婴导购），卡片化、层次分明
   依赖：Tailwind Play CDN（原子类）+ 本文件（组件 / 变量 / 动效）
   ============================================================= */

/* ---------- 设计令牌 ---------- */
:root {
    --brand-coral: #FF7A45;   /* 主品牌·珊瑚橙 */
    --brand-pink:  #FF4D6D;   /* 价格 / 券·玫红 */
    --brand-soft:  #FFB199;   /* 浅色点缀 */
    --accent:      #FF7A45;   /* 强调色（分页/焦点） */
    --accent-soft: #FFEAE0;   /* 浅强调（hover 背景） */
    --cream:       #FFF7F2;   /* 奶油底 */
    --bg:          #FFFDFB;   /* 页面底 */
    --text-main:   #2A2320;   /* 主文字（暖近黑） */
    --text-sub:    #8C8079;   /* 次文字 */
    --border:      #F1E7E0;   /* 描边 */
    --success:     #12B76A;   /* 省 / 成功 */

    --shadow-sm: 0 2px 10px rgba(255, 107, 61, .08);
    --shadow-md: 0 12px 30px rgba(255, 77, 109, .14);
    --radius: 16px;
    --radius-lg: 24px;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
                 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background:
        radial-gradient(1100px 420px at 85% -12%, rgba(255, 122, 69, .12), transparent 60%),
        radial-gradient(900px 380px at -5% 0%, rgba(255, 77, 109, .10), transparent 55%),
        linear-gradient(180deg, #FFFDFB 0%, #FFF6F1 45%, #FFFDFB 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: rgba(255, 122, 69, .22); color: var(--text-main); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
code {
    background: var(--accent-soft);
    color: var(--brand-pink);
    padding: 1px 6px; border-radius: 6px; font-size: .85em;
}

/* ---------- 顶栏（毛玻璃吸顶） ---------- */
.glass {
    background: rgba(255, 253, 251, .72);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid rgba(241, 231, 224, .85);
    box-shadow: 0 4px 20px rgba(255, 107, 61, .06);
}

/* ---------- 主按钮 / 核心 CTA ---------- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35em;
    background: linear-gradient(135deg, var(--brand-coral), var(--brand-pink));
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(255, 107, 61, .28);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(255, 77, 109, .40);
    filter: saturate(1.05);
}

/* 领券购买：最强视觉焦点 —— 渐变 + 脉冲发光 + 放大悬浮 */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    background: linear-gradient(135deg, var(--brand-coral), var(--brand-pink));
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .02em;
    padding: 15px 30px;
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(255, 77, 109, .38);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    animation: pulseGlow 2.2s ease-in-out infinite;
}
.btn-cta:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 16px 34px rgba(255, 77, 109, .50);
    filter: saturate(1.08);
}
.btn-cta:active { transform: translateY(0) scale(.99); }

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 10px 26px rgba(255, 77, 109, .32); }
    50%      { box-shadow: 0 10px 32px rgba(255, 77, 109, .60); }
}

/* ---------- 商品卡片 ---------- */
.goods-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.goods-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-soft);
}
/* 图片容器：裁剪 + 悬浮放大 */
.goods-card .aspect-square { position: relative; overflow: hidden; }
.goods-card img { transition: transform .42s ease; }
a.goods-card:hover img { transform: scale(1.06); }

/* 卡片悬浮浮现“领券购买”浮层（仅带图商品卡） */
a.goods-card:has(img) .aspect-square::after {
    content: "领券购买 ›";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    padding: 10px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    background: linear-gradient(135deg, var(--brand-coral), var(--brand-pink));
    transform: translateY(100%);
    opacity: 0;
    transition: transform .26s ease, opacity .26s ease;
}
a.goods-card:has(img):hover .aspect-square::after {
    transform: translateY(0);
    opacity: 1;
}

/* ---------- 优惠券角标 ---------- */
.coupon-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #FF5C8A, #FF3D6E);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 8px 8px 8px 0;
    box-shadow: 0 4px 10px rgba(255, 61, 110, .30);
    animation: badgeFloat 2.8s ease-in-out infinite;
}
@keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* ---------- 文字渐变 / 头图 ---------- */
.text-gradient {
    background: linear-gradient(120deg, var(--brand-coral), var(--brand-pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-gradient {
    background:
        radial-gradient(1200px 420px at 82% -10%, rgba(255, 122, 69, .18), transparent 60%),
        radial-gradient(900px 360px at 0% 0%, rgba(255, 77, 109, .14), transparent 55%),
        linear-gradient(180deg, #FFF6F1, #FFFDFB);
}

/* ---------- 面包屑 ---------- */
.breadcrumb { color: var(--text-sub); }
.breadcrumb a { color: var(--text-sub); transition: color .15s ease; }
.breadcrumb a:hover { color: var(--brand-coral); }

/* ---------- 分页 / 翻页 ---------- */
.pagination a,
.pagination span,
.mt-8.flex a,
.mt-8.flex span {
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* ---------- FAQ 折叠 ---------- */
details.goods-card summary {
    list-style: none;
    outline: none;
}
details.goods-card summary::-webkit-details-marker { display: none; }
details.goods-card summary::after {
    content: "+";
    float: right;
    font-size: 20px;
    color: var(--brand-coral);
    line-height: 1;
    transition: transform .2s ease;
}
details.goods-card[open] summary::after { content: "\2212"; }

/* ---------- 入场动画 ---------- */
.fade-up {
    opacity: 0;
    transform: translateY(16px);
    animation: fadeUp .7s ease forwards;
}
.fade-up:nth-child(2) { animation-delay: .08s; }
.fade-up:nth-child(3) { animation-delay: .16s; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* =============================================================
   响应式：移动端适配与“领券购买”吸底栏
   ============================================================= */
.mobile-buybar { display: none; }

@media (max-width: 640px) {
    /* 头图更紧凑 */
    .hero-gradient .py-12,
    .hero-gradient [class*="py-12"] { padding-top: 2rem; padding-bottom: 2rem; }

    /* 商品网格两列已在 Tailwind 控制；此处收紧间距 */
    .grid.gap-4 { gap: .7rem; }

    /* 桌面端详情页内 CTA 收起，改用吸底栏 */
    .detail-cta { display: none; }

    /* 移动端吸底购买栏：始终可见的核心入口 */
    .mobile-buybar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 60;
        align-items: center;
        gap: 12px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 253, 251, .94);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 22px rgba(0, 0, 0, .07);
    }
    .mobile-buybar .price-label { font-size: 10px; color: var(--text-sub); }
    .mobile-buybar .price-value {
        font-weight: 900;
        font-size: 20px;
        line-height: 1;
        color: var(--brand-pink);
    }
    .mobile-buybar .btn-cta { flex: 1; padding: 13px 0; font-size: 1rem; }

    /* 给吸底栏留出空间 */
    body { padding-bottom: 76px; }
}

/* ---------- 分类切换条（一行横向滑动） ---------- */
.cat-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox 隐藏滚动条 */
}
.cat-bar::-webkit-scrollbar { display: none; }   /* WebKit 隐藏滚动条 */
.cat-bar > * { flex: 0 0 auto; }
.cat-chip {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1.05rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border);
    font-size: .9rem;
    color: var(--text-sub);
    white-space: nowrap;
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
    user-select: none;
}
.cat-chip:hover {
    color: var(--brand-coral);
    border-color: var(--brand-coral);
}
.cat-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(255, 77, 109, .25);
}

/* 尊重“减少动效”偏好 */
@media (prefers-reduced-motion: reduce) {
    .fade-up { opacity: 1; transform: none; animation: none; }
    .btn-cta { animation: none; }
    .coupon-badge { animation: none; }
    html { scroll-behavior: auto; }
}

/* ---------- 活动福利专区 ---------- */
.act-card {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.15rem 1.2rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.act-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-coral);
}
.act-card__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .55rem;
}
.act-card__icon {
    font-size: 1.5rem;
    line-height: 1;
}
.act-card__tag {
    font-size: .68rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    padding: .15rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.act-card__title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-main);
}
.act-card__desc {
    margin-top: .35rem;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--text-sub);
    flex: 1 1 auto;
}
.act-card__cta {
    margin-top: .85rem;
    align-self: flex-start;
    font-size: .85rem;
    font-weight: 600;
    color: var(--brand-coral);
}