/* taste.css : "beans I already love" -> similar recommendations.
   Reuses tokens.css vars and the site card/chip vocabulary. */

.taste-main{ padding-block: 2rem 4rem; }

/* hero: image beside copy so an answer-first block stays first */
.taste-hero{ display:grid; grid-template-columns: 1fr; gap:1.25rem; margin-bottom:2.5rem; }
@media (min-width:720px){ .taste-hero{ grid-template-columns: 1.1fr 1fr; align-items:start; gap:2rem; } }
.taste-hero-media img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-lg); display:block; }
.taste-hero-copy .eyebrow{ margin:0 0 .4rem; }
.taste-hero-copy h1{ margin:0 0 .6rem; font-size:var(--fs-h1); line-height:1.15; }
.taste-hero-copy .lead{ color:var(--muted); margin:0; }

/* picker */
.taste-pick{ max-width:640px; margin-inline:auto; }
.pick-title{ margin:0 0 .9rem; font-size:var(--fs-h2); }
.taste-search{ position:relative; }
#tSearch{ width:100%; padding:.8rem 1rem; font:inherit; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); }
#tSearch:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.t-list{ position:absolute; inset-inline:0; top:calc(100% + 4px); z-index:20; max-height:320px;
  overflow:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--sh-2); }
.t-list .t-opt{ display:block; width:100%; text-align:start; padding:.6rem .9rem; background:none;
  border:0; font:inherit; cursor:pointer; }
.t-list .t-opt[aria-selected="true"], .t-list .t-opt:hover{ background:var(--paper-2); }
.t-none{ padding:.7rem .9rem; color:var(--muted); }

.t-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0; }
.t-chip button{ background:none; border:0; cursor:pointer; font:inherit; line-height:1;
  color:var(--muted); padding:0; }
.t-handoff{ margin-top:1rem; }
.t-handoff a{ color:var(--muted); text-decoration:underline; }

.taste-result{ margin-top:3rem; }

/* profile summary */
.onecard{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem 1.5rem; }
.onecard h2{ margin:0 0 .3rem; font-size:var(--fs-h3); }
.t-based{ color:var(--muted); margin:0 0 1rem; }
.ocgrid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1.4rem; }
.ocrow{ display:flex; flex-direction:column; gap:3px; padding-bottom:9px; border-bottom:1px dashed var(--crema-deep); }
.ocrow.full{ grid-column:1 / -1; }
.ocrow span{ color:var(--muted); font-weight:600; font-size:var(--fs-xs); }
.ocrow b{ color:var(--ink); font-weight:700; font-size:var(--fs-sm); text-align:start; line-height:1.35; }
.t-wide{ margin:1rem 0 0; color:var(--accent-ink); font-weight:600; }
@media (max-width:520px){ .ocgrid{ grid-template-columns:1fr; } }

/* rec cards */
.t-recs{ display:grid; gap:var(--s-4); margin-top:2.5rem; }
@media (min-width:760px){ .t-recs{ grid-template-columns:repeat(2,1fr); } }
.t-recs-title{ margin:0 0 1.2rem; font-size:var(--fs-h2); grid-column:1 / -1; }
.t-rec{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:1.3rem 1.4rem; }
.t-rec .ribbon{ position:absolute; top:-11px; inset-inline-end:16px; background:var(--accent); color:#fff;
  font-size:var(--fs-xs); font-weight:800; padding:4px 13px; border-radius:var(--r-pill); }
.t-rec .badges .role{ color:var(--muted); font-size:.85rem; }
.t-rec h3{ margin:.2rem 0 .5rem; font-size:var(--fs-h4); line-height:1.25; }
.t-rec .notes{ margin:12px 0 0; font-size:var(--fs-xs); line-height:1.6; }
.t-rec .notes b{ background:none; border:0; padding:0; border-radius:0; color:var(--muted); font-weight:600; }
.t-rec .notes b + b::before{ content:"\B7"; margin-inline:6px; opacity:.5; }
.t-why{ margin:1rem 0 1rem; display:grid; gap:.55rem; }
.t-why div{ display:grid; gap:.15rem; }
.t-why dt{ font-weight:700; font-size:.82rem; color:var(--accent-ink); }
.t-why dd{ margin:0; }
.t-buy{ display:grid; gap:.4rem; margin-top:auto; padding-top:1rem; }
.t-buy a{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; min-height:46px;
  border:1px solid var(--edge); background:var(--paper-2); border-radius:var(--r-sm); padding:8px 12px; text-decoration:none; }
.t-buy a:hover{ border-color:var(--accent); background:var(--paper); }
.t-buy a.cheap{ border-color:var(--ok-ink); background:var(--ok-soft); }
.t-buy .cheaptag{ margin-inline-start:.4rem; color:var(--ok-ink); font-size:.75rem; font-weight:700; }
.t-buy .num{ direction:ltr; unicode-bidi:isolate; }