/* Shared browse/grid/list modes for recipe collections outside My Recipes. */
.br-result-viewbar {display:flex; justify-content:flex-end; margin: 7px 0 10px;}
.br-result-viewbar .br-my-recipes-view-options { display:inline-flex; border:1px solid #d9e2d9; border-radius:10px; padding:3px; background:#fff; gap:3px; }
.br-result-viewbar button {display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:7px; width:36px; height:33px; background:transparent; color:#0d3b2b; cursor:pointer;}
.br-result-viewbar button[aria-pressed="true"] {background:#0c4231;color:white;}
.br-result-viewbar button:hover:not([aria-pressed="true"]) {background:#f0f6ef;}
.br-result-viewbar button:focus-visible {outline:2px solid #0c4231;outline-offset:2px;}
.br-result-view-grid[data-view="cards"],
.br-result-view-grid[data-view="list"] {grid-template-columns:minmax(0,1fr)!important;}
.br-result-view-grid[data-view="cards"] > article,
.br-result-view-grid[data-view="list"] > article {width:100%;min-width:0;}
.br-result-view-grid[data-view="cards"] > article {display:grid;grid-template-columns:minmax(180px,34%) minmax(0,1fr);align-items:stretch;}
.br-result-view-grid[data-view="list"] > article {display:grid;grid-template-columns:minmax(95px,125px) minmax(0,1fr);align-items:stretch;min-height:112px;}
.br-result-view-grid[data-view="cards"] > article > :is(.br-public-recipe-photo,.br-discover-feed-photo,.br-discover-photo,.br-collection-recipe-photo,.br-recipe-card-image,.br-saved-recipe-photo-wrap),
.br-result-view-grid[data-view="list"] > article > :is(.br-public-recipe-photo,.br-discover-feed-photo,.br-discover-photo,.br-collection-recipe-photo,.br-recipe-card-image,.br-saved-recipe-photo-wrap) {height:100%;min-height:115px;aspect-ratio:auto;}
.br-result-view-grid[data-view="cards"] > article img,
.br-result-view-grid[data-view="list"] > article img {object-fit:cover;}
.br-result-view-grid[data-view="cards"] > article > :is(.br-public-recipe-card-body,.br-discover-feed-card-body,.br-discover-card-body,.br-collection-recipe-copy,.br-recipe-card-body),
.br-result-view-grid[data-view="list"] > article > :is(.br-public-recipe-card-body,.br-discover-feed-card-body,.br-discover-card-body,.br-collection-recipe-copy,.br-recipe-card-body) {min-width:0;}
.br-result-view-grid[data-view="list"] > article :is(h2,h3) {font-size:.91rem;line-height:1.25;}
.br-result-view-grid[data-view="list"] > article :is(.br-public-recipe-card-body,.br-discover-feed-card-body,.br-discover-card-body,.br-collection-recipe-copy,.br-recipe-card-body) {padding:8px 12px;}
.br-result-view-grid[data-view="list"] > article :is(.br-public-recipe-description,.br-discover-description,.br-discover-feed-description) {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* Recipe action menus, nutrition badges and save buttons remain present in all views. */
.br-result-view-grid[data-view="list"] > article > :is(.br-discover-actions,.br-collection-recipe-actions,.br-shared-card-actions) {grid-column:2;}
.br-result-view-grid[data-view="cards"] > article > :is(.br-discover-actions,.br-collection-recipe-actions) {grid-column:2;}
/* Saved recipes include an image wrapper + independent remove action. */
.br-result-view-grid[data-view="cards"] > .br-saved-recipe-card,
.br-result-view-grid[data-view="list"] > .br-saved-recipe-card {position:relative;}
/* Shared-with-me cards have no photos and should remain single-line rows in list mode. */
.br-shared-grid.br-result-view-grid[data-view="list"] > .br-shared-card,
.br-shared-grid.br-result-view-grid[data-view="cards"] > .br-shared-card {display:flex;align-items:center;flex-wrap:wrap;}
@media(max-width:600px) {
 .br-result-viewbar button {width:39px;height:35px;}
 .br-result-view-grid[data-view="cards"] > article {display:block;}
 .br-result-view-grid[data-view="cards"] > article > :is(.br-public-recipe-photo,.br-discover-feed-photo,.br-discover-photo,.br-collection-recipe-photo,.br-recipe-card-image) {height:auto;aspect-ratio:16/9;min-height:0;}
 .br-result-view-grid[data-view="list"] > article {grid-template-columns:88px minmax(0,1fr);}
 .br-result-view-grid[data-view="list"] > article :is(h2,h3) {font-size:.78rem;}
 .br-result-view-grid[data-view="list"] > article :is(.br-public-recipe-card-body,.br-discover-feed-card-body,.br-discover-card-body,.br-collection-recipe-copy,.br-recipe-card-body) {padding:7px 8px;}
 .br-result-view-grid[data-view="list"] > article > :is(.br-public-recipe-photo,.br-discover-feed-photo,.br-discover-photo,.br-collection-recipe-photo,.br-recipe-card-image) {min-height:100px;}
}

/* Discover result views: the original mobile Discover stylesheet uses one column.
   Override it only for Grid; Large Cards remains a full-width single column. */
@media (max-width: 680px) {
  .br-discover-feed-grid.br-result-view-grid[data-view="grid"],
  .br-discover-grid.br-result-view-grid[data-view="grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .55rem;
  }

  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] > .br-discover-feed-card,
  .br-discover-grid.br-result-view-grid[data-view="grid"] > .br-discover-card {
    min-width: 0;
  }

  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] .br-discover-feed-photo,
  .br-discover-grid.br-result-view-grid[data-view="grid"] .br-discover-photo {
    aspect-ratio: 4 / 3;
  }

  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] .br-discover-feed-body,
  .br-discover-grid.br-result-view-grid[data-view="grid"] .br-discover-card-body {
    min-width: 0;
    padding: .6rem .55rem;
  }

  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] .br-discover-feed-reason {
    font-size: .62rem;
    line-height: 1.3;
    letter-spacing: 0;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] .br-discover-feed-card h3,
  .br-discover-grid.br-result-view-grid[data-view="grid"] .br-discover-card h2 {
    font-size: .86rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] .br-discover-feed-description,
  .br-discover-grid.br-result-view-grid[data-view="grid"] .br-discover-description {
    display: none;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] .br-discover-feed-meta {
    gap: .4rem;
    margin: .45rem 0;
    font-size: .68rem;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] .br-discover-feed-macros {
    gap: .2rem;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] .br-discover-feed-macros > span {
    min-width: 0;
    padding: .2rem .1rem;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] .br-discover-feed-macros strong {
    font-size: .66rem;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] .br-discover-feed-macros small {
    font-size: .47rem;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] .br-discover-feed-missing,
  .br-discover-grid.br-result-view-grid[data-view="grid"] .br-discover-missing {
    font-size: .67rem;
    padding: .45rem .4rem;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Four actions have to fit inside half of a phone screen. Keep the labels
     accessible, but show icons only in this especially narrow grid layout. */
  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] > .br-discover-feed-card > .br-discover-feed-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .18rem;
    padding: .4rem .3rem;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] > .br-discover-feed-card > .br-discover-feed-actions form {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] > .br-discover-feed-card > .br-discover-feed-actions form .br-btn {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    height: 32px;
    padding: .2rem;
    font-size: .78rem;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] > .br-discover-feed-card > .br-discover-feed-actions :is([data-discover-save-label], [data-discover-add-missing-label], .br-discover-plan-label) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="grid"] > .br-discover-feed-card > .br-discover-feed-actions .br-discover-hide {
    flex: 0 0 30px;
    width: 30px;
    min-width: 30px;
    height: 32px;
  }
  .br-discover-grid.br-result-view-grid[data-view="grid"] .br-discover-actions {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .4rem;
  }
  .br-discover-grid.br-result-view-grid[data-view="grid"] .br-discover-actions form,
  .br-discover-grid.br-result-view-grid[data-view="grid"] .br-discover-actions .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
    font-size: .69rem;
    line-height: 1.15;
    text-align: center;
  }
}

