/* A clothing shop (src/examples/ex-store-apparel.js), beside the Online Store engine's own stylesheet:
   the grid of pieces, a collection's head, a garment's photographs with their captions, the size
   charts, the collections page and the packing list. Every colour, the radius and the display face
   are the business's own (--x-* on main#main). Phone first; wider screens add columns. */

/* ---- the shop's grid ---------------------------------------------------------------------- */
/* Collection and garment each take a row of their own; size, colour and the search share what is left. */
.xs-apparel-shop .xs-tools > .x-filter:nth-child(2) { flex: 1 1 100%; }
/* A size is one letter: its chip is still wide enough to press. */
.xs-apparel-shop .xs-tools .x-chip-face { justify-content: center; min-width: 44px; }
.xs-apparel-shop .xs-hero-media .x-img { max-height: none; }
/* On a phone the grid is the photographs: the wide one above the whole shop waits for a wider screen.
   A collection keeps its own, because that photograph is the collection. */
@media (max-width: 759.98px) { .xs-apparel-hero--plain .xs-hero-media { display: none; } }
/* Upright pictures, two across on a phone, with the words under them and no box around either. */
.xs-apparel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
.xs-apparel-card { border: 0; background: none; }
.xs-apparel-card .x-card-media { border-radius: 0; }
.xs-apparel-card .x-card-body { gap: 4px; padding: 12px 0 0; }
.xs-apparel-card .x-card-title { font-size: 1rem; }
.xs-apparel-card .x-card-meta, .xs-apparel-run { font-size: .875rem; }
.xs-apparel-run { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; color: var(--x-muted); }
.xs-apparel-dyes { display: inline-flex; align-items: center; gap: 4px; }
.xs-apparel-dyes > .xs-swatch + span { margin-inline-start: 3px; }
.xs-apparel-card .xs-tags { margin-top: 4px; }
@media (min-width: 40em) { .xs-apparel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 20px; } }
@media (min-width: 64em) { .xs-apparel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; } }

