/* ── PAGE LAYOUT ── */
.page-main {
  flex: 1;
  overflow-x: hidden;
  padding: 48px 32px 64px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  animation: fadeUp 0.5s 0.1s ease both;
}

.page-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-title {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-subtitle {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  color: var(--ink-muted);
}

.page-intro-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* ── DISCLOSURE ── */
.disclosure {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 20px;
  background: var(--accent-light);
  border: 1px solid rgba(24,95,165,0.18);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.55;
}
.disclosure svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}
.disclosure strong { color: var(--ink); }

/* ── SEARCH ── */
.search-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.search-row .search-wrap {
  flex: 1;
}

.random-recipe-btn {
  flex-shrink: 0;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--cream);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.random-recipe-btn:hover {
  color: var(--ink);
  background: rgba(28,28,26,0.04);
  border-color: var(--ink-faint);
}

.search-wrap {
  position: relative;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 10px 16px 10px 38px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-input::placeholder { color: var(--ink-faint); }
.search-input:focus {
  border-color: #185FA5;
  box-shadow: 0 0 0 3px rgba(24,95,165,0.1);
}

.search-empty {
  grid-column: 1 / -1;
  font-size: 15px;
  color: var(--ink-muted);
  text-align: center;
  padding: 64px 20px;
}

/* ── PRODUCTS GRID ── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; }
  .product-img-wrap { height: 160px; }
  .page-main { padding: 24px 16px 32px; }
}

.product-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.product-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(28,28,26,0.18);
}

.product-img-wrap {
  width: 100%;
  height: 210px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.product-img-placeholder {
  font-size: 36px;
  pointer-events: none;
  user-select: none;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
}

.product-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}

.product-desc {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.55;
  flex: 1;
}

.product-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 100px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  align-self: flex-start;
  transition: opacity 0.2s ease;
  margin-top: 4px;
}
.product-btn:hover { opacity: 0.82; }

/* ── RECIPE DETAIL MODAL ── */
.recipe-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28,28,26,0.45);
  z-index: 17;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(.4,0,.2,1), visibility 0s 0.3s;
}
.recipe-backdrop.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
}

/* Badges+title+close bar — fixed (not sticky: unreliable on iOS inside the
   panel's nested overflow) right below the site <header>.
   Title rides along so there's always context of which recipe you're on.
   --recipe-header-bar-h is this bar's own rendered height (padding + row +
   gap + title line); .detail-inner's padding-top must equal site-header-h
   + this, so content never starts underneath the fixed bar. */
#recipe-detail-panel {
  --recipe-header-bar-h: 94px;
  --recipe-header-bar-h-mobile: 112px;
}
#recipe-detail-panel .detail-inner {
  /* --site-nav-h (measured in posts.js) is the Posts/Mapa/Cocina bar's real
     height. header.css moves that bar to sit right under the header on
     desktop, so it has to be added here too or this fixed header gets
     painted underneath it, hiding the badges/close row. The mobile override
     below fully replaces this calc (site-nav lives at the bottom there, so
     it doesn't factor in), which is why it's safe to reference unqualified
     here. */
  padding-top: calc(var(--site-header-h) + var(--site-nav-h, 44px) + var(--recipe-header-bar-h));
  padding-bottom: 56px;
}
#recipe-detail-panel .detail-header {
  position: fixed;
  top: calc(var(--site-header-h) + var(--site-nav-h, 44px));
  left: 0;
  right: 0;
  z-index: 19;
  background: var(--cream);
  padding: 8px 28px 10px;
  border-bottom: 1px solid var(--border);
}
#recipe-detail-panel .detail-header-row { align-items: flex-start; }
#recipe-detail-panel .detail-badges {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
#recipe-detail-panel .detail-badges::-webkit-scrollbar { display: none; }
#recipe-detail-panel .detail-close {
  width: 28px;
  height: 28px;
}
#recipe-detail-panel .detail-title {
  font-size: 24px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  #recipe-detail-panel .detail-inner {
    padding-top: calc(var(--site-header-h-mobile) + var(--recipe-header-bar-h-mobile));
    /* The desktop padding-bottom above (a flat 56px) doesn't clear the
       mobile site-nav tab bar, which sits fixed over the bottom of this
       full-area panel at a real, per-device height (--site-nav-h) — without
       this, trailing content like .detail-date renders (partly) underneath
       it. */
    padding-bottom: calc(var(--site-nav-h, 56px) + 20px);
  }
  #recipe-detail-panel .detail-header {
    top: var(--site-header-h-mobile);
    padding: 8px 20px 10px;
  }
  /* Two lines + ellipsis instead of a single truncated line — on narrow
     screens a one-line title cuts off most recipe names, and the nowrap
     flex truncation is what was squeezing the share/map buttons out of view. */
  #recipe-detail-panel .detail-title-row { align-items: flex-start; }
  #recipe-detail-panel .detail-title {
    font-size: 19px;
    line-height: 1.25;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Nudge toward the 44px accessible touch-target minimum — isolated fixed
     button with clear space around it, safe to grow. */
  .back-to-top { width: 44px; height: 44px; }
  /* .detail-badges scrolls independently and the close button is
     flex-shrink:0, so growing it just takes a few more fixed px from the
     row instead of colliding with anything. */
  #recipe-detail-panel .detail-close { width: 38px; height: 38px; }
}

