:root {
  --oa-cream: #fbf8f2;
  --oa-ink: #1d1d1b;
  --oa-salmon: #de8f7e;
  --oa-aqua: #cfe4e2;
  --oa-border: #e7dfd4;
}

.oa-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-block: 1.5rem;
}

.oa-columns-1 { grid-template-columns: 1fr; }
.oa-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oa-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.oa-card {
  overflow: hidden;
  border: 1px solid var(--oa-border);
  border-radius: 3px;
  background: #fff;
}

.oa-card-image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--oa-cream); }
.oa-card-image img { width: 100%; height: 100%; object-fit: cover; }
.oa-card-placeholder { display: grid; place-items: center; background: color-mix(in srgb, var(--oa-aqua) 48%, var(--oa-cream)); text-decoration: none; }
.oa-card-placeholder span { display: grid; width: 4.25rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--oa-ink); border-radius: 50%; color: var(--oa-ink); font-family: Georgia, 'Times New Roman', serif; font-size: 1.35rem; letter-spacing: -.05em; }
.oa-card-body { padding: 1.15rem; }
.oa-card-body h3 { margin: 0 0 .65rem; }
.oa-card-body h3 a { color: var(--oa-ink); text-decoration: none; }
.oa-text-link { color: var(--oa-ink); text-decoration-color: var(--oa-salmon); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.oa-product-button { display: inline-block; margin-top: .5rem; background: var(--oa-salmon); color: var(--oa-ink); }
.oa-product-button:hover { background: var(--oa-ink); color: var(--oa-cream); }
.oa-recipe-details { margin-top: 2rem; }
.oa-recipe-details > p:first-child { display: inline-block; margin-right: 1.5rem; }
.oa-process-tables { margin-block: 1.75rem; overflow-x: auto; }
.oa-process-tables table { width: 100%; border-collapse: collapse; }
.oa-process-tables th, .oa-process-tables td { padding: .6rem .7rem; border: 1px solid var(--oa-border); text-align: left; vertical-align: top; }
.oa-process-tables th { background: color-mix(in srgb, var(--oa-aqua) 35%, var(--oa-cream)); font-weight: 700; }
.oa-source { border-top: 1px solid var(--oa-border); padding-top: 1rem; }
.oa-product-details { margin-top: 2rem; padding-top: 1.5rem; border-top: 3px solid var(--oa-salmon); }
.oa-price-note { font-style: italic; }
.oa-disclosure { margin-top: 1.25rem; font-size: .82rem; opacity: .75; }
.oa-empty { font-style: italic; }
.oa-auto-section { margin-top: clamp(2.5rem, 6vw, 5rem); padding-top: 2rem; border-top: 3px solid var(--oa-salmon); }
.oa-auto-section + .oa-auto-section { border-top-color: var(--oa-aqua); }
.oa-auto-section > h2 { margin-top: 0; }
.oa-directory-section + .oa-directory-section { margin-top: clamp(2.5rem, 5vw, 4rem); }
.oa-directory-section > h2 { padding-bottom: .65rem; border-bottom: 3px solid var(--oa-salmon); }
.oa-directory-section:nth-child(even) > h2 { border-bottom-color: var(--oa-aqua); }

@media (max-width: 900px) {
  .oa-card-grid, .oa-columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .oa-card-grid, .oa-columns-2, .oa-columns-4 { grid-template-columns: 1fr; }
}

@media print {
  .oa-card-grid, .oa-product-button { display: none !important; }
  .oa-recipe-details { font-family: Georgia, 'Times New Roman', serif; font-size: 12pt; }
  .oa-recipe-details h2 { font-size: 12pt; font-weight: 700; break-after: avoid; }
  .oa-process-tables { overflow: visible; }
  .oa-process-tables table, .oa-process-tables tr { break-inside: avoid; }
  .oa-process-tables th { background: #fff; font-weight: 700; }
}