/* ===================================================================
   v1-1 列表用商品卡（grid 版）

   首頁「精選禮盒／熱門選品」是橫向捲動列，卡片樣式散在
   legacy/v1/css/index.css 的 .featured-giftbox-block / .featured-recommend-block
   底下（index.css 只有首頁會載）。列表頁要長一樣，就把那組卡片規則在這裡
   以 .v11-product-grid 為範圍重寫一份，改吃 grid 版面。

   ⚠️ 改首頁卡片外觀時，這支要一起改（兩邊的視覺契約是「同一張卡」）。
   資料面沒有這個問題：兩邊都走 HomeProductPayloadService::cardPayload()。
   =================================================================== */

/* ── 版面 ── */
.v11-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    gap: 3.2rem 2.4rem;
}

.v11-product-grid .products-item {
    position: relative;
    width: auto;
    min-width: 0;
    flex: initial;   /* 蓋掉首頁捲動列的 flex: 0 0 28rem */
}

.v11-product-grid .products-item > a {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

/* ── 圖 ── */
.v11-product-grid .product-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--sgtn-warm-sand, #EFE7DC);
}

.v11-product-grid .product-img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: 1px solid #f0f0f0;
    transition: transform 0.35s ease, filter 0.35s ease, box-shadow 0.35s ease;
    transform-origin: center center;
}

.v11-product-grid .products-item > a:hover img,
.v11-product-grid .products-item > a:focus-visible img {
    transform: scale(1.05);
    filter: brightness(1.04) saturate(1.05);
    box-shadow: 0 18px 36px rgba(32, 18, 16, 0.16);
}

/* ── 徽章疊（左下）── */
.v11-product-grid .badge-stack {
    position: absolute;
    left: 0;
    bottom: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    z-index: 5;
    pointer-events: none;
}

/* 進了 badge-stack 就回正常流，不再各自絕對定位 */
.v11-product-grid .badge-stack .ip-cert-badge,
.v11-product-grid .badge-stack .badge-social-count,
.v11-product-grid .badge-stack .badge-limited,
.v11-product-grid .badge-stack .badge-recent-purchase {
    position: static;
    bottom: auto;
}

.v11-product-grid .badge-recent-purchase {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(180, 60, 0, 0.88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 4px 12px 4px 10px;
    border-radius: 0 4px 4px 0;
    letter-spacing: 0.03em;
    pointer-events: none;
    border-left: 3px solid #ffb347;
}
.v11-product-grid .badge-recent-purchase i { color: #ffb347; font-size: 1.1rem; }

.v11-product-grid .badge-social-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(28, 13, 12, 0.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 4px 12px 4px 10px;
    border-radius: 0 4px 4px 0;
    letter-spacing: 0.03em;
    pointer-events: none;
    border-left: 3px solid #e74c6a;
}
.v11-product-grid .badge-social-count i { color: #e74c6a; font-size: 1.1rem; }

.v11-product-grid .badge-limited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(90deg, var(--sgtn-terracotta) 0%, #E08770 100%);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 3px 12px 3px 10px;
    border-radius: 0 4px 4px 0;
    letter-spacing: 0.04em;
    pointer-events: none;
    animation: badge-pulse 2.5s ease-in-out infinite;
}
.v11-product-grid .badge-limited i { font-size: 1.1rem; }

.v11-product-grid .badge-limited--new {
    background: linear-gradient(90deg, #5a3a00 0%, #8a5a00 100%);
    border-left: 3px solid var(--sgtn-fort-gold);
    color: var(--sgtn-fort-gold);
}

.v11-product-grid .ip-cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--sgtn-celadon);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 3px 10px 3px 8px;
    border-radius: 0 4px 4px 0;
    letter-spacing: 0.04em;
    pointer-events: none;
}
.v11-product-grid .ip-cert-badge i { font-size: 1rem; }

@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* ── 情境角標（右上）── */
.v11-product-grid .giftbox-occasion-tag {
    position: absolute;
    right: 0;
    top: 4rem;   /* 與首頁同高，且讓開右上角的收藏愛心 */
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #fff;
    padding: 3px 12px 3px 10px;
    border-radius: 4px 0 0 4px;
    z-index: 5;
    pointer-events: none;
}

/* 六大情境色：原本只寫在首頁專用的 index.css，列表頁沒載會變成白字透明底（看不見）。
   另外七種（婚禮／彌月／探病／畢業／退休／節慶／預設）由 site-header 的 v1-1 區塊全站供應。 */
.v11-product-grid .giftbox-occasion-tag--housewarming { background: var(--sgtn-sage-deep); }
.v11-product-grid .giftbox-occasion-tag--birthday     { background: var(--sgtn-terracotta); }
.v11-product-grid .giftbox-occasion-tag--promotion    { background: var(--sgtn-corp-deep); }
.v11-product-grid .giftbox-occasion-tag--corporate    { background: var(--sgtn-coffee); }
.v11-product-grid .giftbox-occasion-tag--opening      { background: var(--sgtn-mustard-deep); }
.v11-product-grid .giftbox-occasion-tag--souvenir     { background: var(--sgtn-water-deep); }

/* ── 大材積（左上）：與左下徽章疊、右上情境標都不打架 ── */
.v11-product-grid .v11-card-bulky {
    position: absolute;
    left: 0;
    top: 1.6rem;
    background: var(--sgtn-coffee, #3A1E17);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 0 4px 4px 0;
    z-index: 5;
    pointer-events: none;
}

/* ── 文字區 ── */
.v11-product-grid .product-info {
    padding-top: 0.2rem;
}

.v11-product-grid p.product-category {
    font-size: 1.4rem;
    line-height: 1.4rem;
    margin: 1rem 0 0.5rem;
    color: var(--sgtn-muted-text, #7A6A5F);
}

.v11-product-grid .product-name h4 {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 0.4rem;
    /* 名稱長短不一時仍讓價格對齊：固定兩行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.8rem;
}

.v11-product-grid .product-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--sgtn-terracotta);
    line-height: 1.4;
    font-family: var(--font-en);
}

.v11-product-grid .product-price span {
    font-size: 1.3rem;
    font-weight: 400;
    margin-right: 0.2rem;
}

/* ── 收藏愛心 ── */
.v11-product-grid .bookmark {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 9;
    color: #d0d0d0;
}

/* ── RWD ── */
@media (max-width: 991px) {
    .v11-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
        gap: 2.6rem 1.8rem;
    }
}

@media (max-width: 575px) {
    .v11-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.2rem 1.2rem;
    }
    .v11-product-grid .product-name h4 { font-size: 1.5rem; min-height: 4.5rem; }
    .v11-product-grid .product-price { font-size: 1.8rem; }
    /* 窄卡放不下三段徽章，只留最有推力的一段 */
    .v11-product-grid .badge-stack .badge-social-count { display: none; }
    /* 卡片只剩一半寬，情境標與愛心同時收斂，免得角標比商品還搶眼 */
    .v11-product-grid .giftbox-occasion-tag,
    .v11-product-grid .v11-card-bulky {
        font-size: 1rem;
        padding: 2px 8px;
        top: 3.4rem;
    }
    .v11-product-grid .bookmark i { font-size: 1.7rem; }
}