/* === CFS Search UI (recipes & products) === */

/* Tunable vars for sticky sidebar behavior */
:root{
  --rsu-sticky-top: 80px;           /* match your header height */
  --rsu-sticky-bottom-pad: 16px;    /* breathing room at bottom */
}

/* --- Search Bar --- */
.rsu__search {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: .75rem;
  background: #B80720; /* brand red */
  border-radius: 12px;
  margin: .75rem;
  position: relative;
}

.rsu__search input {
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: .6rem .8rem;
  font-size: 1rem;
  background: #fff;
  color: #111;
}

.rsu__clearQ {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.rsu__clearQ:hover,
.rsu__clearQ:focus {
  border-color: #d1d5db;
  color: #111;
}

.rsu__btn {
  position: relative;
  border: 1px solid #B80720;
  color: #B80720;
  border-radius: 999px;
  padding: .5rem .75rem;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

.rsu__btn:hover,
.rsu__btn:focus {
  background: #fff;
  border-color: #a0061c;
  color: #a0061c;
}

.rsu__badge {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #b11226;
  color: #b11226;
  font-weight: 800;
  font-size: .75rem;
  line-height: 1;
}

.rsu__badge:empty {
  display: none;
}

/* --- Meta row (count + chips) --- */
.rsu__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .75rem .25rem;
  color: #6b7280;
}

/* View toggle (Grid/List) */
.rsu__viewToggle{ display:flex; gap:.25rem; align-items:center; }
.rsu__viewBtn{
  border:1px solid #e5e7eb; background:#fff; color:#6b7280; border-radius:999px;
  padding:.25rem .6rem; font-weight:700; cursor:pointer; font-size:.85rem;
}
.rsu__viewBtn[aria-pressed="true"]{ border-color:#b11226; color:#b11226; }

.rsu__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-left: .5rem;
}

.chip {
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: .25rem .6rem;
  background: #fff;
  font-weight: 700;
  color: #a0061c;
  cursor: pointer;
}

/* --- Grid & Cards --- */
.rsu__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.75rem;
  padding:.75rem;
}

/* optional: 3-up on tablets */
@media (min-width: 768px){
  .rsu__grid{ grid-template-columns:repeat(3,1fr); }
}

/* desktop: 4-up */
@media (min-width: 992px){
  .rsu__grid{ grid-template-columns:repeat(3,1fr); }
}

