.tpp-finder {
  --tpp-ink: #1f1c19;
  --tpp-muted: #6f6861;
  --tpp-accent: #9b4b2c;
  --tpp-card-bg: #fff;
  --tpp-cream: #f7f3ed;
  --tpp-line: #ded7cf;
  --tpp-active-text: #fff;
  --tpp-cols: 3;
  --tpp-cols-tablet: 2;
  --tpp-cols-mobile: 1;
  --tpp-radius: 16px;
  --tpp-image-ratio: 4 / 3;
  --tpp-heading-size: 54px;
  --tpp-title-size: 25px;
  color: var(--tpp-ink);
  font-family: inherit;
  margin: 0 auto;
  max-width: 1200px;
}
.tpp-heading { background: transparent !important; color: var(--tpp-ink) !important; margin-bottom: 28px; max-width: 720px; padding: 0 !important; }
.tpp-heading h2 { background: transparent !important; color: var(--tpp-ink) !important; font-size: clamp(32px, 5vw, var(--tpp-heading-size)); line-height: 1.05; margin: 0 0 12px; }
.tpp-heading p { background: transparent !important; color: var(--tpp-ink) !important; font-size: 17px; }
.tpp-controls { align-items: center; display: flex; gap: 30px; justify-content: space-between; margin-bottom: 32px; width: 100%; }
.tpp-filters { flex: 0 1 663px; margin: 0; }
.tpp-filter-select {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--tpp-card-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='m1 1 7 7 7-7' fill='none' stroke='%231f1c19' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 40px center;
  background-repeat: no-repeat;
  background-size: 16px 10px;
  border: 1px solid var(--tpp-line);
  border-radius: 8px;
  color: var(--tpp-ink);
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  padding: 12px 72px 12px 14px;
  width: 100%;
}
.tpp-filter-select:hover { border-color: var(--tpp-accent); }
.tpp-filter-select:focus-visible { border-color: var(--tpp-accent); outline: 3px solid color-mix(in srgb, var(--tpp-accent) 35%, transparent); outline-offset: 2px; }
.tpp-result-count { color: var(--tpp-ink); flex: 0 0 auto; font-size: 17px; margin: 0; text-align: right; }
.tpp-grid { display: grid; gap: 26px; grid-template-columns: repeat(var(--tpp-cols), minmax(0, 1fr)); }
.tpp-card { background: var(--tpp-card-bg); border: 1px solid var(--tpp-line); border-radius: var(--tpp-radius); box-shadow: 0 8px 28px rgba(31, 28, 25, .07); overflow: hidden; }
.tpp-card-clickable { cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.tpp-card-clickable:hover { border-color: var(--tpp-accent); box-shadow: 0 12px 34px rgba(31, 28, 25, .12); transform: translateY(-2px); }
.tpp-card-clickable:has(.tpp-recipe summary:focus-visible) { border-color: var(--tpp-accent); outline: 3px solid color-mix(in srgb, var(--tpp-accent) 35%, transparent); outline-offset: 3px; }
@supports selector(:has(*)) { .tpp-card-clickable .tpp-recipe summary:focus-visible { outline: none; } }
.tpp-card-clickable:has(.tpp-recipe[open]) { border-color: var(--tpp-accent); }
.tpp-card[hidden] { display: none; }
.tpp-card-image { aspect-ratio: 4 / 3; background: var(--tpp-cream); overflow: hidden; }
.tpp-finder .tpp-card-image { position: relative; }
/* !important: some themes (Twenty Twenty-One) put an inline width/height style on every attachment image. */
.tpp-finder .tpp-card-image img { display: block; height: 100% !important; inset: 0; max-height: none !important; max-width: none !important; object-fit: cover; position: absolute; width: 100% !important; }
.tpp-card-body { padding: 24px; }
.tpp-eyebrow { color: var(--tpp-accent); font-size: 12px; font-weight: 800; letter-spacing: .09em; margin: 0 0 8px; text-transform: uppercase; }
.tpp-card h3 { color: var(--tpp-ink); font-size: var(--tpp-title-size); line-height: 1.15; margin: 0 0 10px; }
.tpp-byline { color: var(--tpp-muted); font-size: 14px; line-height: 1.45; margin: -2px 0 10px; }
.tpp-byline span { color: var(--tpp-ink); font-weight: 700; }
.tpp-excerpt { color: var(--tpp-muted); line-height: 1.6; }
.tpp-recipe { border-top: 1px solid var(--tpp-line); margin-top: 20px; padding-top: 16px; }
.tpp-recipe summary { color: var(--tpp-accent); cursor: pointer; font-size: 12px; font-weight: 800; }
.tpp-card-clickable .tpp-recipe-content { cursor: text; }
.tpp-recipe-content { color: var(--tpp-muted) !important; line-height: 1.6; padding-top: 14px; }
.tpp-recipe-content p, .tpp-recipe-content li { color: var(--tpp-muted) !important; }
.tpp-recipe-content strong { color: inherit; }
.tpp-recipe-content h4 { color: var(--tpp-ink); font-size: 16px; margin: 16px 0 6px; }
.tpp-recipe-content ul { padding-left: 20px; }
.tpp-no-results, .tpp-empty { background: var(--tpp-cream); border-radius: 12px; padding: 24px; }
.tpp-credit { color: var(--tpp-muted); font-size: 12px; margin-top: 24px; text-align: right; }
.tpp-credit a { color: inherit; }
@media (max-width: 980px) { .tpp-grid { grid-template-columns: repeat(var(--tpp-cols-tablet), minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .tpp-controls { align-items: stretch; flex-direction: column; gap: 12px; margin-bottom: 24px; }
  .tpp-filters { flex-basis: auto; width: 100%; }
  .tpp-result-count { text-align: left; }
  .tpp-grid { grid-template-columns: repeat(var(--tpp-cols-mobile), minmax(0, 1fr)); }
  .tpp-filter-select { font-size: 16px; }
  .tpp-card-body { padding: 20px; }
}