@layer components{.price-matrix{margin-block-start:var(--space-l);& .price-matrix__panel{overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface)}& .price-matrix__scroll{overflow-x:auto}& .price-matrix__table{inline-size:100%;border-collapse:collapse;text-align:start}& .price-matrix__zone{padding:var(--space-xs)var(--space-s);border-block-end:1px solid var(--color-border);background:var(--color-surface-alt);color:var(--color-accent-strong);font-size:var(--size-step--2);font-weight:700;letter-spacing:var(--tracking-caption);text-align:start;text-transform:uppercase}& th, & td{padding:var(--space-xs)var(--space-s);white-space:nowrap}& thead th{border-block-end:2px solid var(--color-accent);background:var(--color-surface-alt);color:var(--color-text-muted);font-size:var(--size-step--2);font-weight:600;letter-spacing:var(--tracking-caption);text-align:center;text-transform:uppercase}& .price-matrix__size{display:block;color:var(--color-text);font-family:var(--font-display);font-size:var(--size-step-0);text-transform:none}& .price-matrix__kcal{display:block;font-weight:400;letter-spacing:normal;text-transform:none}& tbody tr{background:var(--color-surface);&:nth-child(even){background:var(--color-surface-alt)}@media(hover:hover){&:hover{background:var(--color-accent-surface)}}}& tbody :is(th, td){border-block-end:1px solid var(--color-border)}& tbody tr:last-child :is(th, td){border-block-end:0}& :is(thead th, tbody th):first-child{position:sticky;inset-inline-start:0;border-inline-end:1px solid var(--color-border);text-align:start}& tbody th{background:inherit;font-weight:700}& thead th:first-child{background:var(--color-surface-alt)}& td{font-family:var(--font-display);font-size:var(--size-step-1);text-align:center}& .price-matrix__missing{color:var(--color-text-muted);font-family:var(--font-sans);font-size:var(--size-step--1)}}}