/* List mode is one horizontal recipe row, never a photo stretched to the
   height of the entire card. Actions occupy a full-width footer below it. */
.br-discover-feed-grid.br-result-view-grid[data-view="list"] > .br-discover-feed-card,
.br-discover-grid.br-result-view-grid[data-view="list"] > .br-discover-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  min-width: 0;
}
.br-discover-feed-grid.br-result-view-grid[data-view="list"] > .br-discover-feed-card > .br-discover-feed-photo,
.br-discover-grid.br-result-view-grid[data-view="list"] > .br-discover-card > .br-discover-photo {
  grid-column: 1;
  grid-row: 1;
  display: block;
  height: 120px;
  min-height: 0;
  max-height: 120px;
  aspect-ratio: auto;
  align-self: start;
  overflow: hidden;
}
.br-discover-feed-grid.br-result-view-grid[data-view="list"] .br-discover-feed-photo > img,
.br-discover-grid.br-result-view-grid[data-view="list"] .br-discover-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.br-discover-feed-grid.br-result-view-grid[data-view="list"] > .br-discover-feed-card > .br-discover-feed-body,
.br-discover-grid.br-result-view-grid[data-view="list"] > .br-discover-card > .br-discover-card-body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: .6rem;
}
.br-discover-feed-grid.br-result-view-grid[data-view="list"] > .br-discover-feed-card > .br-discover-feed-actions,
.br-discover-grid.br-result-view-grid[data-view="list"] > .br-discover-card > .br-discover-actions {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}
.br-discover-feed-grid.br-result-view-grid[data-view="list"] .br-discover-feed-reason {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.br-discover-feed-grid.br-result-view-grid[data-view="list"] .br-discover-feed-description,
.br-discover-grid.br-result-view-grid[data-view="list"] .br-discover-description {
  display: none;
}

@media (max-width: 680px) {
  .br-discover-feed-grid.br-result-view-grid[data-view="list"] > .br-discover-feed-card,
  .br-discover-grid.br-result-view-grid[data-view="list"] > .br-discover-card {
    grid-template-columns: 80px minmax(0, 1fr);
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="list"] > .br-discover-feed-card > .br-discover-feed-photo,
  .br-discover-grid.br-result-view-grid[data-view="list"] > .br-discover-card > .br-discover-photo {
    height: 105px;
    max-height: 105px;
    min-height: 0;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="list"] .br-discover-feed-body,
  .br-discover-grid.br-result-view-grid[data-view="list"] .br-discover-card-body {
    padding: .5rem .55rem;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="list"] > .br-discover-feed-card > .br-discover-feed-actions {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: .35rem;
    padding: .5rem;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="list"] > .br-discover-feed-card > .br-discover-feed-actions form {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="list"] > .br-discover-feed-card > .br-discover-feed-actions form .br-btn {
    min-height: 34px;
    min-width: 0;
    width: 100%;
    padding: .25rem .15rem;
    gap: .18rem;
    font-size: .67rem;
    white-space: nowrap;
  }
  .br-discover-feed-grid.br-result-view-grid[data-view="list"] > .br-discover-feed-card > .br-discover-feed-actions .br-discover-hide {
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 34px;
  }
  .br-discover-grid.br-result-view-grid[data-view="list"] .br-discover-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: .4rem;
    padding: .55rem;
  }
  .br-discover-grid.br-result-view-grid[data-view="list"] .br-discover-actions form {
    flex: 1 1 0;
    min-width: 0;
  }
  .br-discover-grid.br-result-view-grid[data-view="list"] .br-discover-actions .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
    font-size: .7rem;
  }
}

