/* Gift finder */
.module[data-module="finder"] .fd { display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.module[data-module="finder"] .phone-bar { padding-top: 2.6rem; }
.module[data-module="finder"] .fd-sub { font-weight: 600; font-size: var(--t-s); color: var(--ink-2); }
.module[data-module="finder"] .phone-screen { background: var(--paper); }
.module[data-module="finder"] .fd-chat { padding-bottom: 1.25rem; }

/* cart pill */
.module[data-module="finder"] .fd-cart {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; border: 0; cursor: pointer;
  background: var(--magenta-soft); color: var(--magenta-2); border-radius: var(--r-pill); padding: .35rem .65rem; font-weight: 700; font-size: var(--t-xs);
}
.module[data-module="finder"] .fd-cart-n { background: var(--magenta); color: #fff; min-width: 1.35rem; height: 1.35rem; border-radius: 999px; display: grid; place-items: center; padding: 0 .3rem; }
.module[data-module="finder"] .fd-cart.bump { animation: fd-bump .5s var(--ease-spring); }
@keyframes fd-bump { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* chips and suggestions inside the chat */
.module[data-module="finder"] .fd-chips { animation: pop .35s var(--ease-spring) both; align-self: stretch; }
.module[data-module="finder"] .fd-chips .chip { animation: pop .3s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 45ms); }
.module[data-module="finder"] .fd-done { margin-left: auto; }
.module[data-module="finder"] .fd-suggest { display: grid; gap: .35rem; align-self: stretch; animation: pop .35s var(--ease-spring) both; }
.module[data-module="finder"] .fd-sug { text-align: left; border-style: dashed; border-radius: var(--r-m); font-size: var(--t-xs); line-height: 1.35; }
.module[data-module="finder"] .fd-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.module[data-module="finder"] .fd-tags .tag { animation: pop .3s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.module[data-module="finder"] .fd-cartlist { margin: .3rem 0; padding-left: 1.1rem; }

/* results strip */
.module[data-module="finder"] .fd-strip {
  display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem 1rem .8rem; margin: 0 -1rem; scroll-padding: 0 1rem;
}
.module[data-module="finder"] .fd-card { flex: 0 0 158px; scroll-snap-align: start; align-content: start; animation: fd-deal .65s var(--ease-spring) both; animation-delay: calc(var(--i) * 110ms); }
.module[data-module="finder"] .fd-img { aspect-ratio: 1; background: var(--paper-3); }
.module[data-module="finder"] .fd-img img { height: 100%; }
.module[data-module="finder"] .fd-card .pcard-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-xs); }
.module[data-module="finder"] .fd-add { justify-content: center; padding: .5em .6em; font-size: var(--t-xs); margin-top: .2rem; }
.module[data-module="finder"] .fd-add.is-added { background: var(--mint); }
@keyframes fd-deal { from { opacity: 0; transform: translateX(80px) rotate(7deg) scale(.88); } to { opacity: 1; transform: none; } }

/* input bar */
.module[data-module="finder"] .fd-input { display: flex; gap: .5rem; padding: .6rem .75rem .9rem; border-top: 1px solid var(--line); background: var(--paper); flex: none; }
.module[data-module="finder"] .fd-text { border-radius: var(--r-pill); padding-inline: 1rem; }
.module[data-module="finder"] .fd-send { padding-inline: 1rem; }

/* owner panel */
.module[data-module="finder"] .fd-panel {
  flex: 1 1 280px; max-width: 340px; min-width: 260px; background: var(--paper); border-radius: var(--r-l); padding: 1.25rem; display: grid; gap: .9rem;
  box-shadow: 0 0 0 1px var(--line);
}
.module[data-module="finder"] .fd-panel h3 { font-size: var(--t-l); }
.module[data-module="finder"] .fd-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.module[data-module="finder"] .fd-slots li { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem .7rem; border-radius: var(--r-s); background: var(--paper-2); font-size: var(--t-s); transition: background .3s; }
.module[data-module="finder"] .fd-k { color: var(--ink-2); font-weight: 600; }
.module[data-module="finder"] .fd-v { color: var(--ink-3); text-align: right; }
.module[data-module="finder"] .fd-slots li.is-set { background: var(--mint-soft); }
.module[data-module="finder"] .fd-slots li.is-set .fd-v { color: #11776d; font-weight: 600; }
.module[data-module="finder"] .fd-slots li.flash { animation: fd-flash 1s var(--ease-out); }
@keyframes fd-flash { 0% { box-shadow: 0 0 0 0 rgba(31, 169, 155, .55); transform: scale(1.03); } 100% { box-shadow: 0 0 0 10px rgba(31, 169, 155, 0); transform: none; } }
.module[data-module="finder"] .fd-match-n { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; }
.module[data-module="finder"] .fd-match-n b { color: var(--mint); font-size: var(--t-3xl); font-variant-numeric: tabular-nums; }
.module[data-module="finder"] .fd-funnel { display: grid; gap: .3rem; }
.module[data-module="finder"] .fd-frow { display: grid; grid-template-columns: 6.5rem 1fr 2.4rem; align-items: center; gap: .5rem; font-size: var(--t-xs); color: var(--ink-2); }
.module[data-module="finder"] .fd-frow i { display: block; height: 8px; border-radius: 8px; background: var(--paper-3); position: relative; overflow: hidden; }
.module[data-module="finder"] .fd-frow i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--mint); border-radius: 8px; animation: fd-grow .6s var(--ease-out) both; }
.module[data-module="finder"] .fd-frow b { text-align: right; font-variant-numeric: tabular-nums; }
@keyframes fd-grow { from { width: 100%; } }
.module[data-module="finder"] .fd-how ul { margin: .3rem 0 0; padding-left: 1.1rem; color: var(--ink-2); }
.module[data-module="finder"] .fd-how li { margin-bottom: .2rem; }

@media (max-width: 420px) { .module[data-module="finder"] .phone { height: 680px; } }