/* List view: force single column and horizontal cards */
.rsu--list .rsu__grid{ grid-template-columns:1fr !important; }
.rsu--list .rsu-card{ flex-direction: row; align-items: stretch; }
.rsu--list .rsu-card__media{ flex: 0 0 140px; width:140px; height: auto; background:#fff; aspect-ratio:auto; display:flex; align-items:center; justify-content:center; }
.rsu--list #products-search .rsu-card__media { background:#fff; }
.rsu--list .rsu-card__media img{ width:100%; height:auto; object-fit: contain; }
.rsu--list .rsu-card__body{ flex:1; display:flex; flex-direction:column; padding:.75rem 1rem; }
.rsu-card__desc{ display:none; color:#4b5563; font-size:.9rem; margin:.35rem 0 .45rem; }
.rsu-card__cta{ display:none; margin-left:auto; align-self:center; gap:.5rem; color:#b11226; font-weight:800; text-decoration:none; text-transform:uppercase; }
.rsu-card__cta::before{
  content:""; width:1rem; height:1rem; background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M10 17l5-5-5-5v10z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M10 17l5-5-5-5v10z"/></svg>') center/contain no-repeat;
}
.rsu-card__cta:hover{ text-decoration:underline; }
.rsu--list .rsu-card__cta{ display:inline-flex; }
.rsu--list .rsu-card__desc{ display:block; }

/* keep empty state full-width */
.rsu__grid.empty{ grid-template-columns:1fr; }

/* match the loading shimmer to the grid */
.rsu__loading{ 
  display:grid; 
  grid-template-columns:repeat(2,1fr); 
  gap:.75rem; 
  padding:.75rem; 
}
@media (min-width: 768px){
  .rsu__loading{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width: 992px){
  .rsu__loading{ grid-template-columns:repeat(3,1fr); }
}

.rsu-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rsu-card__media {
  aspect-ratio: 4/3;
  background: #f5f5f5;
}

.rsu-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.rsu-card__body {
  padding: .65rem .75rem .9rem;
}

.rsu-card__meta {
  color: #6b7280;
  font-size: .85rem;
  margin: .15rem 0 .25rem;
  display: flex;
  gap: .75rem;
}

.rsu-card__title {
  display: block;
  font-weight: 800;
  margin: .1rem 0 .1rem;
  font-size: .875rem;
  color: #b11226;
  text-decoration: none;
}

.rsu-card__title:hover {
  text-decoration: underline;
}

#products-search .rsu-card__media { background:#fff; }
#products-search .rsu-card__media img {
  object-fit: contain;
  object-position: center;
  padding: 8px;
}
/* Slightly larger media box on products */
.rsu--products .rsu-card__media { aspect-ratio: 1 / 1; }     /* square looks nicer for packs */
/* Or keep 4/3 but ensure no soft crop:
.rsu--products .rsu-card__media { aspect-ratio: 4 / 3; }
*/

/* Recipes (explicit, if you want to be clear) */
.rsu--recipes .rsu-card__media img {
  object-fit: cover;
  object-position: center;
  padding: 0;
}


.badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  background: #fde8eb;
  color: #b11226;
  border-radius: 999px;
  padding: .2rem .45rem;
  margin-right: .3rem;
}

/* --- Buttons & More --- */
.rsu__more {
  display: flex;
  justify-content: center;
  padding: .25rem .75rem 1rem;
}

/* Make the Load more button prominent and on-brand */
.rsu__more .btn{
  background:#b11226; color:#fff; border:1px solid #b11226;
  padding:.75rem 1.25rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  box-shadow:0 2px 0 rgba(0,0,0,.08);
}
.rsu__more .btn:hover{ background:#990f20; border-color:#990f20; color:#fff; }
.rsu__more .btn:active{ transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.08); }
.rsu__more .btn:focus-visible{ outline:2px solid #b11226; outline-offset:2px; }
.rsu__more .btn::after{ content:" \25BE"; font-size:1.1em; margin-left:.5rem; }

.btn {
  font-weight: 800;
  border-radius: 999px;
  padding: .6rem 1rem;
  cursor: pointer;
}

.btn--primary {
  background: #b11226;
  color: #fff;
  border: 1px solid #b11226;
}

.btn--ghost {
  color: #b11226;
  border: 1px solid #b11226;
  background: #fff;
}

/* --- Loading & Empty --- */

.rsu__shimmer {
  height: 160px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%);
  background-size: 400% 100%;
  animation: sh 1.2s infinite;
}

@keyframes sh {
  0% { background-position: 100% 0 }
  100% { background-position: 0 0 }
}

.rsu__empty {
  padding: 1rem;
  text-align: center;
}

.rsu__empty .muted {
  color: #6b7280;
  font-size: .95rem;
}

/* --- Accessibility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* --- Autocomplete Popover --- */
.rsu__ac {
  position: absolute;
  z-index: 20;
  left: .75rem;
  right: .75rem;
  top: calc(100% + .25rem);
  max-height: 280px;
  overflow: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.rsu__acItem {
  padding: .55rem .75rem;
  cursor: pointer;
  line-height: 1.3;
}

.rsu__acItem[aria-selected="true"],
.rsu__acItem:hover {
  background: #f8fafc;
}

/* Drawer */
/* ===== CFS Search Drawer ===== */

/* Dialog container */
.rsu__drawer {
  width: 100%;
  max-width: 640px;
  border: 0;
  padding: 0;
  margin: 0 auto;
  height: 100vh;                /* full-height sheet on mobile */
  background: #fff;
  color: #111;
  z-index: 1000;
}

/* Backdrop for dialog */
.rsu__drawer::backdrop {
  background: rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}

/* Fallback when <dialog> isn’t supported and we toggle [open] */
.rsu__drawer[open] {
  display: block;
  position: fixed;
  inset: 0;
}

/* Reduce motion users */
@media (prefers-reduced-motion: no-preference) {
  .rsu__drawer {
    transform: translateY(4%);
    opacity: 0;
    transition: transform .18s ease-out, opacity .18s ease-out;
  }
  .rsu__drawer[open] {
    transform: translateY(0);
    opacity: 1;
  }
}

/* The form fills the drawer */
.rsu__drawerForm {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Header */
.rsu__drawer header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem;
  border-bottom: 1px solid #eee;
  background: #F7F5F2;
}

.rsu__drawer header strong {
  font-weight: 800;
  font-size: 1.05rem;
}

.rsu__close {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  font-weight: 800;
  cursor: pointer;
}
.rsu__close:hover,
.rsu__close:focus {
  border-color: #d1d5db;
  color: #111;
  outline: none;
}

/* Facet area */
.rsu__facets {
  padding: .75rem;
  flex: 1 1 auto;
  overflow: auto;
  width:100%;
  -webkit-overflow-scrolling: touch;
}

.rsu__facets fieldset {
  border: 0;
  margin: 0 0 .85rem;
  padding: 0;
}

.rsu__facets legend {
  font-weight: 800;
  margin: 0 0 .4rem;
  font-size: .95rem;
  color: #111;
}

.rsu__facets label {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem 0;
  line-height: 1.3;
  cursor: pointer;
}

.rsu__facets input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: #b11226; /* modern browsers */
}

/* Footer */
.rsu__drawerFooter {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .6rem .75rem;
  border-top: 1px solid #eee;
  background: #F7F5F2;
}

.rsu__drawerFooterRight {
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* Buttons inside drawer reuse your global .btn styles */
.rsu__drawer .btn {
  cursor: pointer;
}
.rsu__drawer .btn--primary {
  background: #b11226;
  color: #fff;
  border: 1px solid #b11226;
}
.rsu__drawer .btn--ghost {
  color: #b11226;
  border: 1px solid #b11226;
  background: #fff;
}

/* Small screens: full-bleed, honor safe areas */
@media (max-width: 768px) {
  .rsu__drawer {
    max-width: 100%;
    height: 100dvh; /* dynamic viewport */
  }
  .rsu__drawer header,
  .rsu__drawerFooter {
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
  }
  .rsu__facets {
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
  }
}

/* Focus rings for keyboard users */
.rsu__drawer :is(button, [type="checkbox"], [type="radio"]):focus-visible {
  outline: 2px solid #b11226;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Optional: constrain facet list columns on wide viewports */
@media (min-width: 992px) {
  .rsu__facets {
    max-width: 580px;
    margin: 0 auto;
  }
}

/* Layout: sidebar + results on desktop */
.rsu__layout{ display:block; }
@media (min-width: 992px){
  .rsu__layout{
  display:flex;                 /* use flex so columns are independent heights */
  gap: 1rem;
  padding: 0 .75rem;
  align-items: flex-start;      /* top-align columns */
  }
  /* Hide Filters button on desktop (drawer is mobile-only) */
  .rsu__btn[id$="__filtersBtn"]{ display:none; }
}

/* Sidebar container */
.rsu__sidebar{
  display:none;
}
@media (min-width: 992px){
  .rsu__sidebar{
    display:block;
    position:sticky;
  top:var(--rsu-sticky-top);
    align-self:flex-start;
    background:#fff;
    border:1px solid #eee;
    border-radius:12px;
    padding:.75rem;
    flex: 0 0 280px;       /* fixed column width */
    width: 280px;          /* ensure width doesn't shrink */
  /* Independent scroll if taller than viewport */
  max-height: calc(100dvh - var(--rsu-sticky-top) - var(--rsu-sticky-bottom-pad));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Make the results grid column flex to fill remaining space on desktop */
@media (min-width: 992px){
  .rsu__grid{ flex: 1 1 auto; min-width: 0; }
}

/* Accordion (uses <details>) */
.rsu-acc{ border-bottom:1px solid #eee; }
.rsu-acc:last-child{ border-bottom:0; }
.rsu-acc > summary{
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; list-style:none; padding:.6rem 0; font-weight:800; color:#111;
}
.rsu-acc > summary::-webkit-details-marker{ display:none; }
/* Chevron indicator */
.rsu-acc > summary::after{
  content: "";
  width: 1rem; height: 1rem;
  margin-left: .5rem;
  flex: 0 0 1rem;
  background-color: currentColor; /* tint via text color */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>') center / contain no-repeat;
  transform: rotate(0deg);
  transition: transform .2s ease;
}
.rsu-acc[open] > summary::after{ transform: rotate(180deg); }
/* Red when open or when any filter inside is selected */
.rsu-acc[open] > summary,
.rsu-acc--active > summary{ color:#b11226; }
.rsu-acc__body{ padding:0 0 .6rem 0; }
.rsu-acc__body label{ display:flex; align-items:center; gap:.35rem; padding:.1rem 0; cursor:pointer; line-height:1.25; }
.rsu-acc__count{ color:#6b7280; font-weight:600; font-size:.85rem; margin-left:.25rem; }

/* Show more/less support */
.rsu-acc__body .is-extra{ display:none; }
.rsu-acc.rsu-acc--expanded .rsu-acc__body .is-extra{ display:flex; }
.rsu-acc__more{
  display:inline-flex; align-items:center; gap:.35rem;
  margin:.25rem 0 .4rem; padding:0; background:transparent; border:0;
  color:#b11226; font:inherit; font-size:.9rem; cursor:pointer;
}
.rsu-acc__more::after{
  content:""; width:.9rem; height:.9rem; background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>') center/contain no-repeat;
  transform: rotate(0deg);
  transition: transform .2s ease;
}
.rsu-acc__more[aria-expanded="true"]::after{ transform: rotate(180deg); }

/* Reset Filters action (desktop sidebar) */
.rsu__resetRow{ padding:.5rem 0 .25rem; }
.rsu__resetAll{
  display:inline-block; background:transparent; border:0; padding:0; cursor:pointer;
  color:#b11226; text-decoration:underline; font-weight:600;
}

/* Sidebar title above accordions */
.rsu__sidebarTitle{
  font-weight:800; font-size:1rem; margin:0 0 .5rem; color:#111827;
}

/* ===== Cards: list view polish ===== */
/* Slightly larger title in list view */
.rsu--list .rsu-card__title{ font-size: 1.375rem; }

/* Clamp long descriptions by default; JS toggles this */
.rsu-card__desc--clamp{
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Ensure clamp display wins over earlier .rsu--list .rsu-card__desc { display:block } */
.rsu--list .rsu-card__desc.rsu-card__desc--clamp{
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Per-card Show more/less under description */
.rsu-card__more{
  display:none; background:transparent; border:0; padding:0; cursor:pointer;
  color:#b11226; font-weight:600; font-size:.9rem;
}
.rsu-card__more::after{ content:" \203A"; }
.rsu--list .rsu-card__more{ display:inline-flex; }