/* Full-area panel: sits below header & site-nav (both z-index 20) */
#recipe-detail-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: none;
  border-left: none;
  border-top: none;
  border-radius: 0;
  z-index: 18;
  transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#recipe-detail-panel.open {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* ── Prev/Next side navigation (desktop) — walks the same list the recipe
   was reached from; hidden on mobile in favor of the pull-to-next gesture
   below (see responsive.css). ── */
.detail-nav-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 22;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink-muted);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s, background 0.15s;
}
.detail-nav-btn:hover:not(:disabled) { color: var(--ink); background: rgba(28,28,26,0.04); }
.detail-nav-btn:disabled { opacity: 0.35; cursor: default; }
.detail-nav-prev { left: 20px; }
.detail-nav-next { right: 20px; }
/* The class rule above sets `display` explicitly, which otherwise beats the
   browser's default [hidden]{display:none} on a specificity tie — without
   this, toggling the `hidden` attribute in posts.js stops working and the
   buttons stay visible over the grid too. */
.detail-nav-btn[hidden] { display: none; }

/* Reading column steps in on desktop, clearing a gutter so the side buttons
   above never sit on top of the badges/title/ingredient text (the panel is
   otherwise edge-to-edge — see the "Full-area panel" rule above). */
@media (min-width: 769px) {
  #recipe-detail-panel .detail-header,
  #recipe-detail-panel .detail-inner {
    padding-left: 84px;
    padding-right: 84px;
  }
}

/* ── Pull-to-navigate (mobile): dragging past either end of a recipe slides
   one of these bars in from that edge — see the touch handlers in posts.js.
   Hidden via opacity/visibility, not just tucked behind the fixed header via
   position — .detail-prev-pull's rest position only lines up with the real
   (per-recipe, JS-measured) header height approximately, since --recipe-
   header-bar-h below is a fixed estimate; relying on that overlap alone left
   a several-px sliver of this bar visible on posts whose header rendered
   shorter than the estimate. opacity/visibility guarantees it's invisible
   at rest regardless. Only .pulling (set in posts.js while dist > 0) shows
   it; .detail-next-pull's rest position is separately guaranteed hidden by
   the panel's own overflow:hidden (panel.css) since it sits past the true
   viewport edge, but gets the same treatment for consistency. ── */
.detail-next-pull,
.detail-prev-pull {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 84px;
  padding: 0 24px;
  background: var(--ink);
  color: var(--cream);
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s ease, visibility 0s linear 0.25s;
  z-index: 6;
}
.detail-next-pull.pulling,
.detail-prev-pull.pulling {
  opacity: 1;
  visibility: visible;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s ease, visibility 0s linear 0s;
}
.detail-next-pull.dragging,
.detail-prev-pull.dragging { transition: none; }
.detail-next-pull strong,
.detail-prev-pull strong {
  font-weight: 400;
  color: rgba(250,248,244,0.7);
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-next-pull {
  bottom: 0;
  transform: translateY(100%);
}

/* Sits right below the fixed badges/title bar (same offset as .detail-inner's
   padding-top above) rather than at the panel's true top edge — otherwise it
   would render underneath that fixed bar (z-index 19 vs. this bar's 6). */
.detail-prev-pull {
  top: calc(var(--site-header-h) + var(--site-nav-h, 44px) + var(--recipe-header-bar-h));
  transform: translateY(-100%);
}
@media (max-width: 768px) {
  .detail-prev-pull {
    top: calc(var(--site-header-h-mobile) + var(--recipe-header-bar-h-mobile));
  }
}

/* ── RECIPE INDEX ── */
.recipes-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── KITCHEN SEARCH + FILTERS ──
   Only 2 filter pills here (vs. the many on the posts index), so on desktop
   they sit inline at the end of a search box that stretches to fill the
   row, instead of stacking below it in a full rf-bar. Below 768px they
   wrap onto their own row like the posts page. */
.kitchen-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kitchen-search-wrap {
  flex: 1;
}
.kitchen-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .kitchen-controls { flex-direction: column; align-items: stretch; }
}

