.ek-matrix {
    margin-block: var(--ek-space-6);
    padding: clamp(var(--ek-space-4), 3vw, var(--ek-space-6));
    border: 1px solid var(--ek-color-border);
    border-radius: var(--ek-radius-xl);
    background: var(--ek-color-surface);
    box-shadow: var(--ek-shadow-soft);
}

.ek-matrix__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--ek-space-4);
    margin-block-end: var(--ek-space-4);
}

.ek-matrix__head h2 { margin-block: var(--ek-space-1) var(--ek-space-2); }
.ek-matrix__head p { margin: 0; }
.ek-matrix__hint { padding: var(--ek-space-2) var(--ek-space-3); border-radius: 999px; background: color-mix(in srgb, var(--ek-color-dusty-blue) 20%, transparent); font-size: var(--ek-font-size-2); }

.ek-matrix__scroll {
    overflow: auto;
    max-inline-size: 100%;
    border: 1px solid var(--ek-color-border);
    border-radius: var(--ek-radius-lg);
    overscroll-behavior-inline: contain;
}

.ek-matrix__table {
    inline-size: 100%;
    min-inline-size: 38rem;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ek-color-bg);
}

.ek-matrix__table th,
.ek-matrix__table td {
    padding: var(--ek-space-3);
    border-block-end: 1px solid var(--ek-color-border);
    border-inline-end: 1px solid var(--ek-color-border);
    text-align: center;
    vertical-align: middle;
}

.ek-matrix__table tr:last-child > * { border-block-end: 0; }
.ek-matrix__table tr > *:last-child { border-inline-end: 0; }
.ek-matrix__table thead th { position: sticky; inset-block-start: 0; z-index: 2; background: var(--ek-color-cream); }
.ek-matrix__axis { position: sticky; inset-inline-start: 0; z-index: 3; min-inline-size: 8rem; background: var(--ek-color-cream); }
.ek-matrix__table thead .ek-matrix__axis { z-index: 4; }

.ek-matrix-cell { min-inline-size: 8.5rem; }
.ek-matrix-cell__price { display: block; margin-block-end: var(--ek-space-2); font-size: var(--ek-font-size-2); font-weight: 600; white-space: nowrap; }
.ek-matrix-cell small { display: block; margin-block-start: var(--ek-space-2); opacity: .68; font-size: .72rem; white-space: nowrap; }
.ek-matrix-cell__qty { display: grid; grid-template-columns: 2.75rem minmax(3.5rem, 1fr) 2.75rem; align-items: stretch; gap: .25rem; }
.ek-matrix-cell__qty button,
.ek-matrix-cell__qty input { min-block-size: 2.75rem; border: 1px solid var(--ek-color-border); border-radius: var(--ek-radius-md); background: var(--ek-color-surface); text-align: center; }
.ek-matrix-cell__qty button { cursor: pointer; font-size: 1.2rem; }
.ek-matrix-cell__qty input { inline-size: 100%; font: inherit; font-weight: 600; }
.ek-matrix-cell.is-invalid { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--ek-radius-md); }
.ek-matrix-cell--unavailable { display: inline-flex; min-block-size: 2.75rem; align-items: center; opacity: .55; font-size: var(--ek-font-size-2); }

.ek-matrix__summary {
    position: sticky;
    inset-block-end: var(--ek-space-2);
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(8rem, .6fr) minmax(10rem, 1fr) auto;
    gap: var(--ek-space-3);
    align-items: center;
    margin-block-start: var(--ek-space-4);
    padding: var(--ek-space-3);
    border: 1px solid var(--ek-color-border);
    border-radius: var(--ek-radius-lg);
    background: color-mix(in srgb, var(--ek-color-bg) 94%, transparent);
    backdrop-filter: blur(12px);
}
.ek-matrix__summary > div { display: grid; gap: .2rem; }
.ek-matrix__summary span { font-size: var(--ek-font-size-2); opacity: .7; }
.ek-matrix__summary strong { font-size: var(--ek-font-size-4); }
.ek-matrix__summary button[disabled] { opacity: .5; cursor: not-allowed; }
.ek-matrix__status { min-block-size: 1.5em; margin-block: var(--ek-space-2) 0; }
.ek-matrix__status.is-error { font-weight: 600; }
.ek-matrix__status.is-success { font-weight: 600; }

