.recipes-page {
  color: var(--ink);
  background: var(--cream);
}
.recipes-nav .is-current {
  color: white;
  background: var(--green);
}
.recipe-hero.pl-hero {
  position: relative;
  padding: clamp(120px, 18vh, 200px) var(--pl-page, clamp(20px, 5.5vw, 88px)) clamp(34px, 5vh, 56px);
  overflow: hidden;
  min-height: 0;
  color: var(--ink);
  background: var(--cream);
}
.recipe-hero.pl-hero .section-title { white-space: normal; text-wrap: balance; }
.recipe-hero.pl-hero .body-copy { max-width: 540px; }
.recipe-hero.pl-hero .pl-hero-blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .55;
  pointer-events: none;
}
.recipe-hero.pl-hero > :not(.pl-hero-blob) {
  position: relative;
  z-index: 1;
}
.recipe-hero.pl-hero .pl-hero-blob.b1 { width: 240px; height: 240px; background: var(--lime); top: -40px; right: 6%; }
.recipe-hero.pl-hero .pl-hero-blob.b2 { width: 160px; height: 160px; background: var(--mint); top: 120px; right: 22%; opacity: .7; }
.recipe-hero .section-title em { color: var(--green); }

.pl-strip {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--lime);
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 24px;
}
.pl-strip-track {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding: 12px 0;
  animation: pl-marquee 26s linear infinite;
}
.pl-strip-track span { font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pl-strip-track i { font-style: normal; opacity: .45; }
@keyframes pl-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pl-strip-track { animation: none; } }

.recipe-library {
  padding: clamp(34px, 5vh, 60px) var(--pl-page, clamp(20px, 5.5vw, 88px)) clamp(60px, 8vh, 100px);
  background: var(--cream);
}
.recipe-library-heading {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: 8vw;
}
.recipe-library-heading > p {
  max-width: 480px;
  margin: 0 0 30px;
}
.recipe-filter-slot {
  margin: 0 0 clamp(40px, 6vh, 80px);
}
/* Inline chip row — same style as Products page filter (.pl-filter) */
.recipe-filter-bar {
  position: relative;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.recipe-filter-bar::-webkit-scrollbar { display: none; }
.recipe-filter-bar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 9px 18px;
  background: transparent;
  color: var(--ink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, transform .15s ease;
}
.recipe-filter-bar button:hover { transform: translateY(-2px); }
.recipe-filter-bar button:focus-visible { outline: none; color: white; background: var(--green); }
.recipe-filter-bar button.is-active {
  color: white;
  background: var(--green);
}
.recipe-page-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.recipe-page-card {
  min-height: 400px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--soft-yellow);
  transition: opacity .25s ease, transform .25s ease;
}
.recipe-page-card:nth-child(4n + 2) { background: var(--surface-green); }
.recipe-page-card:nth-child(4n + 3) { background: var(--soft-yellow); }
.recipe-page-card:nth-child(4n + 4) { background: var(--surface-mint); }
.recipe-page-card.is-filtered-out { display: none; }
.recipe-card-media {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border: 0;
  border-bottom: 2px solid var(--ink);
  padding: 0;
  background: var(--ink);
  cursor: pointer;
}
.recipe-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.recipe-card-media::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(4,15,10,.45)); content: ""; }
.recipe-card-media:hover img { transform: scale(1.045); }
.recipe-card-media span {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: 52px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--yellow);
}
.recipe-card-media:hover span { color: white; border-color: var(--orange); background: var(--orange); }
.recipe-card-info {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 1 — Title */
.recipe-card-info h3 {
  margin: 0;
  font-size: clamp(.88rem, 1.05vw, 1.1rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 2 — Category tags */
.recipe-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.recipe-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1.5px solid var(--green);
  border-radius: 999px;
  color: var(--green);
  background: transparent;
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 3 — Duration */
.recipe-card-duration {
  margin: 0;
  color: var(--ink);
  font-size: .58rem;
  font-weight: 700;
  opacity: .55;
  letter-spacing: .03em;
}

/* 4 — Description */
.recipe-card-desc {
  margin: 0;
  font-size: .7rem;
  line-height: 1.5;
  opacity: .75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recipe-empty { margin: 50px 0 0; font-size: 1rem; font-weight: 700; text-align: center; }

.seasonal-recipe {
  min-height: 95svh;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  border-block: 2px solid var(--ink);
  background: var(--soft-yellow);
}
.seasonal-art { position: relative; display: grid; min-height: 720px; place-items: center; overflow: hidden; background: var(--light-orange); }
.seasonal-circle { position: absolute; width: 68%; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.seasonal-drink { position: relative; z-index: 2; width: 66%; height: 74%; object-fit: cover; border: 2px solid var(--ink); border-radius: 50% 50% 12px 12px; }
.seasonal-pack { position: absolute; z-index: 3; width: 20%; max-height: 58%; object-fit: contain; filter: drop-shadow(0 20px 18px rgba(21,56,42,.18)); }
.seasonal-pack-left { left: 6%; bottom: 3%; transform: rotate(-9deg); }
.seasonal-stamp { position: absolute; z-index: 4; top: 38px; right: 38px; display: grid; width: 118px; aspect-ratio: 1; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--cream); font-size: .7rem; font-weight: 800; line-height: 1.2; text-align: center; transform: rotate(8deg); }
.seasonal-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--section-space-y) var(--section-space-x);
  background: var(--soft-yellow);
}
.seasonal-copy > p:not(.recipe-kicker) { max-width: 470px; margin: 0 0 30px; }

.recipe-products-collection { min-height: 0; }
.recipe-products-collection .collection-products article { grid-template-rows: auto 1fr auto; }

.recipe-detail-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: -12px 0 20px; }
.recipe-detail-meta span { padding: 8px 11px; border: 2px solid rgba(21,56,42,.3); border-radius: 999px; font-size: .56rem; font-weight: 800; text-transform: uppercase; }


@media (max-width: 1200px) and (min-width: 901px) {
  .recipe-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .recipe-library {
    padding: clamp(34px, 5vh, 52px) var(--section-space-x-mobile) clamp(56px, 8vh, 86px);
  }
  .recipe-library-heading { grid-template-columns: 1fr; gap: 10px; }
  .recipe-filter-slot { margin: 0 0 clamp(32px, 5vh, 56px); }
  .recipe-page-grid { grid-template-columns: 1fr; }
  .recipe-page-card { min-height: 0; }
  .recipe-card-media { min-height: 62svh; }
  .seasonal-recipe { grid-template-columns: 1fr; }
  .seasonal-art { min-height: 72svh; }
  .seasonal-copy {
    padding: var(--section-space-y-mobile) var(--section-space-x-mobile);
  }
}

@media (max-width: 560px) {
  .recipe-library,
  .seasonal-copy {
    padding-inline: 16px;
  }
  .recipe-filter-bar { gap: 8px; }
  .recipe-filter-bar button { padding: 8px 14px; font-size: .66rem; }
  .recipe-page-grid { gap: 14px; }
  .recipe-card-media { min-height: 52svh; }
  .recipe-card-info { padding: 14px 16px 18px; gap: 6px; }
  .recipe-card-info h3 { font-size: clamp(1rem, 4.5vw, 1.2rem); }
  .seasonal-art { min-height: 62svh; }
  .seasonal-drink { width: 72%; height: 68%; }
  .seasonal-pack { width: 25%; }
  .seasonal-stamp { top: 20px; right: 18px; width: 88px; font-size: .58rem; }
}