/* ── PUBLIC FILTER BAR ── */
.rf-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rf-row-pills { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rf-pills-wrap { position: relative; flex: 1; min-width: 0; }
.rf-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.rf-pills::-webkit-scrollbar { display: none; }

/* Fade hint at the edges when there's more to scroll (mobile + desktop) */
.rf-pills-wrap::before,
.rf-pills-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 2px;
  width: 22px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.rf-pills-wrap::before { left: 0;  background: linear-gradient(to right, var(--cream), transparent); }
.rf-pills-wrap::after  { right: 0; background: linear-gradient(to left,  var(--cream), transparent); }
.rf-pills-wrap.can-scroll-left::before  { opacity: 1; }
.rf-pills-wrap.can-scroll-right::after { opacity: 1; }

/* Scroll arrows — only shown on mouse-driven devices; touch relies on swipe + the fade hint */
.rf-scroll-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--cream);
  color: var(--ink-muted);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 2;
  transition: background 0.12s, color 0.12s;
}
.rf-scroll-btn:hover { background: rgba(28,28,26,0.06); color: var(--ink); }
.rf-scroll-left  { left: -6px; }
.rf-scroll-right { right: -6px; }
@media (hover: hover) and (pointer: fine) {
  .rf-scroll-btn { display: flex; }
  .rf-scroll-btn[hidden] { display: none; }
}

.rf-pill-wrap { position: relative; flex-shrink: 0; }

.rf-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--cream);
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.rf-pill:hover { background: rgba(28,28,26,0.05); color: var(--ink); border-color: rgba(28,28,26,0.2); }
.rf-pill.rf-pill-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.rf-pill.rf-pill-active svg { stroke: #fff; }

.rf-popover {
  display: none;
  position: absolute;
  min-width: 140px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  z-index: 200;
  padding: 4px;
}
.rf-popover.open { display: block; }
.rf-popover-scroll { max-height: 240px; overflow-y: auto; width: 200px; max-width: calc(100vw - 16px); }

.rf-pop-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.rf-pop-opt:hover { background: rgba(28,28,26,0.05); color: var(--ink); }
.rf-pop-opt.active { background: var(--ink); color: #fff; }
.rf-pop-opt.active .filter-count { color: rgba(255,255,255,0.75); }

.rf-pop-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-muted);
  transition: background 0.1s;
  user-select: none;
}
.rf-pop-check:hover { background: rgba(28,28,26,0.05); color: var(--ink); }
.rf-pop-check input[type="checkbox"] { accent-color: var(--accent); flex-shrink: 0; }
.rf-pop-check[hidden] { display: none; }

.rf-pop-search {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(28,28,26,0.03);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
}
.rf-pop-search:focus { border-color: var(--accent); }

.rf-pop-options {
  max-height: 220px;
  overflow-y: auto;
}

/* The search input must stay fixed while only the option list scrolls */
#rfpop-ing.rf-popover-scroll { max-height: none; overflow: visible; }

.rf-pop-hint {
  font-size: 10px;
  color: var(--ink-faint);
  padding: 4px 10px;
  margin: 4px 0 0;
  line-height: 1.4;
}

.rf-count { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }

.last-recipe-note { font-size: 11px; color: var(--ink-muted); }

/* ── BACK TO TOP ── */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 76px;
  z-index: 21;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink-muted);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.15s, background 0.15s;
}
.back-to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { color: var(--ink); background: rgba(28,28,26,0.04); }

.rf-clear-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.rf-clear-group[hidden] { display: none; }
.rf-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  flex-shrink: 0;
}
.rf-clear-btn {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  padding: 6px 14px;
  font-family: var(--sans);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.12s;
}
.rf-clear-btn:hover { background: #134d87; }
.rf-clear-btn:active { transform: scale(0.97); }

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.rc-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  color: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.18s;
}
.rc-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(28,28,26,0.18);
  transform: translateY(-2px);
}

.rc-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f0ede8;
  flex-shrink: 0;
}
.rc-new-ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  background: #fff;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 1;
}

.rc-type-glyph {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  border-radius: 7px;
  z-index: 1;
}

