/* Commerce.
   .pricing-grid / .pricing-plan / .pricing-featured / .plan-price – plan cards
   .comparison-table – plan comparison
   .product-viewer (+ -stage, -thumbs) – CSS-only product gallery: radios + :has, up to 6 views
   .rating / .rating-stars – star rating
   .order-lines / .order-line / .order-totals / .order-total – cart and order summary */
@layer components {
  .pricing-grid { align-items: stretch; }
  .pricing-plan { display: flex; flex-direction: column; gap: 1.5rem; }
  .pricing-plan > h3 { margin-block-start: 0; }
  .pricing-plan ul { padding-inline-start: 2rem; }
  .pricing-plan li + li { margin-block-start: .6rem; }
  .pricing-plan .plan-actions { margin-block-start: auto; padding-block-start: 1rem; display: grid; gap: 1rem; }
  .pricing-featured { border-color: var(--accent); border-width: .2rem; }
  .plan-price { font-size: 4rem; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
  .plan-price small { display: block; font-size: var(--small-size); font-weight: 400; color: var(--muted); line-height: 1.6; }
  .comparison-table { inline-size: 100%; border-collapse: collapse; table-layout: fixed; }
  .comparison-table caption { text-align: start; padding-block-end: 1.5rem; color: var(--muted); font-size: var(--small-size); }
  .comparison-table th, .comparison-table td { text-align: start; padding: 1.2rem; border-block-end: .1rem solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
  .comparison-table thead { background: var(--surface); }
  .comparison-table th:first-child { inline-size: 34%; }
  .product-viewer { display: grid; gap: 1.6rem; }
  .product-viewer > input { position: absolute; opacity: 0; inline-size: .1rem; block-size: .1rem; }
  .product-viewer-stage { display: grid; border-radius: var(--radius); background: var(--surface); }
  .product-viewer-stage > * { grid-area: 1 / 1; margin: 0; display: none; }
  .product-viewer-stage svg { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 10 / 7; }
  .product-viewer-thumbs { display: grid; grid-template-columns: repeat(var(--thumbs, 4), minmax(0, 1fr)); gap: 1.2rem; }
  .product-viewer-thumbs > label { display: block; padding: .6rem; border: .2rem solid color-mix(in srgb, var(--accent) calc(var(--viewer-on, 0) * 100%), var(--line)); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
  .product-viewer-thumbs svg { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 10 / 7; }
  .product-viewer:has(> input:nth-of-type(1):checked) .product-viewer-stage > :nth-child(1), .product-viewer:has(> input:nth-of-type(1):checked) .product-viewer-thumbs > :nth-child(1) { --viewer-on: 1; display: block; }
  .product-viewer:has(> input:nth-of-type(1):focus-visible) .product-viewer-thumbs > :nth-child(1) { outline: .25rem solid var(--accent); outline-offset: .3rem; }
  .product-viewer:has(> input:nth-of-type(2):checked) .product-viewer-stage > :nth-child(2), .product-viewer:has(> input:nth-of-type(2):checked) .product-viewer-thumbs > :nth-child(2) { --viewer-on: 1; display: block; }
  .product-viewer:has(> input:nth-of-type(2):focus-visible) .product-viewer-thumbs > :nth-child(2) { outline: .25rem solid var(--accent); outline-offset: .3rem; }
  .product-viewer:has(> input:nth-of-type(3):checked) .product-viewer-stage > :nth-child(3), .product-viewer:has(> input:nth-of-type(3):checked) .product-viewer-thumbs > :nth-child(3) { --viewer-on: 1; display: block; }
  .product-viewer:has(> input:nth-of-type(3):focus-visible) .product-viewer-thumbs > :nth-child(3) { outline: .25rem solid var(--accent); outline-offset: .3rem; }
  .product-viewer:has(> input:nth-of-type(4):checked) .product-viewer-stage > :nth-child(4), .product-viewer:has(> input:nth-of-type(4):checked) .product-viewer-thumbs > :nth-child(4) { --viewer-on: 1; display: block; }
  .product-viewer:has(> input:nth-of-type(4):focus-visible) .product-viewer-thumbs > :nth-child(4) { outline: .25rem solid var(--accent); outline-offset: .3rem; }
  .product-viewer:has(> input:nth-of-type(5):checked) .product-viewer-stage > :nth-child(5), .product-viewer:has(> input:nth-of-type(5):checked) .product-viewer-thumbs > :nth-child(5) { --viewer-on: 1; display: block; }
  .product-viewer:has(> input:nth-of-type(5):focus-visible) .product-viewer-thumbs > :nth-child(5) { outline: .25rem solid var(--accent); outline-offset: .3rem; }
  .product-viewer:has(> input:nth-of-type(6):checked) .product-viewer-stage > :nth-child(6), .product-viewer:has(> input:nth-of-type(6):checked) .product-viewer-thumbs > :nth-child(6) { --viewer-on: 1; display: block; }
  .product-viewer:has(> input:nth-of-type(6):focus-visible) .product-viewer-thumbs > :nth-child(6) { outline: .25rem solid var(--accent); outline-offset: .3rem; }
  .rating { display: inline-flex; align-items: center; gap: .8rem; color: var(--muted); font-size: var(--small-size); }
  .rating-stars { color: var(--accent); letter-spacing: .15em; font-size: var(--text-size); }
  .order-lines { display: grid; gap: 1.6rem; margin-inline: 0; margin-block-end: 0; padding: 0; list-style: none; }
  .order-line { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: 1.6rem; align-items: center; }
  .order-line svg { inline-size: 100%; block-size: auto; border-radius: var(--radius); background: var(--surface); }
  .order-totals { display: grid; gap: .8rem; margin-inline: 0; margin-block-end: 0; }
  .order-totals > div { display: flex; justify-content: space-between; gap: 2rem; }
  .order-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
  .order-total { padding-block-start: 1.2rem; border-block-start: .1rem solid var(--line); font-size: 2.2rem; font-weight: 650; }
  @media (width <= 50em) {
    .comparison-table { font-size: var(--small-size); }
    .comparison-table th, .comparison-table td { padding: .8rem .6rem; }
  }
}