/* Collections ship their default view state in the server-rendered HTML too.
   When an AJAX replacement briefly has no mode applied, the initial Grid layout
   is still two cards wide instead of inheriting the old one-column mobile rule.
   The neighboring selected selector offers an additional fallback during updates. */
@media (max-width: 575.98px) {
  .br-collection-recipe-grid[data-view="grid"],
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"],
  .br-collection-recipe-grid:where(:not([data-view])) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
    min-width: 0;
  }

  .br-collection-recipe-grid > .br-collection-recipe-card {
    min-width: 0;
  }
}

/* Collection detail / public collection: Grid must differ from Large Cards on phones.
   The original Collections CSS enforces one column below 576px. Scope the
   override to the selected Grid mode so Large Cards and List are unaffected. */
@media (max-width: 575.98px) {
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] > .br-collection-recipe-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-photo {
    display: block;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-photo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-placeholder img {
    width: min(56px, 55%);
    height: auto;
    aspect-ratio: 1;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-body {
    display: grid;
    gap: 7px;
    padding: 8px;
    min-width: 0;
    flex: 1;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    min-width: 0;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-heading > div:first-child {
    min-width: 0;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-heading h2 {
    font-size: .82rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-heading span {
    font-size: .66rem;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-body > p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .69rem;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-actions form {
    display: flex;
    min-width: 0;
    margin: 0;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-actions :is(
    .br-collection-drag-handle, .br-collection-order-button, .br-collection-remove-button) {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 28px;
    min-width: 0;
    padding: 0;
    font-size: .75rem;
    border-radius: 7px;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-macros {
    gap: 2px;
    margin: 0;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-macros > span {
    padding: 5px 1px;
    border-radius: 6px;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-macros strong {
    font-size: .64rem;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-macros small {
    font-size: .43rem;
    letter-spacing: 0;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-time {
    font-size: .65rem;
  }
}


/* Saved Recipes: the older public-recipe mobile grid defaults to one column.
   Keep three distinct result modes and prevent the saved-photo wrapper from
   stretching to the card's full height in Large Cards mode. */
@media (max-width: 600px) {
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .55rem;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] > .br-saved-recipe-card {
        min-width: 0;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] .br-saved-recipe-photo-wrap > .br-public-recipe-photo {
        aspect-ratio: 4 / 3;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] .br-public-recipe-card-body {
        min-width: 0;
        padding: .55rem .5rem;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] .br-public-recipe-card-body h2 {
        font-size: .82rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] .br-public-recipe-description {
        display: none;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] .br-saved-recipe-macros {
        gap: 2px;
        margin: .45rem 0;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] .br-saved-recipe-macros > span {
        padding: 5px 1px;
        border-radius: 6px;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] .br-saved-recipe-macros strong {
        font-size: .68rem;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] .br-saved-recipe-macros small {
        font-size: .42rem;
        letter-spacing: 0;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] .br-saved-recipe-remove {
        top: 5px;
        right: 5px;
        width: 29px;
        height: 29px;
    }

    /* The shared card styles give photo wrappers height:100%; that makes the
       image fill the page before the card body can appear on narrow screens. */
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="cards"] > .br-saved-recipe-card {
        display: flex;
        flex-direction: column;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="cards"] > .br-saved-recipe-card > .br-saved-recipe-photo-wrap {
        display: block;
        flex: none;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="cards"] .br-saved-recipe-photo-wrap > .br-public-recipe-photo {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="cards"] > .br-saved-recipe-card > .br-public-recipe-card-body {
        display: block;
        width: 100%;
        min-width: 0;
        padding: .8rem;
    }

    /* Keep List's thumbnail bounded even when the adjacent details wrap. */
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="list"] > .br-saved-recipe-card {
        align-items: start;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="list"] > .br-saved-recipe-card > .br-saved-recipe-photo-wrap {
        width: 88px;
        height: 96px;
        min-height: 0;
        max-height: 96px;
        aspect-ratio: auto;
        overflow: hidden;
    }
    .br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="list"] .br-saved-recipe-photo-wrap > .br-public-recipe-photo {
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }
}

/* Saved Recipes: equal-height Grid cards, with their nutrition and summary
   anchored to the same baseline regardless of recipe title, badges, or tags.
   Scoped to Grid so List (including desktop Details) and Large Cards retain
   their own responsive layouts. */
.br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] {
    align-items: stretch;
    grid-auto-rows: 1fr;
}
.br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] > .br-saved-recipe-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}
.br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] > .br-saved-recipe-card > .br-saved-recipe-photo-wrap {
    flex: none;
    min-width: 0;
}
.br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] > .br-saved-recipe-card > .br-public-recipe-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}
.br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] .br-public-recipe-card-body h2 {
    display: -webkit-box;
    min-height: 2.3em;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] .br-saved-recipe-macros {
    flex: none;
    margin-top: auto;
}
.br-saved-recipes .br-public-recipe-grid.br-result-view-grid[data-view="grid"] .br-public-recipe-meta {
    flex: none;
    min-height: 30px;
    align-content: center;
}

