/* Item details are native buttons; checking, removing and favoriting stay separate. */
.list-screen .grocery-check {
  flex:0 0 44px; justify-content:center; min-width:44px;
  min-height:80px; padding:0; margin:0;
}
.list-screen .grocery-row > .grocery-item-open {
  display:flex; align-items:center; align-self:stretch; flex:1; gap:15px;
  min-width:0; min-height:80px; padding:7px 0; border:0; border-radius:10px;
  box-shadow:none; background:transparent; color:var(--ink); text-align:left;
}
.list-screen .grocery-row > .grocery-item-open:hover { background:var(--accent-soft); }
.list-screen .grocery-row > .grocery-item-open:active { transform:none; box-shadow:none; }
.list-screen .grocery-item-open .item-text { align-items:flex-start; }
.recipe-card { position:relative; }
.recipe-grid .recipe-card-open {
  display:block; width:100%; height:100%; padding:0; margin:0;
  border:0; border-radius:0; box-shadow:none; background:transparent;
  color:inherit; text-align:left; font-size:inherit; font-weight:inherit;
}
.recipe-grid .recipe-card-open:active { transform:none; box-shadow:none; }
.recipe-grid .recipe-card-open:focus-visible { outline-offset:-5px; }
.recipe-card-open .art { display:flex; }
.recipe-card-open .card-body, .recipe-card-open .meta,
.recipe-card-open .match, .recipe-card-open .bar { display:block; }
.recipe-card-open .recipe-card-title {
  display:block; margin:10px 0 12px; font:900 25px/1.1 var(--buddy-font);
  letter-spacing:-.8px; overflow-wrap:anywhere;
}
.recipe-card-open .recipe-card-link {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  min-height:48px; padding:11px 16px; border:2px solid var(--ink);
  border-radius:13px; background:var(--accent-soft); font-size:12px; font-weight:800;
}
.recipe-card > .heart { z-index:1; min-width:44px; min-height:44px; }
@media(max-width:760px) {
  .list-screen .grocery-check { flex-basis:40px; min-width:40px; min-height:76px; }
  .list-screen .grocery-row > .grocery-item-open { min-height:76px; gap:10px; padding:7px 0; }
}
@media(max-width:360px) {
  .list-screen .grocery-row > .grocery-item-open { gap:8px; }
}