/* 积分商城商品卡候选：复用真实封面与原有交互。 */
#points-mall .pm-grid { gap: 16px; }
#points-mall .pm-product {
  --pm-art-col: clamp(94px, 36%, 132px);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: var(--pm-art-col) minmax(0, 1fr);
  grid-template-areas: "cover type" "cover name" "cover desc" "foot foot";
  grid-template-rows: auto auto 1fr auto; align-items: start; column-gap: 17px;
  min-height: 264px; padding: 20px; border-radius: 14px;
  box-shadow: 0 2px 8px rgba(45,44,38,.025);
}
#points-mall .pm-product::after {
  content: ""; position: absolute; z-index: -1; left: 14px; top: 14px;
  width: clamp(106px, calc(36% - 2.4px), 144px); height: 168px; border-radius: 9px;
  background: var(--yf-primary-soft, #e4e8e7);
  background: color-mix(in srgb, var(--yf-border, #d4d9dc) 19%, var(--yf-surface, #fffefa));
}
#points-mall .pm-product > .pm-product-type {grid-area:type; margin: 5px 0 12px; font-size: 12px; letter-spacing:.025em;}
#points-mall .pm-product > h3 {grid-area:name; font-size:17px; line-height:1.45; letter-spacing:.01em;}
#points-mall .pm-product > p {grid-area:desc; font-size:13px; line-height:1.65; margin:9px 0 12px;}
#points-mall .pm-product > .pm-product-foot {grid-area:foot; align-self:end; align-items:center; margin-top:20px; padding-top:16px; border-top:1px solid var(--yf-border, #d4d9dc);}
#points-mall .pm-product-foot strong {font-size:22px; letter-spacing:-.02em;}
#points-mall .pm-product-foot .pm-button {padding:9px 13px;}
@supports selector(:has(*)) {
 #points-mall .pm-product:has(> .pm-product-foot > button[data-pm-product^="materials_"]) {
  display:grid; grid-template-columns:var(--pm-art-col) minmax(0,1fr);
  grid-template-areas:"cover type" "cover name" "cover desc" "foot foot";
  grid-template-rows:auto auto 1fr auto; column-gap:17px;
 }
 #points-mall .pm-product:has(> .pm-product-foot > button[data-pm-product^="materials_"])::before {
  grid-area:cover; align-self:start; justify-self:center; margin:0; pointer-events:none;
 }
 #points-mall .pm-product:has(> .pm-product-foot > button:is([data-pm-product="materials_chinese"],[data-pm-product="materials_math"],[data-pm-product="materials_english"],[data-pm-product="materials_physics"],[data-pm-product="materials_chemistry"],[data-pm-product="materials_biology"],[data-pm-product="materials_history"],[data-pm-product="materials_geography"],[data-pm-product="materials_politics"]))::before {
  width:min(100%, 105px);
 }
 #points-mall .pm-product:has(> .pm-product-foot > button:is([data-pm-product="materials_arts"],[data-pm-product="materials_science"]))::before {
  width:100%; margin:10px 0 0;
 }
 #points-mall .pm-product:has(> .pm-product-foot > button:not([data-pm-product^="materials_"]))::before {
  content:""; display:flex; grid-area:cover; align-items:center; justify-content:center;
  width:100%; height:154px; color:var(--yf-primary, #1b3768); font-size:15px;
  font-weight:650; letter-spacing:.06em; opacity:.8; pointer-events:none;
 }
 #points-mall .pm-product:has(> .pm-product-foot > button[data-pm-product="system"])::before {content:"YFLOS"}
 #points-mall .pm-product:has(> .pm-product-foot > button[data-pm-product="notebook"])::before {content:"错题本"}
 #points-mall .pm-product:has(> .pm-product-foot > button[data-pm-product="learning"])::before {content:"学习力"}
 #points-mall .pm-product:has(> .pm-product-foot > button[data-pm-product="training"])::before {content:"1v2"}
 #points-mall .pm-product:has(> .pm-product-foot > button[data-pm-product^="materials_"]) > .pm-product-type {grid-area:type; margin:5px 0 12px}
 #points-mall .pm-product:has(> .pm-product-foot > button[data-pm-product^="materials_"]) > h3 {grid-area:name}
 #points-mall .pm-product:has(> .pm-product-foot > button[data-pm-product^="materials_"]) > p {grid-area:desc; margin:9px 0 12px}
 #points-mall .pm-product:has(> .pm-product-foot > button[data-pm-product^="materials_"]) > .pm-product-foot {grid-area:foot; margin-top:20px; padding-top:16px}
}
@media(max-width:520px) {
 #points-mall .pm-product {--pm-art-col: 36%; min-height:236px; padding:18px; column-gap:15px}
 #points-mall .pm-product::after {left:12px; top:12px; height:154px; width:calc(36% - .96px)}
 #points-mall .pm-product:has(> .pm-product-foot > button[data-pm-product^="materials_"]) {column-gap:15px}
 #points-mall .pm-product:has(> .pm-product-foot > button:not([data-pm-product^="materials_"]))::before {height:140px}
}

/* 商城顶部及筛选区与卡片统一，继续继承首页主题变量。 */
#points-mall .pm-wallet {box-shadow:0 2px 8px rgba(45,44,38,.025); border-radius:14px}
#points-mall .pm-wallet div {gap:10px}
#points-mall .pm-tabs {gap:28px}
#points-mall .pm-tabs button {padding-bottom:14px}
#points-mall .pm-section-head p {margin-top:6px}
#points-mall .pm-filters {gap:14px; margin:20px 0 22px}
#points-mall .pm-filters :is(input, select) {border-radius:9px}
@media(max-width:520px){#points-mall .pm-tabs{gap:20px}}

/* 旧浏览器保持原来的纯文字卡片，不产生空图片位。 */
@supports not selector(:has(*)) {
 #points-mall .pm-product {display:flex; flex-direction:column; min-height:205px}
 #points-mall .pm-product::after {display:none}
 #points-mall .pm-product > .pm-product-foot {width:100%; margin-top:auto}
}