/* DP Redeem listing — Figma node 9:386. Values use the site's 750px canvas. */

body { background: #f4f2ea; }

#wrapper.redeem-listing-page {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 190px;
    background: var(--ds-bg);
    color: var(--ds-text);
    font-family: var(--ds-font);
    box-sizing: border-box;
}

.redeem-hero {
    position: relative;
    overflow: hidden;
    padding: 35px 22px 14px;
    background: var(--ds-primary);
    border-radius: 0 0 67px 67px;
}
.redeem-hero::before,
.redeem-hero::after {
    content: "";
    position: absolute;
    width: 440px;
    height: 300px;
    border-radius: 50%;
    background: rgba(176, 155, 54, .34);
    pointer-events: none;
}
.redeem-hero::before { top: -210px; left: -150px; }
.redeem-hero::after { right: -180px; top: -50px; }

.redeem-balance-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0 12px 12px;
}
.redeem-balance {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #fff;
    text-decoration: none;
}
.redeem-balance-label { font-size: 22px; line-height: 28px; }
.redeem-balance-value {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 27px/34px var(--ds-font);
}
.redeem-balance-value strong { font: 600 40px/42px var(--ds-font-num); }
.redeem-coin {
    width: 42px;
    height: 42px;
    background: url("/images/redesign/gift-icon.png") center/contain no-repeat;
}
.redeem-help {
    width: 72px;
    height: 72px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font: 600 32px/1 var(--ds-font);
    text-decoration: none;
}

.listing-search {
    position: relative;
    z-index: 1;
    height: 90px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 24px;
    border-radius: 999px;
    background: #fff;
    box-sizing: border-box;
}
.listing-search svg { width: 30px; height: 30px; color: var(--ds-text-tertiary); flex: 0 0 auto; }
.listing-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ds-text);
    font: 400 26px/1.4 var(--ds-font);
}
.listing-search input::placeholder { color: var(--ds-placeholder); }

.redeem-discovery {
    padding: 23px 30px 18px;
    background: #fff;
}
.listing-section-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ds-text);
    font-size: 41px;
    line-height: 52px;
    font-weight: 600;
    text-decoration: none;
}

.redeem-category-carousel {
    display: flex;
    margin: 20px -30px 0;
    padding: 0 30px 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.redeem-category-carousel::-webkit-scrollbar { display: none; }
.redeem-category-item {
    width: 207px;
    flex: 0 0 207px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ds-text);
    font: 400 22px/30px var(--ds-font);
    scroll-snap-align: start;
}
.redeem-category-image {
    position: relative;
    width: 134px;
    height: 134px;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 45px;
    /* 產品縮圖統一加灰色底（client feedback 2026-08 p.3）：白底去背相
       用 multiply 溶入灰底，令縮圖唔會浮喺白色上面 */
    background: var(--ds-media-bg);
    box-shadow: 0 0 0 0 var(--ds-primary-bright);
    transition: box-shadow .18s ease;
}
.redeem-category-item.is-active .redeem-category-image { box-shadow: 0 0 0 5px var(--ds-primary-bright); }
.redeem-category-image img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; }
/* No representative product image → soft tinted chip with a subtle tag glyph. */
.redeem-category-image.is-empty {
    display: flex; align-items: center; justify-content: center;
    background: var(--ds-bg-secondary);
}
/* 有真圖時藏起 glyph：multiply 令白色像素透底，唔可以再靠張圖冚住佢 */
.redeem-category-image:not(.is-empty) .redeem-category-glyph { display: none; }
.redeem-category-glyph {
    position: absolute;
    inset: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
    color: var(--ds-text-tertiary);
    box-shadow: 0 8px 24px rgba(65, 47, 103, .10);
}
.redeem-category-glyph svg { width: 48px; height: 48px; }

.redeem-control-bar {
    display: flex;
    align-items: center;
    padding: 0 22px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(12, 12, 13, .08);
}
.redeem-filter-button {
    min-width: 149px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 11px 0;
    padding: 0 22px;
    border: 2px solid var(--ds-border);
    border-radius: 999px;
    background: var(--ds-bg);
    color: var(--ds-text-tertiary);
    font: 500 30px/1 var(--ds-font);
}
.redeem-filter-button svg { width: 32px; height: 32px; }
.listing-sort {
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ds-primary);
    font: 400 24px/1.2 var(--ds-font);
    text-align: left;
}
.listing-sort svg { width: 28px; height: 28px; transition: transform .18s ease; }
.listing-sort.is-ascending svg { transform: scaleY(-1); }

#product-list-container { padding: 11px; }
#product-list-container .content-list {
    /* Explicit 2-column grid — the previous column-count masonry let the
       first tall card push its neighbour into the second column, leaving a
       hole at the top right. Grid keeps reading order and row alignment. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 0 20px;
}
.redeem-product-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    color: var(--ds-text);
    text-decoration: none;
    box-shadow: var(--ds-shadow-100);
}
.redeem-product-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* 產品大圖統一加灰色底（client feedback 2026-08 p.3）*/
    background: var(--ds-media-bg);
}
.redeem-product-image img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; }
.redeem-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ds-primary-bright);
    color: #fff;
    font-size: 18px;
    line-height: 24px;
}
.redeem-card-badge-hot { top: 48px; background: #dc2626; }
.redeem-product-copy { padding: 14px 14px 17px; }
.redeem-product-brand {
    overflow: hidden;
    color: var(--ds-text-tertiary);
    font-size: 22px;
    line-height: 28px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.redeem-product-title {
    min-height: 64px;
    color: var(--ds-text);
    font-size: 29px;
    line-height: 34px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.redeem-product-hk { margin-top: 8px; color: var(--ds-text-secondary); font: 400 23px/28px var(--ds-font-num); }
.redeem-product-points {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--ds-text-secondary);
    font: 400 23px/28px var(--ds-font-num);
}
.redeem-product-points .rp-coin { width: 27px; height: 27px; flex-basis: 27px; }

#product-list-container .load-more-footer,
#product-list-container .empty-state,
#product-list-container .load-status,
#product-list-container .load-error,
#product-list-container .no-more-data {
    font: 400 24px/34px var(--ds-font);
}

.redeem-filter-sheet {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: none;
    font-family: var(--ds-font);
}
.redeem-filter-sheet.is-open { display: block; }
.redeem-filter-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(39, 36, 18, .46);
}
.redeem-filter-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 72%;
    overflow-y: auto;
    padding: 32px 30px 55px;
    border-radius: 40px 40px 0 0;
    background: #fff;
    box-sizing: border-box;
}
.redeem-filter-panel-head { display: flex; align-items: center; }
.redeem-filter-panel-head h2 { margin: 0; color: var(--ds-text); font-size: 38px; line-height: 48px; }
.redeem-filter-panel-head button {
    width: 64px;
    height: 64px;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--ds-text-tertiary);
    font-size: 50px;
}
.redeem-filter-panel h3 { margin: 28px 0 16px; color: var(--ds-text); font-size: 28px; }
.redeem-brand-options { display: flex; flex-wrap: wrap; gap: 14px; }
.redeem-brand-options button {
    padding: 14px 22px;
    border: 2px solid var(--ds-border);
    border-radius: 999px;
    background: var(--ds-bg);
    color: var(--ds-text-secondary);
    font: 400 25px/30px var(--ds-font);
}
.redeem-brand-options button.is-active {
    border-color: var(--ds-primary);
    background: var(--ds-primary-tint);
    color: var(--ds-primary);
}