.rc-alergenos {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: calc(100% - 16px);
  pointer-events: none;
}
.rc-alergeno-chip {
  font-size: 12px;
  line-height: 1;
  padding: 3px 4px;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(4px);
  border-radius: 5px;
}
.rc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.rc-card:hover .rc-img { transform: scale(1.03); }
.rc-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.rc-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.rc-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Always reserve 2 lines of title height so badges start at the same
     height on every card; shorter titles get centered in this space
     instead of sticking to the top. */
  min-height: 50px;
}
.rc-name {
  flex: 1;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  margin: 0;
  /* Longer titles truncate with an ellipsis at 2 lines. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rc-meta-wrap { position: relative; }

.rc-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rc-meta::-webkit-scrollbar { display: none; }
.rc-meta .rc-badge { flex-shrink: 0; }

/* Fade hint at the edges when there's more to scroll */
.rc-meta-wrap::before,
.rc-meta-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.rc-meta-wrap::before { left: 0;  background: linear-gradient(to right, var(--cream), transparent); }
.rc-meta-wrap::after  { right: 0; background: linear-gradient(to left,  var(--cream), transparent); }
.rc-meta-wrap.can-scroll-left::before  { opacity: 1; }
.rc-meta-wrap.can-scroll-right::after { opacity: 1; }

.rc-meta-scroll-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--cream);
  color: var(--ink-muted);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 2;
  padding: 0;
}
.rc-meta-scroll-btn:hover { background: rgba(28,28,26,0.06); color: var(--ink); }
.rc-meta-scroll-left  { left: -4px; }
.rc-meta-scroll-right { right: -4px; }
.rc-meta-wrap.can-scroll-left .rc-meta-scroll-left,
.rc-meta-wrap.can-scroll-right .rc-meta-scroll-right {
  display: flex;
}
.rc-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto; /* always pinned to the card's bottom edge */
}
.rc-date {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

/* Recipe badge pills */
.rc-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.rc-badge[data-filter-key] {
  cursor: pointer;
  transition: filter 0.12s, transform 0.12s;
}
.rc-badge[data-filter-key]:hover { filter: brightness(0.93); }
.rc-badge[data-filter-key]:active { transform: scale(0.96); }
.rc-badge-desayuno   { background: #FFFDE7; color: #9E7B00; }
.rc-badge-principal  { background: #E3F2FD; color: #1565C0; }
.rc-badge-entrante   { background: #F3E5F5; color: #6A1B9A; }
.rc-badge-aperitivo  { background: #FFF8E1; color: #E65100; }
.rc-badge-postre     { background: #FCE4EC; color: #AD1457; }
.rc-badge-bebida     { background: #E1F5FE; color: #01579B; }
.rc-badge-guarnicion { background: #E0F2F1; color: #00695C; }
.rc-badge-salsa      { background: #FBE9E7; color: #BF360C; }
.rc-badge-fondo      { background: #FFF3E0; color: #B45309; }
.rc-badge-conserva   { background: #F1F8E9; color: #558B2F; }
.rc-badge-masa       { background: #EDE7F6; color: #4527A0; }
.rc-badge-dulce          { background: #FFF3E0; color: #B45309; }
.rc-badge-salado         { background: #E8F5E9; color: #2E7D32; }
.rc-badge-facil          { background: #E8F5E9; color: #2E7D32; }
.rc-badge-media          { background: #FFF8E1; color: #9A4607; }
.rc-badge-dificil        { background: #FFEBEE; color: #C62828; }
.rc-badge-vegetariano    { background: #E8F5E9; color: #2E7D32; }
.rc-badge-vegano         { background: #DCEDC8; color: #33691E; }
.rc-badge-htm            { background: #E8EAF6; color: #283593; }
.rc-badge-cocinaselo     { background: #FFF3E0; color: #A23F0A; }
.rc-badge-fit            { background: #F1F8E9; color: var(--green); }
.rc-badge-publi          { background: #EDE7F6; color: #4527A0; }

/* Video quick-access icon buttons */
.rc-videos {
  display: flex;
  flex-direction: row;
  gap: 5px;
  flex-shrink: 0;
}
.rc-video-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--vcolor, #333);
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  transition: filter 0.15s, transform 0.12s;
}
.rc-video-btn svg { width: 12px; height: 12px; }
.rc-video-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.rc-video-btn svg { display: block; }

@media (max-width: 900px) {
  .recipe-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .recipe-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rc-name { font-size: 16px; }
  .rc-body { padding: 10px 12px 12px; gap: 6px; }
}