/* ---- one garment ---------------------------------------------------------------------------- */
.xs-apparel-pd { display: grid; align-items: start; gap: 18px clamp(24px, 4vw, 56px); }
.xs-apparel-pd > * { min-width: 0; }
.xs-apparel-pd-head { display: grid; gap: 10px; }
/* One column that is never wider than its place, whatever is in it. */
.xs-apparel-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.xs-apparel-figure { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px; margin: 0; }
/* An upright photograph is not given the whole width of a phone: the choices stay within reach. */
.xs-apparel-figure > .x-img { width: min(100%, 19rem); }
.xs-apparel-caption { display: flex; align-items: center; gap: 8px; color: var(--x-muted); font-size: .875rem; }
.xs-apparel-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 8px; max-width: 26rem; }
.xs-apparel-thumb { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 4px 4px 8px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.xs-apparel-thumb .x-img { width: 100%; }
.xs-apparel-thumb-t { padding-inline: 2px; font-size: .8125rem; line-height: var(--x-lh-label); overflow-wrap: anywhere; }
/* The one being shown: a heavier rule and heavier words, not a colour. */
.xs-apparel-thumb[aria-pressed="true"] { border-color: var(--x-ink); box-shadow: inset 0 0 0 1px var(--x-ink); }
.xs-apparel-thumb[aria-pressed="true"] .xs-apparel-thumb-t { font-weight: 700; }
/* Colour and size are the page's main controls: square, and large enough to press without aiming. */
.xs-apparel-garment .xs-opt .x-chip { min-height: 48px; }
.xs-apparel-garment .xs-opt .x-chip-face { justify-content: center; min-width: 3.25rem; min-height: 46px; padding-inline: 14px; font-size: 1rem; }
.xs-apparel-policy-link { margin-top: -4px; }
@media (min-width: 44em) {
  .xs-apparel-pd { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; grid-template-areas: "gallery head" "gallery main"; }
  .xs-apparel-pd-head { grid-area: head; }
  .xs-apparel-gallery { grid-area: gallery; }
  .xs-apparel-pd-main { grid-area: main; }
  .xs-apparel-figure > .x-img { width: 100%; }
  .xs-apparel-thumbs { max-width: none; }
}

/* ---- size charts ------------------------------------------------------------------------------ */
/* Sizes across the top, so five of them and a row's name fit a phone without a sideways scroll. */
.xs-apparel-chart { width: 100%; max-width: 40rem; border-collapse: collapse; table-layout: fixed; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.xs-apparel-chart th, .xs-apparel-chart td { padding: 10px 4px; border-bottom: 1px solid var(--x-hair); line-height: var(--x-lh-label); text-align: center; vertical-align: middle; overflow-wrap: anywhere; }
.xs-apparel-chart thead th { border-bottom-color: var(--x-ink); font-weight: 600; }
.xs-apparel-chart th:first-child { width: 36%; padding-inline: 0 8px; font-weight: 500; text-align: start; }
.xs-apparel-chart thead th:first-child { color: var(--x-muted); font-weight: 400; }
/* The chosen size: a rule down each side of its column and heavier figures. */
.xs-apparel-chart .xs-apparel-on { background: var(--x-surface); box-shadow: inset 1px 0 0 var(--x-ink), inset -1px 0 0 var(--x-ink); font-weight: 700; }
.xs-apparel-stock td { font-size: .875rem; font-weight: 600; }
.xs-apparel-stock .xs-apparel-unavailable, .xs-apparel-stock .xs-apparel-none { color: var(--x-muted); font-weight: 400; }
.xs-apparel-sheet { display: grid; gap: 14px; }
.xs-apparel-sheet h3, .xs-apparel-picked h3 { font-size: 1.125rem; }
.xs-apparel-how { --x-fact-label: 8.5rem; }
.xs-apparel-guidepage .xs-info-sec { gap: 12px; }
.xs-apparel-pick { max-width: 22rem; }
.xs-apparel-picked { display: grid; justify-items: start; gap: 12px; padding-top: 4px; }
.xs-apparel-picked > .xs-apparel-chart { justify-self: stretch; }

/* ---- the collections ---------------------------------------------------------------------------- */
.xs-apparel-collections { display: grid; gap: clamp(28px, 6vw, 64px); }
.xs-apparel-head { display: grid; gap: 10px; }
.xs-apparel-collection { display: grid; align-items: start; gap: 18px clamp(24px, 5vw, 64px); padding-top: clamp(22px, 4vw, 44px); border-top: 1px solid var(--x-hair); }
.xs-apparel-collection > * { min-width: 0; }
.xs-apparel-collection-text { display: grid; align-content: start; justify-items: start; gap: 10px; }
.xs-apparel-collection h2 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.625rem); }
.xs-apparel-ended { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.xs-apparel-sub { margin-top: 8px; color: var(--x-muted); font: 700 .8125rem/var(--x-lh-label) var(--x-text); letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xs-apparel-pieces { display: flex; flex-wrap: wrap; gap: 0 20px; margin-block: -8px -4px; }
@media (min-width: 760px) {
  .xs-apparel-collection { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  /* The second collection turns round, so the page reads as a lookbook and not as a list. */
  .xs-apparel-collection:nth-of-type(even) .xs-apparel-collection-media { order: 2; }
}

/* ---- small pieces --------------------------------------------------------------------------------- */
/* A line's colour and size stay together, and a line that is too long turns before them: "(Ink, M)" goes to the
   next line whole, so neither a Thai colour's name nor the piece's name before it is split in the middle. */
.xs-frame .xs-items-o { display: inline-block; white-space: pre; }   /* pre: the space before the bracket is kept, on the screen and when the line is read out or copied */
/* Such a line fills its first row and then turns: evening the rows out would pull half a piece's name down with them. */
.xs-frame .xs-items li { text-wrap-style: auto; }
/* Links that wrap onto a second row each keep a full row to themselves, so none lies over another's place to press. */
.xs-apparel-links { --x-gap: 20px; row-gap: 0; }
.xs-apparel-links .x-link, .xs-apparel-pieces .x-link { margin-block: 0; }
.xs-apparel-dye { display: inline-flex; align-items: center; gap: 6px; }
/* The packing list sits in the order's sheet, whose paper is the surface colour. */
.xs-apparel-pack .x-table-wrap { --x-under: var(--x-surface); }

@media (hover: hover) and (pointer: fine) {
  .xs-apparel-thumb:hover { border-color: var(--x-ink); }
}
@media (forced-colors: active) {
  .xs-apparel-thumb[aria-pressed="true"] { border-color: Highlight; }
  .xs-apparel-chart .xs-apparel-on { outline: 1px solid Highlight; outline-offset: -1px; }
}