.product-main {
  box-sizing: border-box;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 72px var(--space-24) var(--space-120);
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  overflow-wrap: anywhere;
}

.product-heading, .product-search-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.product-heading h1 {
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.product-heading .sf-intro { max-width: var(--measure-lead); }
.product-search-form, .product-filters, .product-pagination, .product-results-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
}

.product-search-form { width: min(100%, 680px); }
.product-search-form .sf-search { flex: 1 1 300px; }
.product-search-form .sf-btn:hover { background: var(--link); }
.product-meta { margin: 0; color: var(--ink-muted); font-size: 15px; }
.product-filter-link, .product-pagination a, .product-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

.product-filter-link:focus-visible, .product-card a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.product-results { display: flex; flex-direction: column; gap: var(--space-24); }
.product-results-heading { justify-content: space-between; }
.product-results-heading h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-40) var(--space-24);
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-card { min-width: 0; }
.product-card a {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  height: 100%;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-cell);
}

.product-card a:hover h3 { color: var(--link); text-decoration: underline; }
.product-photo {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  min-width: 0;
  padding: var(--space-16);
  background: var(--surface-panel);
  border-radius: var(--radius-cell);
  color: var(--ink-muted);
  font-size: 14px;
  text-align: center;
  overflow: hidden;
}

.product-photo img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.product-card-text { display: flex; flex-direction: column; gap: var(--space-6); }
.product-card .product-meta { min-height: 1lh; }
.product-card h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 2lh;
  overflow: hidden;
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.product-card-ingredients {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  list-style: none;
  border-top: 1px solid var(--line-soft);
  margin: var(--space-6) 0 0;
  padding: var(--space-10) 0 0;
  color: var(--ink-secondary);
  font-size: 14px;
}

.product-card-ingredients li { display: flex; justify-content: space-between; gap: var(--space-8); }
.product-card .product-meta, .product-card-ingredients span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.product-card-amount { flex-shrink: 0; max-width: 44%; text-align: right; color: var(--ink-muted); }
.product-pagination {
  justify-content: center;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-12);
  gap: var(--space-16);
  color: var(--ink-muted);
  font-size: 15px;
}

.product-notice {
  box-sizing: border-box;
  margin: 0;
  padding: var(--space-24);
  border-radius: var(--radius-cell);
  background: var(--surface-panel);
  color: var(--ink-secondary);
}

.product-notice h2, .product-notice h3 { margin: 0; color: var(--ink); font-size: 21px; }
.product-notice p { margin: var(--space-8) 0 0; }
.product-notice a { display: inline-block; margin-top: var(--space-12); }
.product-detail { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: no-preference) {
  html:has(.product-detail) { scroll-behavior: smooth; }
}

.product-hero {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 860px);
  align-items: start;
  gap: var(--space-40);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-56) var(--space-24) var(--space-48);
}

.product-hero.has-product-photo { grid-template-columns: minmax(0, 1fr) min(340px, 34%); }
.product-hero .sf-link { display: inline-flex; align-items: center; min-height: var(--touch-min); font-size: 15px; }
.product-hero .product-photo {
  aspect-ratio: 1;
  padding: var(--space-24);
  background: var(--surface);
  border-radius: var(--radius-panel);
}

.product-key-facts {
  max-width: var(--container-max);
  box-sizing: border-box;
  margin: 0 auto;
  padding: var(--space-40) var(--space-24) 0;
}

.product-key-facts dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-24);
  margin: 0;
  padding-bottom: var(--space-32);
  border-bottom: 1px solid var(--line-soft);
}

.product-key-facts dt, .product-serving dt { font-size: 14px; color: var(--ink-muted); }
.product-key-facts dd, .product-serving dd { margin: var(--space-4) 0 0; font-weight: 600; }
.product-key-facts dd { font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; }
.product-key-facts .product-price-date { color: var(--ink-muted); font-size: 14px; font-weight: 400; letter-spacing: normal; }

.product-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-48);
  padding-block: var(--space-56) var(--space-120);
}

.product-content.has-product-toc { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); }
.product-toc { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.product-toc span { padding: 0 var(--space-12) var(--space-8); color: var(--ink-muted); font-size: 13px; }
.product-toc a:hover, .product-toc a:focus-visible { background: var(--surface-panel); }
.product-article { display: flex; flex-direction: column; gap: var(--space-96); min-width: 0; }
.product-content:not(.has-product-toc) .product-article { max-width: var(--measure-footer); }
.product-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  scroll-margin-top: calc(var(--header-height) + var(--space-24));
}

.product-section .sf-display-l { font-size: 40px; }
.product-section .sf-section-head > .sf-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

.product-serving {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-32);
  margin: 0;
}

.product-facts-table { width: 100%; border-collapse: collapse; text-align: start; }
.product-facts-table th, .product-facts-table td {
  padding: var(--space-12) var(--space-8);
  border-bottom: 1px solid var(--line-soft);
  text-align: start;
  vertical-align: top;
}

