@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600&display=swap');
.pcard{--pb:#2F6B4F;--pd:#1F4D3A;--pl:#E4DCCB;--pchip:#CFE8C9;--pease:cubic-bezier(.2,0,0,1);--pstar:#D99A00;--psand:#E9DFCC;position:relative;display:flex;flex-direction:column;height:100%;border-radius:20px;background:#fff;border:1px solid var(--pl);overflow:hidden;font-family:"Google Sans Flex","Google Sans",Lato,system-ui,sans-serif;color:#1F2B29;text-align:left;transition:transform .45s var(--pease),opacity .45s var(--pease),box-shadow .45s var(--pease),border-color .22s var(--pease)}
.pcard:hover{border-color:var(--pb);transform:translateY(-4px);box-shadow:0 14px 30px rgba(5,73,73,.1)}
.pcard__img{position:relative;aspect-ratio:1/1;background:#fff;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--pl)}
.pcard__img img{position:relative;z-index:1;width:82%;height:86%;object-fit:contain;transition:transform .45s var(--pease)}
.pcard:hover .pcard__img img{transform:scale(1.05)}
.pchip{position:absolute;top:14px;left:12px;z-index:2;display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:999px;background:var(--pchip);color:var(--pd);font-size:12px;font-weight:600}
.pfav{position:absolute;top:10px;right:10px;z-index:3;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--pl);border-radius:50%;background:#fff;cursor:pointer;color:var(--pd);padding:0}
.pfav svg{width:20px;height:20px}
.pfav.is-on{color:#A9502C}.pfav.is-on svg{fill:currentColor;animation:ppop .35s var(--pease)}
@keyframes ppop{50%{transform:scale(1.25)}}
.pcard__body{display:flex;flex-direction:column;gap:6px;flex:1 1 0%;padding:14px 16px 16px}
.pcard__brand{margin:0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#A9502C}
.pcard .pcard__name{margin:0;font-family:inherit!important;font-size:17px;font-weight:500!important;line-height:1.3;letter-spacing:-.01em;color:#1F2B29}
.pcard__name a{color:inherit!important;text-decoration:none!important}
.pcard__name a::after{content:"";position:absolute;inset:0;z-index:1}
.prating{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;color:#566361}
.pstars{--v:5;display:inline-block;width:70px;height:14px;flex:0 0 auto;background:linear-gradient(90deg,var(--pstar,#D99A00) calc(var(--v) / 5 * 100%),var(--psand,#E9DFCC) 0);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") 0 0/14px 14px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") 0 0/14px 14px repeat-x}
.vn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.psold{margin:0;font-size:12px;color:#566361}
.pprice{margin:0;margin-top:auto;padding-top:6px;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:#1F2B29}
.pprice s{margin-left:6px;color:#566361;font-size:13px;font-weight:400}
.pbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;margin-top:10px;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap;background:transparent;color:var(--pb);box-shadow:inset 0 0 0 1.5px var(--pb);pointer-events:none;transition:background-color .22s var(--pease),color .22s var(--pease)}
.pbtn svg{width:18px;height:18px;transition:transform .22s var(--pease)}
.pcard:hover .pbtn{background:var(--pb);color:#fff}
.pcard:hover .pbtn svg{transform:translateX(3px)}
.vn-js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--pease),transform .6s var(--pease),box-shadow .45s var(--pease),border-color .22s var(--pease);transition-delay:calc(var(--i,0) * 70ms)}
.vn-js .reveal.is-in{opacity:1;transform:none}
.vn-js .reveal.is-in:hover{transform:translateY(-4px);transition-delay:0s}
@media(hover:hover){
.vnp__rail:hover>.pcard,.vng__grid:hover>.pcard{transform:scale(.985);opacity:.9}
.vnp__rail>.pcard:hover,.vng__grid>.pcard:hover{transform:scale(1.02) translateY(-4px);opacity:1;box-shadow:0 22px 44px rgba(5,73,73,.14);z-index:2}
}
.vnp__rail .pcard{scroll-snap-align:start}
.vnp__rail{padding:8px 4px 18px!important}
@media(max-width:749px){.pcard__body{gap:4px;padding:12px 12px 14px}.pcard .pcard__name{font-size:15px}.pprice{font-size:16px}.pbtn{min-height:44px;padding:8px 14px;font-size:14px}.pfav{top:8px;right:8px}}
@media(prefers-reduced-motion:reduce){.vn-js .reveal{opacity:1;transform:none}}