/* Dropbox color fields / editorial rows; Linear pricing comparison; Nothing product grid.
   The small native SVGs explain volume, relative width and drinking position. */
.illustrated-specs .spec-art { height: 48px; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 8px; }
.illustrated-specs .spec-art svg { height: 48px; width: 100%; max-width: 94px; overflow: visible; }
.illustrated-specs .spec-art .capacity-drawing { max-width: 64px; }
.illustrated-specs small { display: block; font-size: 11px; line-height: 1.4; margin-top: 5px; max-width: 18ch; color: #55471f; }
.product-page :is(#buy-or-skip,#compare,#related) { scroll-margin-top: 24px; }
/* Reuse the approved buying-note rows: heading beside text, within one color field. */
.decision-section { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); align-items: start; gap: clamp(28px,4vw,60px); padding: clamp(28px,3.5vw,48px) var(--section-inset); background: #f5eabe; }
.decision-heading .section-kicker { margin-bottom: 18px; }
.decision-heading h2 { max-width: 10ch; margin: 0; font-size: clamp(32px,3.3vw,48px); font-weight: 700; line-height: 1.05; letter-spacing: -.06em; }
.decision-article { min-width: 0; max-width: 70ch; font-size: 18px; line-height: 1.55; letter-spacing: -.012em; }
.decision-article > p + p { margin-top: 16px; }
.decision-article strong { font-weight: 700; }
.decision-source { margin-top: 20px; font-size: 11px; line-height: 1.5; letter-spacing: 0; color: #526078; }
.decision-compare { display: block; width: fit-content; margin-top: 10px; font-size: 13px; font-weight: 650; color: var(--ink); text-underline-offset: 4px; }
.product-content { grid-template-columns: minmax(0,1fr); }
.comparison-section { min-width: 0; }
.comparison-scroll { width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: #8d9ab2 #e4e8ee; }
.comparison-scroll:focus-visible { outline: 3px solid #253fc9; outline-offset: 4px; }
.comparison-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; background: #fbfaf7; table-layout: fixed; }
.comparison-table thead td { width: 18%; position: sticky; left: 0; z-index: 2; background: #fbfaf7; }
.comparison-table th,.comparison-table td { padding: 20px 24px; text-align: left; vertical-align: top; font-size: 14px; border-bottom: 1px solid #ccd1d9; }
.comparison-table tbody th { font-size: 12px; font-weight: 500; color: #526078; vertical-align: middle; position: sticky; left: 0; z-index: 1; background: #fbfaf7; box-shadow: 1px 0 #ccd1d9; }
.comparison-table .featured-comparison { background: #f5eabe; }
.comparison-photo { height: 180px; display: grid; place-items: center; margin-bottom: 22px; background:transparent; }
.comparison-photo img { width: 100%; height: 180px; object-fit: contain; mix-blend-mode:normal; }
.comparison-eyebrow { display: block; font: 10px/1.4 var(--mono); color: #576078; margin-bottom: 10px; }
.comparison-table h3 { font-size: clamp(19px,1.75vw,25px); letter-spacing: -.04em; line-height: 1.12; margin-bottom: 8px; }
.comparison-variant { display: block; font-size: 12px; font-weight: 400; line-height: 1.5; color: #526078; }
.cell-note { display: block; font-size: 12px; line-height: 1.5; color: #526078; margin-top: 6px; }
.comparison-capacity { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.comparison-capacity svg { width: auto; height: 42px; }
.comparison-capacity strong { font-size: 18px; }
.comparison-size { display: grid; gap: 16px; }
.size-measurement { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 12px; align-items: center; }
.size-measurement strong { display: block; }
.width-drawing { display: block; width: 72px; height: auto; }
.size-drawing { display: block; width: 56px; height: 75px; justify-self: center; }
.size-reference { display: block; margin-top: 5px; max-width: 18ch; font-size: 11px; line-height: 1.4; color: #625077; }
.compare-shop { font-size: 13px; font-weight: 700; text-underline-offset: 4px; }
.compare-source { display: block; font-size: 11px; margin-top: 14px; text-underline-offset: 3px; }
.comparison-scroll-hint { display: none; font: 11px/1.5 var(--mono); padding-bottom: 12px; }
.related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.related-product { min-width: 0; display: flex; flex-direction: column; }
.related-photo { aspect-ratio: 1.4; display: grid; place-items: center; overflow: hidden; margin-bottom: 22px; background:#fff; }
.related-photo img { width: 78%; height: 180px; object-fit: contain; mix-blend-mode:normal; transition: transform 240ms ease; }
.related-product .section-kicker { margin-bottom: 10px; color: #526078; font-size: 10px; }
.related-product h3 { font-size: 24px; letter-spacing: -.045em; line-height: 1.1; margin-bottom: 7px; }
.related-product p:not(.section-kicker) { font-size: 14px; line-height: 1.55; margin-bottom: 12px; max-width: 42ch; }
.related-product .related-variant { font-size: 12px !important; color: #526078; }
.related-fit { padding-top: 12px; border-top: 1px solid #bac5d8; }
.related-links { display: flex; gap: 10px 20px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 650; text-underline-offset: 4px; }
@media (hover:hover) and (pointer:fine) { .related-photo:hover img { transform: scale(1.05); } }
@media (max-width:950px) {
  .decision-section { gap: 28px; }
  .decision-article { font-size: 17px; }
  .comparison-table th,.comparison-table td { padding: 17px; }
  .size-measurement { gap: 8px; }
  .related-grid { gap: 18px; }
  .related-photo img { height: 150px; }
  .related-product h3 { font-size: 21px; }
}
@media (max-width:800px) { .comparison-scroll-hint { display: block; } }
@media (max-width:700px) {
  .decision-section { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
  .decision-heading .section-kicker { margin-bottom: 12px; }
  .decision-heading h2 { max-width: none; font-size: clamp(30px,8vw,38px); }
  .decision-article { font-size: 16px; }
  .comparison-table { min-width: 684px; }
  .comparison-table thead td { width: 84px; position: sticky; left: 0; z-index: 2; background: #fbfaf7; }
  .comparison-table tbody th { position: sticky; left: 0; z-index: 1; background: #fbfaf7; box-shadow: 1px 0 #ccd1d9; padding-inline: 12px; font-size: 11px; }
  .comparison-photo { height: 150px; }
  .comparison-photo img { height: 150px; }
  .related-grid { grid-template-columns: 1fr; gap: 36px; }
  .related-photo { aspect-ratio: 1.65; margin-bottom: 17px; }
  .related-photo img { height: 160px; }
  .related-product h3 { font-size: 26px; }
  .illustrated-specs { gap: 10px; }
  .illustrated-specs .spec-art,.illustrated-specs .spec-art svg { height: 36px; }
  .illustrated-specs .spec-art svg { max-width: 70px; }
  .illustrated-specs .spec-art .capacity-drawing { max-width: 48px; }
  .illustrated-specs small { font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) { .related-photo img { transition: none; } .related-photo:hover img { transform: none; } }
.comparison-price { display:grid; gap:5px; }
.comparison-price-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 10px; }
.comparison-table .comparison-price-line strong { font-size:clamp(20px,2.1vw,28px); line-height:1.15; font-variant-numeric:tabular-nums; }
.comparison-price-line del { color:var(--muted); font-size:14px; }
.comparison-price-date { display:block; color:var(--muted); font-size:11px; line-height:1.4; font-weight:400; }
.comparison-price-coupon,.comparison-price-status,.comparison-price-line small { font-size:12px; line-height:1.4; font-weight:400; }
.comparison-price-unknown,.comparison-price-options { font-size:16px; }
