/* Article comparison tables, shared by all locales. */
.coffee-valve-guide-page main .articles { container-type: inline-size; }
.coffee-valve-guide-page main .articles .article-table-title {
  margin-block: 2rem 1rem;
  padding-inline-start: .85rem;
  border-inline-start: 4px solid #a87550;
  font-weight: 700;
  line-height: 1.5;
  scroll-margin-top: 11rem;
}
.coffee-valve-guide-page main .articles .article-table-hint {
  margin: 0 0 .65rem;
  color: #68594d;
  font-size: .875rem;
  line-height: 1.6;
}
.article-table-scroll {
  max-width: 100%;
  margin-block: 0 1.5rem;
  overflow-x: auto;
  border: 1px solid #ded5ca;
  border-radius: 12px;
  background: #fff;
  scrollbar-color: #a87550 #f4eee7;
  scrollbar-width: thin;
}
.article-table-scroll:focus-visible {
  outline: 3px solid #a87550;
  outline-offset: -3px;
}
.articles .comparison-table {
  width: 100%;
  min-width: 640px;
  margin: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: #3e352e;
  font-size: 1rem;
  line-height: 1.75;
}
.articles .comparison-table th,
.articles .comparison-table td {
  padding: 1.15rem 1.25rem;
  border: 0;
  border-inline-end: 1px solid #e6dfd6;
  border-block-end: 1px solid #e6dfd6;
  text-align: start;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
.articles .comparison-table thead th {
  background: #65503f;
  color: #fff;
  font-weight: 700;
  vertical-align: middle;
  border-color: #897260;
}
.articles .comparison-table thead th:nth-child(2) { background: #805538; }
.articles .comparison-table tr > :first-child { width: 25%; }
.articles .comparison-table tbody th {
  background: #f4eee7;
  color: #594332;
  font-weight: 700;
}
.articles .comparison-table tbody td { background: #fff; }
.articles .comparison-table tbody td:nth-child(2) { background: #fcf7f0; }
.articles .comparison-table tbody tr:nth-child(even) td { background: #faf9f7; }
.articles .comparison-table tbody tr:nth-child(even) td:nth-child(2) { background: #f7efe3; }
.articles .comparison-table tbody tr:last-child > * { border-block-end: 0; }
.articles .comparison-table tr > :last-child { border-inline-end: 0; }
.articles .comparison-table tr > :first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
}
/* Keep the reading direction and frozen label column consistent in Arabic. */
html[lang="ar"] .article-table-scroll { direction: rtl; }
@container (min-width: 640px) {
  .coffee-valve-guide-page main .articles .article-table-hint { display: none; }
}
@media (max-width: 767.98px) {
  .articles .comparison-table { font-size: .9375rem; }
  .articles .comparison-table th,
  .articles .comparison-table td { padding: .95rem 1rem; }
}
/* One complete data column must fit beside the frozen labels, even at 320px. */
@container (max-width: 599px) {
  .articles .comparison-table { width: calc(200% - 104px); min-width: 0; }
  .articles .comparison-table tr > :first-child { width: 104px; }
}
/* Two-column guides fit the article width without hiding the description on mobile. */
.articles .comparison-table.comparison-table-two-col {
  width: 100%;
  min-width: 0;
}
.articles .comparison-table.comparison-table-two-col tr > :first-child {
  width: 34%;
  position: static;
}
@media print {
  .article-table-scroll { overflow: visible; }
  .articles .comparison-table { min-width: 0; }
  .articles .comparison-table tr > :first-child { position: static; }
  .article-table-hint { display: none; }
}