.ek-quick-order__hero { padding-block: clamp(2rem, 6vw, 5rem); background: linear-gradient(180deg, color-mix(in srgb, var(--ek-color-cream) 45%, var(--ek-color-bg)), var(--ek-color-bg)); }
.ek-quick-order__hero h1 { margin-block: var(--ek-space-2); }
.ek-quick-order__hero p { max-inline-size: 48rem; }
.ek-quick-order__layout { padding-block: var(--ek-space-6) calc(var(--ek-space-8) + 4rem); }
.ek-quick-order__filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr) auto; gap: var(--ek-space-3); align-items: end; padding: var(--ek-space-4); border: 1px solid var(--ek-color-border); border-radius: var(--ek-radius-xl); background: var(--ek-color-surface); }
.ek-quick-order__filters label { display: block; margin-block-end: var(--ek-space-1); font-weight: 600; }
.ek-quick-order__filters input,
.ek-quick-order__filters select { inline-size: 100%; min-block-size: 3rem; padding-inline: var(--ek-space-3); border: 1px solid var(--ek-color-border); border-radius: var(--ek-radius-md); background: var(--ek-color-bg); font: inherit; }
.ek-quick-order__status { min-block-size: 1.5rem; margin-block: var(--ek-space-4); }
.ek-quick-order__results { display: grid; gap: var(--ek-space-4); }
.ek-quick-product { border: 1px solid var(--ek-color-border); border-radius: var(--ek-radius-xl); background: var(--ek-color-surface); overflow: clip; }
.ek-quick-product__head { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: var(--ek-space-4); align-items: center; padding: var(--ek-space-4); }
.ek-quick-product__image { inline-size: 6rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--ek-radius-lg); background: var(--ek-color-cream); }
.ek-quick-product__name { margin: 0; font-size: var(--ek-font-size-4); }
.ek-quick-product__meta { margin-block-start: .35rem; font-size: var(--ek-font-size-2); opacity: .7; }
.ek-quick-product__matrix { padding-inline: var(--ek-space-4); }
.ek-quick-product__matrix:empty { padding: 0; }
.ek-quick-product__matrix .ek-matrix { margin-block-start: 0; }
.ek-quick-order__pagination { display: flex; justify-content: center; gap: var(--ek-space-2); margin-block-start: var(--ek-space-6); }
.ek-quick-order__pagination button { min-inline-size: 3rem; min-block-size: 3rem; border: 1px solid var(--ek-color-border); border-radius: var(--ek-radius-md); background: var(--ek-color-surface); cursor: pointer; }
.ek-quick-order__pagination button[aria-current="page"] { font-weight: 700; outline: 2px solid currentColor; }
.ek-quick-order__empty { padding: var(--ek-space-6); border: 1px dashed var(--ek-color-border); border-radius: var(--ek-radius-xl); text-align: center; }

@media (max-width: 760px) {
    .ek-matrix__head { display: grid; }
    .ek-matrix__hint { justify-self: start; }
    .ek-matrix__summary { grid-template-columns: 1fr 1fr; inset-block-end: 4.75rem; }
    .ek-matrix__summary .ek-button { grid-column: 1 / -1; inline-size: 100%; }
    .ek-quick-order__filters { grid-template-columns: 1fr; }
    .ek-quick-order__filters .ek-button { inline-size: 100%; }
    .ek-quick-product__head { grid-template-columns: 4.5rem minmax(0, 1fr); }
    .ek-quick-product__image { inline-size: 4.5rem; }
    .ek-quick-product__head .ek-button { grid-column: 1 / -1; inline-size: 100%; }
    .ek-quick-product__matrix { padding-inline: var(--ek-space-2); }
}