/* What a store of material samples adds to the Online Store engine (src/examples/ex-store-samples.js):
   sample codes, the specification panel's proportions, the ways out of the store, the pick list and
   the project and trade enquiry. Layout only, in the engine's own xs- prefix; every colour, radius
   and display face is the business's (--x-* on main#main). Phone first: a wider screen sets things
   side by side, never a different page. */

/* ---- a sample code: set like a part number, and never broken across lines ---------------- */
.xs-code-v { font-family: var(--x-stack-mono); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.x-hint.xs-code-v { font-weight: 400; white-space: normal; }

/* ---- the catalogue: what the three kinds are, and what is not sold here -------------------- */
.xs-read { display: grid; gap: 24px clamp(24px, 4vw, 56px); padding-top: clamp(18px, 3vw, 28px); border-top: 1px solid var(--x-hair); }
.xs-read-col { display: grid; align-content: start; gap: 8px; min-width: 0; }
.xs-read h2, .xs-after h2, .xs-pick h2, .xs-rq h2, .xs-scale h2, .xs-beyond h2 { font-size: 1.125rem; }
@media (min-width: 45em) { .xs-read { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A finish that was let go when the family changed: the hint's own line above the filters, in ink and marked. */
.x-hint.xs-dropped { padding-inline-start: 10px; border-inline-start: 3px solid var(--x-line); color: var(--x-ink); }

/* A way out of the store, or into a consultation: a link of its own on a line, with what it is for. */
.xs-outs { display: grid; }
.xs-outs li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-height: 44px; padding-block: 4px; border-top: 1px solid var(--x-hair); }
.xs-outs li > :first-child { font-weight: 600; }

/* ---- one sample: the specification leads, and has the room for it -------------------------- */
@media (min-width: 37.5em) {
  .xs-product .xs-detail[aria-labelledby="xs-d-spec"] { grid-column: span 2; }
}
.xs-product .xs-detail[aria-labelledby="xs-d-codes"] dd { font-family: var(--x-stack-mono); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Under the button: the code of what is chosen, then where it can lead. */
.xs-ref { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--x-hair); }
.xs-code { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.xs-code .xs-code-v { font-size: 1.0625rem; }
.xs-consult, .xs-beyond { display: grid; gap: 4px; }

/* ---- the cart: what comes after the samples ---------------------------------------------- */
.xs-after { display: grid; gap: 10px; max-width: 44rem; padding-top: 6px; }

/* ---- an order as codes: the customer's list, and the staff's pick list -------------------- */
.xs-pick { display: grid; gap: 8px; max-width: 44rem; }
.xs-pick-list { --x-fact-label: 7.5rem; }
.xs-pick-list dt { color: var(--x-ink); font-family: var(--x-stack-mono); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xs-codes { display: grid; gap: 2px; }
.xs-codes li { white-space: nowrap; }
/* The staff's table carries one more column here than the engine draws, so on a wide screen the two that can
   give way do: the item names wrap sooner, and a collection time may break after its date. */
@media (min-width: 56.25em) {
  .xs-staff #xs-orders .xs-items { min-width: 10rem; }
  .xs-staff #xs-orders .xs-recv-when { white-space: normal; }
  .xs-staff #xs-orders .xs-codes { font-size: .9375rem; }
}
/* Seven columns need about 1,100 px across. On a counter's tablet and a small laptop, wider than the cards the
   kit draws on a phone and narrower than that, each row of the staff's two lists is a ticket: the reference
   across the top, then its six cells three to a line, each under its column's name. Nothing runs off the side,
   so the next step is always on the screen. */
@media (min-width: 56.25em) and (max-width: 76.24em) {
  .xs-staff .x-table-wrap--wide { overflow: visible; background: none; }
  .xs-staff .x-table-wrap--wide .x-table, .xs-staff .x-table-wrap--wide tbody { display: block; }
  .xs-staff .x-table-wrap--wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .xs-staff .x-table-wrap--wide tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin-bottom: 10px; padding: 10px 16px 16px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
  .xs-staff .x-table-wrap--wide tbody th { grid-column: 1 / -1; padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--x-hair); font-size: 1.0625rem; }
  .xs-staff .x-table-wrap--wide td { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 0; border: 0; }
  .xs-staff .x-table-wrap--wide td::before { content: attr(data-label); color: var(--x-muted); font-size: .875rem; }
  .xs-staff .x-table-wrap--wide td:last-child, .xs-staff .x-table-wrap--wide .xs-items, .xs-staff .x-table-wrap--wide .xs-rq-msg, .xs-staff .x-table-wrap--wide .xs-rq-about { min-width: 0; }
  .xs-staff #xs-requests tbody th { padding-block: 8px; }
}

/* ---- the delivery step: where a parcel can go ---------------------------------------------- */
.xs-area { display: grid; gap: 0; }

/* ---- the project and trade enquiry -------------------------------------------------------------- */
.xs-trade-facts { max-width: 44rem; }
.xs-rq { display: grid; gap: 10px; padding-top: clamp(18px, 3vw, 28px); border-top: 1px solid var(--x-hair); }
.xs-rq-item { display: block; }
.xs-rq-ref { font-variant-numeric: tabular-nums; white-space: nowrap; }
.xs-rq-msg { display: block; max-width: 30rem; }
@media (min-width: 56.25em) {
  .xs-rq .x-table .xs-rq-msg { min-width: 12rem; }
  .xs-rq .x-table .xs-rq-about { min-width: 8rem; }
}

/* ---- how samples are received: a sample beside the real thing ------------------------------- */
.xs-scale { display: grid; align-items: center; gap: 16px clamp(24px, 4vw, 48px); }
.xs-scale-text { display: grid; gap: 8px; max-width: 44rem; }
.xs-scale-media { overflow: hidden; border-radius: var(--x-radius, 8px); }
.xs-scale-media .x-img { max-height: 200px; }
@media (min-width: 45em) {
  .xs-scale { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .xs-scale-media .x-img { max-height: 280px; }
}