.product-facts-table thead th { font-size: 14px; color: var(--ink-secondary); border-bottom-color: var(--line); }
.product-facts-table th:first-child { padding-inline-start: 0; width: 50%; }
.product-facts-table th:not(:first-child), .product-facts-table td { text-align: end; }
.product-facts-table th:last-child, .product-facts-table td:last-child { padding-inline-end: 0; }
.product-facts-table tbody th { font-weight: 500; }
.product-facts-table .product-ingredient-child th { padding-inline-start: var(--space-20); font-weight: 400; }
.product-other h3, .product-label-directions h3 { margin: 0 0 var(--space-8); font-size: 19px; font-weight: 600; }
.product-label-directions p, .product-quality-summary { margin: 0; max-width: var(--measure-lead); }
.product-other ul {
  columns: 2 13rem;
  column-gap: var(--space-32);
}

.product-other ul, .product-label-flags {
  margin: 0;
  padding-inline-start: var(--space-20);
  color: var(--ink-secondary);
}

.product-other li, .product-label-flags li { break-inside: avoid; margin-block-end: var(--space-4); }
.product-label-source p { margin: 0; }
.product-label-photo {
  box-sizing: border-box;
  width: min(100%, 360px);
  margin: 0;
  padding: var(--space-24);
  border-radius: var(--radius-panel);
  background: var(--surface-panel);
  scroll-margin-top: calc(var(--header-height) + var(--space-24));
}

.product-label-photo figcaption { margin-bottom: var(--space-12); font-weight: 600; }
.product-label-photo a { display: block; }
.product-label-photo img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  margin-bottom: var(--space-12);
}

.product-quality-overview { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }
.product-rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-10);
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-cell);
  background: var(--surface-panel);
  color: var(--ink-secondary);
}

.product-rating[data-grade="excellent"], .product-rating[data-grade="very good"] {
  background: var(--evidence-weak);
  color: #134879;
}

.product-rating[data-grade="fair"], .product-rating[data-grade="poor"] {
  background: #FFF4E8;
  color: #8A3B00;
}

.product-rating strong { font-size: 1.3em; line-height: 1.1; }
.product-quality-overview .product-rating strong { font-size: 32px; letter-spacing: -0.02em; }
.product-hero .product-rating-link { flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
.product-rating-link:hover { color: var(--ink); text-decoration: none; }

.product-quality-criterion-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
}

.product-quality-criteria { border-bottom: 1px solid var(--line-soft); }
.product-quality-criteria summary { color: var(--ink); }
.product-quality-criteria summary svg { flex: none; color: var(--ink-muted); }
.product-quality-criteria summary:hover { color: var(--link); }
.product-quality-criteria summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.product-quality-components { margin: 0; padding: 0; list-style: none; }
.product-quality-components > li { padding-block: var(--space-16); border-top: 1px solid var(--line-soft); }
.product-quality-criterion-heading { justify-content: space-between; }
.product-quality-criterion-heading h3 { margin: 0; font-size: 16px; }
.product-quality-criterion-heading span { font-weight: 600; }
.product-quality-components p, .product-quality-components ul { margin: var(--space-6) 0 0; color: var(--ink-secondary); }
.product-quality-components ul { padding-inline-start: var(--space-20); }
.product-quality-sign { font-weight: 600; }

.product-packaging dl { margin: 0; border-bottom: 1px solid var(--line-soft); }
.product-packaging .dl-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--space-24);
  padding-block: var(--space-20);
  border-top: 1px solid var(--line-soft);
}

.product-packaging dt { font-weight: 600; }
.product-packaging dd { margin: 0; }

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

@media (min-width: 1100px) {
  .product-similar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .product-content.has-product-toc { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .product-hero.has-product-photo { grid-template-columns: minmax(0, 1fr); }
  .product-hero { gap: var(--space-24); }
  .product-hero .product-photo { width: min(100%, 320px); justify-self: center; }
  .product-label-photo { align-self: center; }
  .product-main { padding-block: var(--space-48) var(--space-96); gap: var(--space-32); }
  .product-hero { padding-block: var(--space-32); }
  .product-key-facts { padding-top: var(--space-32); }
  .product-key-facts dl { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: var(--space-16); }
  .product-key-facts dd { font-size: 20px; }
  .product-content { padding-block: var(--space-40) var(--space-96); gap: var(--space-48); }
  .product-article { gap: var(--space-56); }
  .product-section .sf-display-l { font-size: 34px; }
}

@media (max-width: 560px) {
  .product-search-form .sf-search { flex-basis: 100%; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32) var(--space-16); }
  .product-card h3 { font-size: 17px; }
  .product-facts-table { font-size: 15px; }
}

@media (max-width: 340px) {
  .product-grid { grid-template-columns: minmax(0, 1fr); }
}