/* A pro shop's own pages on the Online Store engine (src/examples/ex-store-proshop.js): the size
   and specification guide with its glove finder, the special-order enquiry and the staff's list of
   enquiries. Layout only: every colour, radius and display face is the business's own (--x-* on
   main#main). Large, plain controls with room around them, to be read outdoors on a phone. */

/* A size here can be one letter ("L"): its chip is still wide enough to press. */
.xs-buy .x-chip-face { min-width: 44px; justify-content: center; }

.xs-pro-panel { --x-gap: 18px; }
.xs-pro-panel h2 { font-size: 1.25rem; }
.xs-pro-panel h2:not(:first-child) { margin-top: 10px; }
.xs-pro-panel h3 { font-size: 1.0625rem; }

/* The finder: two questions, and the answer beside them where there is room for both. */
.xs-pro-finder { display: grid; align-items: start; gap: 16px clamp(20px, 4vw, 48px); }
.xs-pro-finder > * { min-width: 0; }
.xs-pro-asks { display: grid; gap: 14px; }
.xs-pro-answer > * { min-width: 0; }
.xs-pro-answer { display: grid; gap: 8px; padding: clamp(14px, 2.4vw, 22px); border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xs-pro-answer--on { border-color: var(--x-line); background: var(--x-surface-2); }
.xs-pro-answer h3 { color: var(--x-muted); font-size: .8125rem; font-weight: 700; letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xs-pro-pick { font-family: "x-figures", var(--x-display); font-size: clamp(1.375rem, 3.4vw, 1.75rem); font-weight: var(--x-display-weight, 600); line-height: var(--x-lh-head); }
.xs-pro-stock .x-pill { white-space: normal; }
@media (min-width: 53.75em) { .xs-pro-finder { grid-template-columns: minmax(0, 6fr) minmax(18rem, 5fr); } }

.xs-pro-terms { --x-fact-label: 11rem; max-width: 60rem; }
.xs-pro-how { display: grid; gap: 6px; max-width: 44rem; padding-inline-start: 1.5em; list-style: decimal; }

/* One block for each garment's chart and for each club's specification. */
.xs-pro-block { display: grid; align-content: start; gap: 10px; min-width: 0; padding-top: 14px; border-top: 1px solid var(--x-hair); }
.xs-pro-clubs { display: grid; gap: 18px clamp(24px, 4vw, 48px); }
.xs-pro-clubs .xs-pro-block { padding: clamp(14px, 2.2vw, 20px); border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
@media (min-width: 53.75em) { .xs-pro-clubs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The enquiry: what it is about, then a form no wider than a comfortable line. */
.xs-pro-enquiry > form, .xs-pro-enquiry > .x-facts, .xs-pro-enquiry > .xs-pro-item { max-width: 40rem; }
.xs-pro-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xs-pro-item-img { flex: 0 0 88px; overflow: hidden; border-radius: calc(var(--x-radius, 8px) - 2px); }
.xs-pro-item-text { display: grid; gap: 6px; min-width: 0; }
.xs-pro-item-text h2 { font-size: 1.125rem; }

/* The staff's enquiries sit under the orders, visibly a list of their own. */
.xs-pro-enquiries { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--x-hair); }
.xs-pro-enquiries h2 { font-size: 1.125rem; }
.xs-pro-contact { display: block; }
.xs-pro-hours .x-hours { max-width: 30rem; }