/* Labels - the sticker that goes on a thing.

   One drawing, used in two places: previewed on an item or variant page inside the
   admin, and printed from the label page. So nothing here depends on the admin's
   theme tokens - a label is black on white wherever it is, because that is what a
   scanner reads - and every size is relative to the label's own box, so the same
   markup fills a 1" sticker or a 2" one. The box's size comes from whoever puts it
   on the page: the preview, or a print template. */

.wx-label {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  /* The QR and the words side by side, and the SKU underneath on a line of its own,
     the whole width - it is the line a person reads, and it must never be cut. The
     QR's quiet zone is inside its SVG, so text under it costs nothing. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 5%;
  row-gap: calc(var(--label-h) * 0.02);
  align-items: center;
  padding: calc(var(--label-h) * 0.07) 5%;
  background: #fff;
  color: #000;
  overflow: hidden;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Every size on the label is a fraction of --label-h, the sticker's height, which
     the box it sits in sets in inches (the preview below; the print template for a
     sheet). Not container-query units: those measured right on screen and came out
     near zero in Chrome's print layout, which printed a "B" and nothing else. An
     absolute length prints as it previews. The template can override --label-fs. */
  font-size: var(--label-fs, calc(var(--label-h) * 0.11));
  line-height: 1.2;
}

/* The QR: a fixed square, about seven tenths of the height, leaving the SKU line
   under it. Fixed rather than "the rest of the row" for the same print reason. */
.wx-label-qr {
  width: calc(var(--label-h) * 0.7);
  height: calc(var(--label-h) * 0.7);
  min-height: 0;
}

.wx-label-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wx-label-txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15em;
}

.wx-label-txt > div {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The top line: category at the left, price at the right. */
.wx-label-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5em;
}

/* The key number: what gets typed, so it is mono, like the SKU. */
.wx-label-key {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 1em;
  font-weight: 600;
  white-space: nowrap;
}

/* The category, small and quiet - a sorting aid, not the headline. */
.wx-label-category {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wx-label-name {
  font-weight: 700;
  font-size: 1.15em;
  /* Two lines at most - a long name wraps once, then stops. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.wx-label-detail {
  white-space: nowrap;
}

/* The SKU, across the whole label under the code. A full variant SKU is thirty
   characters and fits on one line at this size; anything longer wraps rather than
   being cut. */
.wx-label-sku {
  grid-column: 1 / -1;
  /* Lined up with the first dark module, not the SVG's edge: the SVG carries its
     own quiet zone - four modules of white out of about forty - so the code proper
     starts a tenth of its width in. The code is 0.7 of the label's height, which
     makes that 7% of the height. */
  padding-left: calc(var(--label-h) * 0.07);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.9em;
  line-height: 1.15;
  letter-spacing: 0.02em;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: hidden;
}

.wx-label-price {
  flex: 0 0 auto;
  margin-left: auto;
  font-weight: 600;
  font-size: 1.05em;
  white-space: nowrap;
}

/* The preview on an item or variant page: one label at its real printed size, with a
   hairline so the sticker's edge is visible against the page. */
.wx-label-preview {
  --label-h: 1in;
  width: 2.625in;
  height: 1in;
  border: 1px solid #c8c8c8;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  margin: 4px 0 8px;
}

/* ── The printed page ─────────────────────────────────────────────────────── */

/* Each template sets its own @page and grid inline; these are what every sheet
   shares. Backgrounds print because a QR with its white knocked out is unreadable
   on a coloured sticker. */
.wx-sheet {
  display: grid;
  box-sizing: border-box;
  page-break-after: always;
  break-after: page;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.wx-sheet:last-child {
  page-break-after: auto;
  break-after: auto;
}

.wx-sheet-cell {
  box-sizing: border-box;
  overflow: hidden;
}

/* On screen, the page shows the sheets as sheets so what prints can be checked
   first; on paper, none of that. */
@media screen {
  .wx-print-body {
    background: #e9e9e9;
    padding: 24px;
    margin: 0;
  }

  .wx-print-bar {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 14px;
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 0 auto 18px;
  }

  .wx-print-bar button {
    font: inherit;
    padding: 7px 14px;
    border: 1px solid #333;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
  }

  .wx-sheet {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    margin: 0 auto 24px;
  }

  .wx-sheet-cell {
    outline: 1px dashed #d5d5d5;
    outline-offset: -1px;
  }
}

@media print {
  .wx-print-body {
    margin: 0;
    padding: 0;
    background: #fff;
  }

  .wx-print-bar {
    display: none;
  }
}