.pcg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;font-family:var(--body)}
.pcg *{box-sizing:border-box}
.pk{position:relative;display:flex;flex-direction:column;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .3s;animation:pk-in .5s cubic-bezier(.2,.8,.2,1) both}
.pk:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 26px 44px -28px rgba(6,60,35,.5)}
.pk-hit{position:absolute;inset:0;z-index:1;border-radius:inherit}
.pk-hit:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.pk-media{position:relative;aspect-ratio:1/0.86;background:radial-gradient(80% 80% at 50% 35%,var(--card),var(--soft2));overflow:hidden}
.pk-media img,.pk-media svg.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pk-media svg.ph{inset:24%;width:52%;height:52%}
.pk:hover .pk-media img,.pk:hover .pk-media svg.ph{transform:scale(1.06)}
.pk-plat{position:absolute;left:12px;top:12px;padding:3px 9px;border-radius:8px;font-size:11px;font-weight:700;color:#fff;background:#ee4d2d;letter-spacing:.01em}
.pk-plat.lazada{background:#0f146d}.pk-plat.tiktok{background:#111}
.pk-off{position:absolute;left:12px;bottom:12px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;background:var(--hot);box-shadow:0 6px 14px -8px var(--hot)}
.pk-fav{all:unset;box-sizing:border-box;cursor:pointer;z-index:2;position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(6px);box-shadow:0 4px 12px -6px rgba(0,0,0,.25);transition:transform .15s,color .2s}
.pk-fav:hover{color:#e5484d}
.pk-fav:active{transform:scale(.88)}
.pk-fav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pk-fav svg{width:19px;height:19px}
.pk-fav[aria-pressed="true"]{color:#e5484d}
.pk-fav[aria-pressed="true"] svg{animation:pk-heart .45s cubic-bezier(.3,1.6,.5,1)}
.pk-fav[aria-pressed="true"] path{fill:currentColor}
.pk-fav::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #e5484d;opacity:0;transform:scale(.6)}
.pk-fav.burst::after{animation:pk-burst .5s ease-out}

.pk-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.pk-shop{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);min-width:0}
.pk-shop span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-shop svg{flex:none;width:14px;height:14px;color:var(--accent)}
.pk-name{margin:0;font-size:15px;font-weight:600;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.pk-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:4px}
.pk-price b{font-size:26px;line-height:1.1;font-weight:700;color:var(--accent-deep);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pk-price s{font-size:13px;color:var(--muted)}

/* mini price trend */
.pk-trend{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pk-trend-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pk-vd{display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 7px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--soft);color:var(--accent-deep)}
.pk-vd svg{width:13px;height:13px;flex:none}
.pk-vd.mid{background:var(--warn-soft);color:var(--warn)}
.pk-vd.high{background:var(--hot-soft);color:var(--hot)}
.pk-n{font-size:11.5px;color:var(--muted);white-space:nowrap}
.pk-g{position:relative;height:44px}
.pk-spark{display:block;width:100%;height:100%;overflow:visible}
.pk-spark .l{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:100;animation:pk-draw 1s .3s cubic-bezier(.4,.1,.2,1) both}
.pk-spark .a{fill:url(#pk-grad);animation:pk-fade .6s .8s both}
.pk-spark .avg{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 4;opacity:.5;vector-effect:non-scaling-stroke}
.pk:hover .pk-spark .l{animation:pk-draw .9s cubic-bezier(.4,.1,.2,1)}
.pk-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2.5px var(--card);pointer-events:none;animation:pk-pop .4s 1.1s cubic-bezier(.3,1.6,.5,1) both}
.pk-dot.low{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--card);box-shadow:inset 0 0 0 2px var(--accent-deep)}
.pk-dot.now::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:pk-ping 1.8s 1.6s infinite}

/* loading skeleton */
.pk.sk{pointer-events:none}
.pk.sk .pk-media,.pk.sk .bar{background:linear-gradient(90deg,var(--soft2) 25%,var(--line) 50%,var(--soft2) 75%);background-size:200% 100%;animation:pk-shim 1.2s linear infinite}
.pk.sk .bar{display:block;height:12px;border-radius:6px}

@keyframes pk-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pk-heart{0%{transform:scale(.6)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes pk-burst{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
@keyframes pk-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes pk-fade{from{opacity:0}to{opacity:1}}
@keyframes pk-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes pk-ping{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
@keyframes pk-shim{to{background-position:-200% 0}}
@media (max-width:520px){.pcg{grid-template-columns:repeat(2,1fr);gap:10px}.pk{border-radius:18px}.pk-body{padding:10px 12px 12px}.pk-name{font-size:13.5px}.pk-price b{font-size:20px}.pk-n{display:none}.pk-vd{font-size:11px}.pk-g{height:34px}.pk-fav{width:34px;height:34px;right:8px;top:8px}.pk-plat{left:8px;top:8px}}
@media (prefers-reduced-motion:reduce){.pcg *{animation:none!important;transition:none!important}}
/* Keep CartFin's neutral themes and integrate the supplied card design. */
:root{--warn:#a86b07;--warn-soft:#fdf3dc}:root[data-theme="dark"]{--warn:#f0b443;--warn-soft:#302710}.product-grid.pcg{gap:18px}.pk.shopping-card{border-radius:22px;background:var(--card)}.pk .pk-hit{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}.pk .pk-hit:focus-visible{outline-offset:-3px}.pk .pk-media{background:radial-gradient(ellipse at 50% 35%,var(--card),var(--surface-subtle))}.pk .pk-media img{object-fit:contain;padding:18px}.pk .pk-fav{border:0}.pk .pk-body{min-width:0}.pk .pk-demo{font-size:9px;color:var(--muted);margin-top:7px}.pk .pk-g{margin-right:4px}.pk .pk-dot.now::after{animation-iteration-count:3}.pk .pk-n{font-size:10px}.pk .pk-vd{font-size:11px}.pk .pk-trend{margin-top:auto;padding-top:10px}.pk .pk-name{font-size:14px}.pk .pk-price b{font-size:26px}.pk .pk-price s{font-size:12px}@media(max-width:520px){.product-grid.pcg{gap:10px}.pk.shopping-card{border-radius:18px}.pk .pk-body{padding:11px 12px 13px}.pk .pk-name{font-size:12px;min-height:3.1em;line-height:1.55}.pk .pk-price b{font-size:21px}.pk .pk-price s{font-size:10px}.pk .pk-shop{font-size:10px}.pk .pk-vd{font-size:9px;padding:4px 7px}.pk .pk-off{font-size:10px;left:8px;bottom:8px}.pk .pk-plat{font-size:9px}.pk .pk-demo{font-size:8px}.pk .pk-media img{padding:14px}}
/* Fill the entire product-card image area, preserving image proportions. */
.pk .pk-media img{padding:0;object-fit:cover;object-position:center;border-radius:0}