/* ============================================================
   Cartoon 默认主题 - 首页商品列表（大框横向列表）
   复用系统通用 JS/接口，只改首页渲染与外观。
   颜色沿用 index.css 里的 --acg-* 变量。
   ============================================================ */

.goods-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 单个商品大框 */
.gl-item {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--acg-card-bg, #fff);
    border: 1px solid var(--acg-border, #e5e7eb);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 8px 24px rgba(82, 63, 105, .06);
    transition: transform .15s, box-shadow .15s, border-color .15s;
    color: var(--acg-text-strong, #111319);
    box-sizing: border-box;
    width: 100%;
}

.gl-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(82, 63, 105, .14);
    border-color: var(--acg-primary, #7a8cff);
}

/* 缩略图（大） */
.gl-thumb {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    flex-shrink: 0;
    background-color: #f5f6f8;
}

/* 中部主体 */
.gl-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gl-name {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.gl-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--acg-text-muted, #6b7280);
    font-size: .95rem;
}

.gl-stat i { margin-right: 3px; }

/* 右侧价格 + 按钮 */
.gl-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    flex-shrink: 0;
    min-width: 120px;
}

.gl-price {
    color: var(--acg-danger, #ff6b88);
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.gl-price .unit { font-size: 1rem; margin-right: 2px; }

.gl-buy {
    display: inline-block;
    background: var(--acg-primary, #7a8cff);
    color: #fff;
    padding: 8px 22px;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
}

.gl-item:hover .gl-buy { opacity: .92; }

/* 徽章/标签 */
.gl-tags .badge-soft,
.gl-tags .acg-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.7;
}

.gl-tags .badge-soft-success { background: #e6f7ee; color: #1a9d5a; }
.gl-tags .badge-soft-primary { background: #eef0ff; color: var(--acg-primary, #7a8cff); }
.gl-tags .acg-tag--red { background: #ffecec; color: #e14b4b; }
.gl-tags .acg-tag--blue { background: #e8f1ff; color: #3b82f6; }
.gl-tags .acg-tag--green { background: #e6f7ee; color: #1a9d5a; }
.gl-tags .acg-tag--orange { background: #fff2e0; color: #e08a1e; }
.gl-tags .acg-tag--purple { background: #f0e8ff; color: #8b5cf6; }

/* 售罄态 */
.gl-item.soldout { opacity: .65; }
.gl-item.soldout .gl-buy { background: #b5b9c4; cursor: not-allowed; }

.gl-empty {
    padding: 40px;
    text-align: center;
    color: var(--acg-text-muted, #6b7280);
    width: 100%;
}

/* ---------------- “购买”下的分类按钮(chip)：整体放大一点点 ---------------- */
.chip {
    padding: .55rem 1.25rem;
    font-size: 1.35rem;
}
.chip .chip-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* ---------------- 商品详情页封面：外框不变，图片按原比例自适应，留白透明 ---------------- */
/* 封面卡片背景透明、去掉阴影，让 contain 的留白透出底层面板 */
.acg-card.acg-cover {
    background: transparent;
    box-shadow: none;
    cursor: default;
    align-items: center;
    justify-content: center;
}

/* 图片不再裁剪填满：按原比例居中，只占框的约 80%，四周留透明边距 */
.acg-cover .item-cover {
    position: static;
    object-fit: contain;
    width: auto;
    height: auto;
    max-width: 70%;
    max-height: 70%;
    margin: auto;
}

/* ---------------- 平板/手机适配（≤768px）：价格与按钮换到底部整行 ---------------- */
@media (max-width: 768px) {
    .goods-list { gap: 12px; }

    .gl-item {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 14px;
        padding: 14px;
    }

    .gl-thumb {
        width: 76px;
        height: 76px;
        border-radius: 12px;
    }

    /* 中部占满除缩略图外的宽度 */
    .gl-main {
        flex: 1 1 0;
        gap: 6px;
    }

    .gl-name {
        font-size: 1.08rem;
        -webkit-line-clamp: 3;
    }

    .gl-stats { gap: 12px; font-size: .9rem; }

    /* 右栏整行铺满，价格靠左、按钮靠右 */
    .gl-side {
        flex-basis: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-width: 0;
        width: 100%;
        gap: 10px;
        padding-top: 10px;
        border-top: 1px dashed var(--acg-border, #e5e7eb);
    }

    .gl-price { font-size: 1.5rem; }

    .gl-buy { padding: 9px 26px; font-size: 1rem; }
}

/* ---------------- 小屏手机（≤400px）：进一步压缩 ---------------- */
@media (max-width: 400px) {
    .gl-item { gap: 10px; }
    .gl-thumb { width: 60px; height: 60px; }
    .gl-name { font-size: 1rem; }
    .gl-stats { gap: 8px; font-size: .82rem; }
    .gl-price { font-size: 1.3rem; }
    .gl-buy { padding: 8px 18px; font-size: .92rem; }
}