/* Collection details: equal-height two-column Grid cards on phones.
   Keep the title above the reorder/remove buttons and anchor nutrition/time
   to the bottom, just like the native Collection grids. Do not change the
   single-column Large Cards and List modes. */
@media (max-width: 575.98px) {
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] {
    align-items: stretch;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] > .br-collection-recipe-card {
    height: 100%;
    align-self: stretch;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
    min-height: 0;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-heading {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-heading h2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.5em;
    line-height: 1.25;
    overflow-wrap: normal;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-heading > div:first-child > span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-actions {
    align-self: flex-end;
    margin: 0;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-body > p {
    min-height: 2.6em;
    max-height: 2.6em;
    line-height: 1.3;
    margin: 0;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-macros {
    margin-top: auto;
    width: 100%;
  }
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-time {
    min-height: 1.1em;
  }
  /* Preserve the same footer slot when a recipe has no cook time. */
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-body:not(:has(.br-collection-recipe-time))::after {
    display: block;
    content: "";
    height: .75em;
  }
}

/* Keep collection Grid nutrition and footers anchored in the same place across
   the desktop and mobile responsive column counts. */
.br-collection-recipe-grid.br-result-view-grid[data-view="grid"] > .br-collection-recipe-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-macros {
  margin-top: auto;
}
.br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-body:not(:has(.br-collection-recipe-time))::after {
  content: "";
  display: block;
  height: 1em;
}
@media (max-width: 575.98px) {
  .br-collection-recipe-grid.br-result-view-grid[data-view="grid"] > .br-collection-recipe-card {
    min-height: 334px;
  }
}
.br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-time,
.br-collection-recipe-grid.br-result-view-grid[data-view="grid"] .br-collection-recipe-body:not(:has(.br-collection-recipe-time))::after {
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
}

/* Collection details: keep the saved-recipe select and Add button side by side
   on phones, as in the native apps. Override the legacy stacked mobile form. */
@media (max-width: 575.98px) {
  .br-collection-dynamic .br-collection-add-card .br-collection-add-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
  }
  .br-collection-dynamic .br-collection-add-form > .form-select {
    width: 100%;
    min-width: 0;
  }
  .br-collection-dynamic .br-collection-add-form > .btn {
    width: auto;
    min-width: 74px;
    margin: 0;
    padding: 9px 12px;
    white-space: nowrap;
  }
}

/* What Can I Make: show the missing-ingredient count in compact grid mode;
   keep the full ingredient names visible in large-card and list modes. */
.br-discover-grid .br-discover-missing-count { display: none; }
.br-discover-grid.br-result-view-grid[data-view="grid"] .br-discover-missing-detail { display: none; }
.br-discover-grid.br-result-view-grid[data-view="grid"] .br-discover-missing-count { display: inline; }
@media (max-width: 680px) {
  .br-discover-grid.br-result-view-grid[data-view="grid"] .br-discover-missing {
    display: block;
    padding: .25rem 0;
    line-height: 1.35;
    -webkit-line-clamp: unset;
  }
}