/* What a gift shop adds to the Online Store engine (ex-store-gift.js). Layout only, phone first:
   every colour, radius and face is the business's. */

/* The gift note */
.xs-gift-tools { --x-gap: 8px; }
.xs-gift-card { display: grid; gap: 18px; padding: clamp(16px, 3vw, 24px); border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xs-gift-card input.x-input { max-width: 22rem; }
/* "About this example": the example speaking, not the shop */
.xs-gift-about { display: grid; gap: 8px; max-width: 44rem; padding: 16px 18px; border: 1px dashed var(--x-line); border-radius: var(--x-radius, 8px); }

/* A collected order, at the desk */
.xs-desk-wrap { display: grid; gap: 10px; max-width: 44rem; }
.xs-desk { display: grid; gap: 8px; padding: clamp(14px, 3vw, 20px); border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xs-desk h2 { font-size: 1.125rem; }
.xs-desk .x-fact:first-child { padding-top: 0; border-top: 0; }

/* The gift sets, one to a row */
.xs-sets { display: grid; align-content: start; gap: clamp(22px, 4vw, 40px); }
.xs-sets > * { min-width: 0; }
.xs-sets-head { display: grid; gap: 10px; }
.xs-sets-row { display: grid; align-items: start; gap: 18px clamp(24px, 4vw, 56px); padding-top: clamp(20px, 3vw, 32px); border-top: 1px solid var(--x-hair); }
.xs-sets-media { overflow: hidden; border-radius: var(--x-radius, 8px); }
.xs-sets-media .x-img { width: 100%; }
.xs-sets-main { display: grid; align-content: start; gap: 12px; min-width: 0; }
.xs-sets-main h3 { font-size: 1.0625rem; }
.xs-sets-note { display: grid; gap: 10px; max-width: 46rem; padding-top: clamp(20px, 3vw, 32px); border-top: 1px solid var(--x-hair); }
.xs-sets-note .xs-gift-about { max-width: none; margin-top: 6px; }
@media (min-width: 53.75em) {
  .xs-sets-row { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* Room for this shop's longer words: an order's four steps stay on one line, and the staff's list
   keeps every column inside a laptop's width in both languages */
@media (min-width: 640px) {
  .xs-track .xs-track-step + .xs-track-step::before { width: clamp(12px, 2vw, 26px); }
}
@media (min-width: 56.25em) {
  .xs-staff .x-table th, .xs-staff .x-table td { padding-inline: 11px; }
  /* An order's next step with Cancel under it, in every row alike */
  .xs-staff .x-table .xs-moves { flex-direction: column; align-items: flex-start; --x-gap: 6px; }
}
/* A lighter edge cue, so a row's quieter words keep their contrast where they pass under it */
.xs-staff .x-table-wrap { --x-hair: color-mix(in srgb, var(--x-ink) 11%, transparent); }