.fv{display:flex;flex-direction:column;gap:24px;font-family:var(--body);color:var(--ink)}
.fv *{box-sizing:border-box}
.fv [hidden]{display:none!important}
.fv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fv-head h1{margin:0;font-size:clamp(24px,3.2vw,30px);line-height:1.25;font-weight:700}
.fv-sub{margin:4px 0 0;font-size:14px;color:var(--muted)}
.fv-sub b{color:var(--ink);font-variant-numeric:tabular-nums}

/* notification switch */
.fv-ntf{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:12px;padding:8px 10px 8px 8px;border-radius:16px;background:var(--card);border:1.5px solid var(--line);transition:border-color .25s,background .25s,box-shadow .25s}
.fv-ntf:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.fv-ntf:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent)}
.fv-ntf .bell{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--field);color:var(--muted);transition:background .25s,color .25s}
.fv-ntf .bell svg{transform-origin:50% 10%}
.fv-ntf .txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.fv-ntf b{font-size:14px;font-weight:600}
.fv-ntf small{font-size:12px;color:var(--muted)}
.fv-ntf .sw{position:relative;flex:none;margin-left:6px;width:42px;height:24px;border-radius:999px;background:var(--line);transition:background .25s}
.fv-ntf .sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.fv-ntf[aria-checked="true"]{background:var(--soft2);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.fv-ntf[aria-checked="true"] .bell{background:var(--accent);color:#fff}
.fv-ntf[aria-checked="true"] .bell svg{animation:fv-ring .8s ease}
.fv-ntf[aria-checked="true"] .sw{background:var(--accent)}
.fv-ntf[aria-checked="true"] .sw i{transform:translateX(18px)}
.fv-ntf[aria-checked="true"] small{color:var(--accent-deep)}
@keyframes fv-ring{0%,100%{transform:rotate(0)}20%{transform:rotate(18deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(9deg)}80%{transform:rotate(-5deg)}}

/* shop group */
.fv-groups{display:flex;flex-direction:column;gap:28px}
.fv-group{display:flex;flex-direction:column;gap:12px;animation:fv-in .45s cubic-bezier(.2,.8,.2,1) both}
.fv-group.out{animation:fv-out .35s ease forwards}
.fv-ghead{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.fv-av{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(140deg,color-mix(in srgb,var(--c,var(--accent)) 80%,#fff),var(--c,var(--accent)))}
.fv-ghead h2{margin:0;font-size:17px;font-weight:700;line-height:1.3}
.fv-ghead small{display:block;font-size:12.5px;color:var(--muted)}
.fv-ghead .deal{margin-left:auto;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--ok-soft);color:var(--ok);white-space:nowrap}
.fv-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fv-list>*{min-width:0}

/* horizontal card */
.fc{position:relative;display:flex;gap:14px;padding:12px;border-radius:18px;background:var(--card);border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s,opacity .3s;animation:fv-in .45s cubic-bezier(.2,.8,.2,1) both}
.fc:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 18px 32px -24px color-mix(in srgb,var(--accent) 70%,transparent)}
.fc.out{animation:fv-out .35s ease forwards;pointer-events:none}
.fc-hit{position:absolute;inset:0;z-index:1;border-radius:inherit}
.fc-hit:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fc-media{position:relative;flex:none;width:132px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--field);display:grid;place-items:center;color:var(--accent)}
.fc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fc:hover .fc-media img{transform:scale(1.06)}
.fc-media svg{width:36px;height:36px;opacity:.55}
.fc-off{position:absolute;left:8px;bottom:8px;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:700;color:#fff;background:var(--accent)}
.fc-plat{position:absolute;left:8px;top:8px;padding:1px 7px;border-radius:6px;font-size:10.5px;font-weight:700;color:#fff;background:#ee4d2d}
.fc-plat.lazada{background:#0f146d}.fc-plat.tiktok{background:#111}
.fc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:2px 0}
.fc-top{display:flex;align-items:flex-start;gap:8px}
.fc-name{margin:0;flex:1;font-size:15px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fc-fav{all:unset;box-sizing:border-box;cursor:pointer;position:relative;z-index:2;flex:none;width:34px;height:34px;margin:-4px -4px 0 0;border-radius:50%;display:grid;place-items:center;color:#e5484d;transition:background .2s,transform .15s}
.fc-fav:hover{background:color-mix(in srgb,#e5484d 10%,transparent)}
.fc-fav:active{transform:scale(.85)}
.fc-fav:focus-visible{outline:2px solid var(--accent)}
.fc-fav svg{width:19px;height:19px}
.fc-fav path{fill:currentColor;transition:fill .2s}
.fc-fav:hover path{fill:transparent}
.fc-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto}
.fc-price b{font-size:22px;line-height:1.1;font-weight:700;color:var(--accent-deep);font-variant-numeric:tabular-nums}
.fc-price s{font-size:12.5px;color:var(--muted)}
.fc-trend{display:flex;align-items:center;gap:10px}
.fc-vd{flex:none;display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;background:var(--ok-soft);color:var(--ok)}
.fc-vd i{width:6px;height:6px;border-radius:50%;background:currentColor}
.fc-vd.mid{background:var(--warn-soft);color:var(--warn)}
.fc-vd.high{background:var(--soft);color:var(--accent-deep)}
.fc-spark{flex:1;min-width:0;height:26px;overflow:visible}
.fc-spark .l{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1200;animation:fv-draw 1s .3s cubic-bezier(.4,.1,.2,1) both}
.fc-low{flex:none;font-size:11.5px;color:var(--muted);white-space:nowrap}

.fv-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:56px 16px;border-radius:22px;border:1.5px dashed var(--line);text-align:center;color:var(--muted);animation:fv-in .4s both}
.fv-empty .h{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--accent)}
.fv-empty b{color:var(--ink);font-size:17px}

.fv-toast{position:fixed;left:50%;bottom:24px;z-index:50;display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:var(--ink);color:var(--card);font:500 14px/1.4 var(--body);box-shadow:0 20px 40px -18px rgba(0,0,0,.5);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s;max-width:calc(100vw - 32px)}
.fv-toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.fv-toast button{all:unset;cursor:pointer;font-weight:700;color:#ffb48a;white-space:nowrap}

@keyframes fv-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fv-out{to{opacity:0;transform:scale(.96)}}
@keyframes fv-draw{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}}
@media (max-width:860px){.fv-list{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.fv-head{align-items:stretch}.fv-ntf{width:100%}.fv-ntf .sw{margin-left:auto}.fc{gap:12px;padding:10px}.fc-media{width:96px}.fc-name{font-size:14px}.fc-price b{font-size:19px}.fc-low,.fc-spark{display:none}.fv-ghead .deal{font-size:11px}}
@media (prefers-reduced-motion:reduce){.fv *{animation:none!important;transition:none!important}}

#fv{display:none;--field:var(--surface-subtle);--ok:#138554;--ok-soft:#e7f7ef}body[data-view="favorites"] #fv{display:flex}body[data-view="favorites"] .bottom-grid{display:none}#fv .fv-ntf:disabled{cursor:default;opacity:.7}#fv .fc,#fv .fv-group{animation:none}#fv .fc.out,#fv .fv-group.out{animation:fv-out .25s ease forwards}#fv .fv-empty .h svg{width:28px;height:28px}#fv .fv-toast{z-index:70}#fv .fc-spark .l{animation:none;stroke-dasharray:none}:root[data-theme="dark"] #fv{--ok:#6ed8a6;--ok-soft:#163024}@media(hover:none),(pointer:coarse){#fv .fc:hover,#fv .fc:hover .fc-media img{transform:none}}
/* Full-width favorites with breathing room and per-shop disclosure. */
#fv{gap:30px}
#fv .fv-groups{gap:32px}
#fv .fv-group{gap:20px;padding:8px 0}
#fv .fv-ghead{gap:12px;padding:6px 8px 16px;flex-wrap:wrap}
#fv .fv-list{grid-template-columns:minmax(0,1fr);gap:16px;width:100%}
#fv .fc{width:100%;box-sizing:border-box;padding:18px;gap:20px}
#fv .fc-body{padding:4px 0;gap:10px}
#fv .fc-trend{gap:14px}
#fv .fc-spark{max-width:240px}
#fv .fv-collapse{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:none;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--muted);font:inherit;font-size:12px;padding:8px 10px;cursor:pointer}
#fv .fv-collapse svg{width:16px;height:16px;transform:rotate(180deg);transition:transform .2s}
#fv .fv-collapse[aria-expanded="false"] svg{transform:rotate(0)}
#fv .fv-collapse:hover{background:var(--soft2);color:var(--accent-deep)}
#fv .fv-collapse:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#fv .fv-ghead .deal{margin-left:auto}
#fv .fv-ghead .deal+.fv-collapse{margin-left:0}
@media(max-width:560px){#fv .fv-groups{gap:24px}#fv .fv-group{gap:16px}#fv .fv-ghead{padding:4px 0 14px;gap:10px}#fv .fv-ghead h2{font-size:15px}#fv .fc{padding:12px;gap:12px}#fv .fc-media{width:96px}#fv .fv-ghead .deal{order:4;margin-left:50px}#fv .fv-ghead .deal+.fv-collapse{margin-left:auto}#fv .fc-trend{flex-wrap:wrap;gap:8px}}
@media(prefers-reduced-motion:reduce){#fv .fv-collapse svg{transition:none}}