/* =========================================================
   shop/order.css: the step shell (slice 3, brief Y). Lifted from the rough
   mock's .wz-* rules (mock.css) with the mock-only bits dropped (mocktag,
   wz-demo, wz-mocknote, the picker tiles, the photo and courier blocks).
   Loads after shop.css. Colours are the stark tokens and the shop tokens
   only; the ground is the light radial gradient from shop.css.
   ========================================================= */

/* ---- icons ---- */
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }

/* ---- the head: back, step words, progress ---- */
.wz-head { margin: 0 0 1rem; }
.wz-head__row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
/* Re-skin 23 Oct 2026 (spec 2, 17): the step shell's small text sits straight on the bright ground, so each piece rides on a glass chip,
   Ink deep at 45% with a 12px blur: white on it is 6.4:1 over the cyan core and 9.7:1 or better over the rest of the ground. */
.wz-back, .wz-count, .wz-bar {
  background: rgba(4,18,51,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 999px; color: #fff;
}
.wz-back { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: .35rem .8rem; font-weight: 800; font-size: .9rem; }
.wz-back:hover { color: #FFC510; }
.wz-count { margin: 0; padding: .35rem .8rem; font-family: var(--font-b); font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.wz-count b { color: #fff; font-weight: 800; }
/* Progress inside its own chip: track white 28%, done white, now Yellow, labels white 14px. */
.wz-bar { list-style: none; margin: .6rem 0 0; padding: .7rem 1.2rem .6rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; }
.wz-bar li { display: grid; gap: .35rem; }
.wz-bar li::before { content: ""; height: 8px; border-radius: 999px; background: rgba(255,255,255,.28); }
.wz-bar li.is-done::before { background: #fff; }
.wz-bar li.is-now::before { background: #FFC510; }
.wz-bar li span { display: none; font-size: .875rem; font-weight: 700; color: #fff; line-height: 1.2; }
.wz-bar li.is-now span { font-weight: 800; }
@media (min-width: 781px) { .wz-bar li span { display: block; } }

/* ---- the layout: questions left, price right; the screens are white cards ---- */
.ord-sec { padding-top: clamp(1rem, 2.4vw, 1.8rem); }
/* Spec 14: a one-column (solo) step is a 60rem object centred on the ground, not a 1180px slab. The head above it follows the same width
   so Back lines up with the card's edge. */
.cfglay--solo { grid-template-columns: minmax(0, 1fr); max-width: 60rem; margin-inline: auto; }
.ord-sec:has(.cfglay--solo) .wz-head { max-width: 60rem; margin-inline: auto; }
.cfg-drop { max-width: 46rem; }
.wz-panel {
  min-width: 0; background: #fff; color: var(--ink); border: 1px solid rgba(0,49,121,.12); border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow); padding: clamp(1.1rem, 2.6vw, 1.9rem);   /* spec 6 */
}
.ord-sec .cfglay { align-items: start; }
.ord-sec .cfg-sum { border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); background: #fff; color: var(--ink); border-color: rgba(0,49,121,.12); }

.wz-title {
  font-family: var(--font-d); font-weight: 700; text-transform: uppercase; color: var(--navy);
  font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1; margin: 0 0 .5rem;
}
/* Step heading is "Product » Step". Spec 21: at every width the product name is its own line (Red, Barlow Condensed) and the step the
   second line at the same size (Navy), each balanced, so a long product name never strands a word ("WHAT") on the second line.
   Re-declares the old rule that only did this under 520px. */
.wz-title__name { color: var(--red); }
.wz-title__prod, .wz-title__step { display: block; text-wrap: balance; }
.wz-title__prod { margin-bottom: .12em; }
.wz-help { margin: 0 0 1.1rem; color: var(--shop-ink-soft); font-size: .95rem; max-width: 46ch; }

/* ---- question blocks ---- */
.wz-q { padding: 1rem 0 1.1rem; border-top: 1px solid var(--shop-line); }
.wz-q:first-of-type { border-top: 0; padding-top: 0; }
.wz-q__label { margin: 0 0 .7rem; padding: 0; display: block; font-family: var(--font-d); text-transform: uppercase; font-size: 1.3rem; line-height: 1; color: var(--navy); }
.wz-q__label small { font-family: var(--font-b); text-transform: none; font-size: .8125rem; font-weight: 700; color: var(--shop-ink-soft); margin-left: .35rem; }
fieldset.wz-q { margin: 0; min-width: 0; border-left: 0; border-right: 0; border-bottom: 0; }
fieldset.wz-q > legend { float: left; width: 100%; }
fieldset.wz-q > legend + * { clear: both; }
.wz-q [hidden], .cfg [hidden] { display: none !important; }
.cfg .cfg-q.mopts, .cfg .wz-q.mopts { display: block; }
.cfg-opts--stack { grid-template-columns: minmax(0, 1fr); }

/* the drop zone inside the step (the .cfg-drop rules are in shop.css) */
.wz-photo { display: none; margin: .7rem 0 0; min-height: 44px; cursor: pointer; }
.wz-photo svg { width: 1.3em; height: 1.3em; }
@media (pointer: coarse), (max-width: 780px) { .wz-photo { display: inline-flex; } }
.wz-photo:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }
.cfg-drop { position: relative; }
.cfg-drop__input { min-height: 44px; }

/* ---- buttons row ---- */
.wz-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin: 1.2rem 0 0; }
.wz-next { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; }
.wz-nav--form { justify-content: flex-start; }
.wz-more { margin: 1rem 0 0; }
.wz-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0 0; }
.wz-actions .btn { flex: 1 1 11rem; justify-content: center; white-space: nowrap; }
.cfg-sum__cta { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-align: center; }
.hide-sm { display: inline; }
.cfg-sum__cta svg { width: 1.2em; height: 1.2em; }
@media (min-width: 781px) { .cfg-sum__cta { display: none; } }
@media (max-width: 780px) {
  .cfglay:not(.cfglay--solo) .wz-nav--form { display: none; }
  .cfg-sum__cta { padding-inline: .8rem; white-space: nowrap; font-size: .9rem; max-width: 100%; }
  .cfg-sum .cfg-sum__total b { font-size: 1.55rem; }
  .hide-sm { display: none; }
}

/* ---- We read this: the card ---- */
.read-card { border: 1px solid var(--shop-line); border-radius: 20px; padding: 1rem; background: #fbfdff; }
.read-card__file { display: flex; align-items: center; gap: .9rem; padding-bottom: .9rem; margin-bottom: .2rem; border-bottom: 1px solid var(--shop-line); }
.read-thumb { position: relative; flex: none; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--shop-line); display: grid; place-items: center; }
.read-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.read-thumb svg { display: none; width: 34px; height: 34px; color: var(--navy); }
.read-thumb.is-empty svg { display: block; }
.read-card__name { min-width: 0; display: grid; gap: .1rem; }
.read-card__name b { color: var(--navy); overflow-wrap: anywhere; font-size: 1.02rem; }
.read-card__name a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; font-size: .86rem; font-weight: 800; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.read-card__sub { font-size: .86rem; font-weight: 600; color: var(--shop-ink-soft); }
.read-card__name a:hover { color: var(--red); }
.facts { list-style: none; margin: 0; padding: 0; }
.fact { border-bottom: 1px solid var(--shop-line); }
.fact:last-child { border-bottom: 0; }
.fact details > summary {
  list-style: none; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: .6rem;
  min-height: 52px; padding: .35rem 0; cursor: pointer;
}
.fact details > summary::-webkit-details-marker { display: none; }
.fact details > summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 6px; }
.fact__k { font-family: var(--font-b); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--shop-ink-soft); }
.fact__v { color: var(--navy); font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
.fact__chg { font-size: .86rem; font-weight: 800; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; min-width: 3.4rem; text-align: right; }
.fact details > summary:hover .fact__chg { color: var(--red); }
@media (max-width: 479px) {
  .fact details > summary { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .fact__k { grid-column: 1 / -1; }
}
.fact .on-open { display: none; }
.fact details[open] .on-open { display: inline; }
.fact details[open] .on-closed { display: none; }
.fact__ctl { padding: .2rem 0 1rem; }
.fact__ctl .cfg-opts { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.fact__note { margin: 0 0 .7rem; font-size: .84rem; color: var(--shop-ink-soft); }
.fact__note a { color: var(--navy); font-weight: 800; }
.wz-warn { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.wz-warn li {
  padding: .65rem .85rem; border-radius: 12px; font-size: .88rem; font-weight: 600; line-height: 1.4; color: var(--navy);
  background: color-mix(in srgb, var(--yellow) 24%, #fff); border: 1px solid color-mix(in srgb, var(--orange) 55%, #fff);
}
.wz-warn--size { margin: .1rem 0 .8rem; }   /* sits right under the Size row and its options */

/* ---- Check and send ---- */
.wz-summary { margin-top: .2rem; position: static; }
.wz-summary .osum__lines { margin-bottom: 0; padding-bottom: .6rem; }
.wz-summary .osum__lines li { font-size: .95rem; }
.wz-summary .osum__lines li > b { text-align: right; white-space: normal; overflow-wrap: anywhere; }
.wz-ask > b { white-space: pre-wrap; text-align: left; }
.wz-working { padding-top: .6rem; }
.cfg-sum__printing, .wz-working { list-style: none; margin: 0; padding: 0; }
.cfg-sum__printing li { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem 0; font-size: .86rem; color: var(--shop-ink-soft); }
.cfg-sum__printing li b { white-space: nowrap; color: var(--navy); }
.wz-working li { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem 0; font-size: .92rem; color: var(--shop-ink-soft); border-top: 1px dashed var(--shop-line); }
.wz-working li:first-child { border-top: 0; }
.wz-working li b { white-space: nowrap; color: var(--navy); }
.wz-working li small { display: block; font-size: .8125rem; }
.wz-block { margin: 1.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--shop-line); }
.wz-block p { margin: 0 0 .4rem; font-size: .92rem; color: var(--navy); }
.wz-fieldset-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-family: var(--font-d); text-transform: uppercase; font-size: 1.3rem; line-height: 1; color: var(--navy); }
.wz-hours { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .2rem; max-width: 24rem; }
.wz-hours li { display: flex; justify-content: space-between; gap: .8rem; font-size: .86rem; color: var(--shop-ink-soft); }
.wz-hours b { color: var(--navy); font-weight: 700; }
.wz-pay { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 14px; background: #fff; border: 1px solid var(--shop-line); }
.wz-pay svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--navy); margin-top: .1rem; }
.wz-pay b { display: block; color: var(--navy); }
.wz-pay span { font-size: .88rem; color: var(--shop-ink-soft); }
.wz-block .wz-fieldset-title svg { width: 1.1em; height: 1.1em; }
.wz-extra { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.wz-extra li { display: flex; justify-content: space-between; gap: .8rem; padding: .7rem .9rem; border: 1px solid var(--shop-line); border-radius: 14px; background: #fbfdff; }
.wz-extra li > span:first-child { display: grid; gap: .1rem; min-width: 0; }
.wz-extra small { display: block; font-size: .82rem; color: var(--shop-ink-soft); overflow-wrap: anywhere; }
.wz-extra b { color: var(--navy); }
.wz-extra__end { display: grid; justify-items: end; align-content: start; gap: .1rem; flex: none; }

/* form blocks */
.wz-form { display: grid; gap: 0 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-form .field { margin-bottom: .85rem; min-width: 0; }
.wz-form .field--wide { grid-column: 1 / -1; }
.ord-sec .field label { color: var(--navy); font-size: .84rem; }
.ord-sec .field input, .ord-sec .field textarea, .ord-sec .field select {
  width: 100%; min-height: 44px; padding: .6rem .8rem; font: inherit; font-size: .95rem; color: var(--navy);
  background: #fff; border: 1px solid var(--shop-line-hard); border-radius: 12px;
}
.ord-sec .field textarea { min-height: 120px; resize: vertical; }
.ord-sec .field input:focus, .ord-sec .field textarea:focus, .ord-sec .field select:focus { outline: 3px solid rgba(0,174,239,.85); outline-offset: 2px; }
.ord-sec .field input[aria-invalid="true"] { border-color: var(--red); }
.ord-sec .field__hint { display: block; font-size: .8125rem; font-weight: 600; color: var(--shop-ink-soft); margin-top: .3rem; }
.ord-sec .cfg-ring__select { min-height: 44px; }
@media (max-width: 480px) { .wz-form { grid-template-columns: minmax(0, 1fr); } }

/* the ask panel says "Quote on request" instead of a total */
.cfg-sum__quote { margin: 0; font-size: .95rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
.cfg-sum__quote b { display: block; font-family: var(--font-d); text-transform: uppercase; font-size: 1.3rem; font-weight: 700; line-height: 1; }
@media (min-width: 781px) { .cfg-sum--quote .cfg-sum__quote { margin: 0 0 .9rem; } }
@media (max-width: 780px) {
  .cfg-sum--quote { grid-template-columns: minmax(0, 1fr) auto; }
  .cfg-sum--quote .cfg-sum__quote { grid-column: 1; grid-row: 1 / span 2 !important; }
  .cfg-sum--quote .cfg-sum__cta { grid-column: 2; grid-row: 1 / span 2 !important; }
  .cfg-sum--quote .cfg-sum__quote b { font-size: 1.2rem; }
}
.cfg-sum--quote > h2 { display: none; }

/* ---- Sent ---- */
.sent { text-align: left; }
.sent__ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 0 1rem; background: var(--navy); color: var(--yellow); }
.sent__ico svg { width: 34px; height: 34px; }
.sent__steps { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .7rem; counter-reset: st; }
.sent__steps li { counter-increment: st; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: center; padding: .8rem 1rem; background: #fff; border: 1px solid var(--shop-line); border-radius: 14px; color: var(--navy); font-weight: 700; }
.sent__steps li::before { content: counter(st); display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--font-m); font-size: .8rem; }

/* the price bar on a phone: the shell's own rows */
@media (max-width: 780px) {
  .cfg-sum__printing li { font-size: .86rem; }
}

/* stark.css gives every <section> overflow:hidden, which clipped the Next button's shadow */
.wz-screen { overflow: visible; }

/* ghost buttons on the light ground (stark's ghost is for dark sections) */
.lt-sec .btn--ghost { background: rgba(0,49,121,.08); border: 1px solid rgba(0,49,121,.25); color: var(--navy); }
.lt-sec .btn--ghost:hover { background: rgba(0,49,121,.14); color: var(--navy); }
@media (max-width: 780px) { .cfg-sum__toggle { min-height: 44px; } }

.cfg .mopts > legend.wz-q__label {
  display: block; padding: 0; margin: 0 0 .75rem; font-family: var(--font-d); text-transform: uppercase;
  font-size: 1.3rem; line-height: 1; letter-spacing: normal; color: var(--navy);
}


/* Step 4 at 781px and up: the price panel already shows the working and the total, so the summary card does not repeat them. */
@media (min-width: 781px) {
  .cfglay:not(.cfglay--solo) .wz-working, .cfglay:not(.cfglay--solo) .wz-summary .osum__total { display: none; }
}

/* A rate goes on a line of its own under its label ("R 7,00 a page"), so it never breaks in the middle. */
.cfg-sum__printing li > span, .wz-working li > span { min-width: 0; }
.cfg-sum__printing small, .wz-working small { display: block; font-size: .8125rem; font-weight: 600; color: var(--shop-ink-soft); }

/* The failed Check and send: one box at the top of the step, each line a link to its field. */
.wz-errors { margin: 0 0 1.1rem; padding: .9rem 1rem; border-radius: 14px; background: #fff; border: 2px solid var(--red); scroll-margin-top: 1rem; }
.wz-errors:focus { outline: 3px solid var(--navy); outline-offset: 3px; }
.wz-errors h2 { margin: 0 0 .35rem; font-family: var(--font-d); text-transform: uppercase; font-size: 1.3rem; line-height: 1; color: var(--red); }
.wz-errors ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.wz-errors li, .wz-errors a { font-size: .95rem; font-weight: 700; color: var(--navy); }
.wz-errors a { text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.wz-help--line { margin: 1.1rem 0 0; }


/* =========================================================
   Courier route (brief AA, 29 Sep 2026): the fleet store's quote wizard on this shell.
   Tiles and chips are radio inputs laid over their label, so they work with no JavaScript
   and the whole tile is the tap target (104px and 64px tall). No prices anywhere.
   ========================================================= */
.ctoggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; padding: .3rem; margin: 0 0 1.1rem; border-radius: 999px; background: rgba(0,49,121,.08); }
.ctoggle__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .4rem .8rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--navy); font: inherit; font-weight: 800; font-size: .95rem; line-height: 1.15; cursor: pointer; text-align: left;
}
.ctoggle__btn small { display: block; font-size: .8125rem; font-weight: 700; color: var(--shop-ink-soft); }
.ctoggle__btn svg { width: 1.4rem; height: 1.4rem; flex: none; }
.ctoggle__btn.is-on { background: var(--navy); color: #fff; }
.ctoggle__btn.is-on small { color: rgba(255,255,255,.8); }
.ctoggle__btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.ctoggle__btn.is-on:focus-visible { outline-color: var(--cyan); }

.wz-tiles { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(8.4rem, 1fr)); }
.wz-tiles--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-tile {
  position: relative; display: grid; justify-items: center; align-content: center; gap: .2rem; text-align: center;
  min-height: 104px; padding: .9rem .5rem; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.7); border: 1px solid var(--shop-line);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.wz-tile:hover { border-color: rgba(0,174,239,.55); background: #fff; }
.wz-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wz-tile__ico { color: var(--navy); }
.wz-tile__ico svg { width: 1.9rem; height: 1.9rem; }
.wz-tile b { color: var(--navy); font-weight: 800; font-size: .95rem; line-height: 1.15; }
.wz-tile small { color: var(--shop-ink-soft); font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.wz-tile:has(input:checked) { border-color: var(--red); background: #fff; box-shadow: 0 0 0 1px var(--red), 0 14px 30px -18px rgba(213,35,47,.6); }
.wz-tile:has(input:checked) .wz-tile__ico { color: var(--red); }
.wz-tile:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }

.wz-chips { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(9.2rem, 1fr)); }
.wz-chip {
  position: relative; display: grid; gap: .05rem; align-content: center; min-height: 64px; padding: .55rem .75rem; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.7); border: 1px solid var(--shop-line); line-height: 1.25;
}
.wz-chip:hover { border-color: rgba(0,174,239,.55); background: #fff; }
.wz-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wz-chip b { color: var(--navy); font-weight: 800; font-size: .95rem; }
.wz-chip span { font-size: .8125rem; font-weight: 600; color: var(--shop-ink-soft); }
.wz-chip em { font-style: normal; font-size: .8125rem; font-weight: 800; color: var(--navy); }
.wz-chip:has(input:checked) { border-color: var(--red); background: #fff; box-shadow: 0 0 0 1px var(--red); }
.wz-chip:has(input:checked) em { color: var(--red); }
.wz-chip:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }

/* JavaScript hides what does not apply; with no JavaScript everything stays visible and the server checks. */
.js [data-hide] { display: none !important; }
.cq .cq-pane[hidden] { display: none !important; }
.cq .cq-pane { margin: 0; padding: 0; border: 0; min-width: 0; }
.cq fieldset.wz-q > legend { float: left; width: 100%; }
.cq-dims__why { margin: -.2rem 0 .7rem; }
.wz-form--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 480px) { .wz-form--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cq-charge {
  display: flex; align-items: flex-start; gap: .7rem; margin: .2rem 0 0; padding: .7rem .9rem; border-radius: 12px;
  background: color-mix(in srgb, var(--cyan) 12%, #fff); border: 1px solid color-mix(in srgb, var(--cyan) 45%, #fff); color: var(--navy);
}
.cq-charge svg { width: 1.6rem; height: 1.6rem; flex: none; margin-top: .1rem; }
.cq-charge b { display: block; font-size: .95rem; line-height: 1.3; }
.cq-charge span { display: block; font-size: .82rem; font-weight: 600; color: var(--shop-ink-soft); }
.cq-charge[hidden] { display: none !important; }

.cq-collect { margin-top: 0; padding-top: 0; border-top: 0; }
.cq-collect__from { margin: 0; overflow-wrap: anywhere; }
.wz-help--tight { margin: .5rem 0 0; }
.cq-val { display: flex; gap: .5rem; }
.cq-val select { flex: 0 0 6.5rem; width: 6.5rem; }
.cq-val input { flex: 1 1 auto; min-width: 0; }
.ord-sec .field label small { font-weight: 600; color: var(--shop-ink-soft); margin-left: .25rem; }
.cq .wz-summary .osum__lines li > i { font-style: normal; }
.cq-change { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin: 0; }
.cq-change a { display: inline-flex; align-items: center; min-height: 44px; font-size: .86rem; font-weight: 800; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cq-change a:hover { color: var(--red); }


/* =========================================================
   Photo route (brief AB, 29 Sep 2026): several photos in one job, a size and a number of prints
   for each. Chips are radio inputs laid over their label (works with no JavaScript, the whole chip
   is the tap target, 64px tall). The amber line under a card is the house style of .wz-warn: never
   blocking. Colours are the stark tokens only.
   ========================================================= */
.js .ph-nojs { display: none; }
.ph-nojs { margin: .7rem 0 0; min-height: 44px; }
.ph-nojs svg { width: 1.2em; height: 1.2em; }
.ph .cfg-drop__input { min-height: 44px; }
.ph .notice { margin: 0 0 1rem; }

/* step 1: the photos added so far */
.ph-gridhead { margin: 1.1rem 0 .1rem; }
.ph-gridhead .wz-q__label { margin: 0 0 .6rem; }
.ph-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
@media (min-width: 561px) { .ph-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ph-tile { min-width: 0; display: grid; align-content: start; gap: .45rem; padding: .55rem; border: 1px solid var(--shop-line); border-radius: 14px; background: #fbfdff; }
.ph-tile__img, .ph-thumb { position: relative; display: grid; place-items: center; overflow: hidden; background: #fff; border: 1px solid var(--shop-line); }
.ph-tile__img { aspect-ratio: 1 / 1; border-radius: 10px; }
.ph-thumb { flex: none; width: 56px; height: 56px; border-radius: 12px; grid-area: thumb; }
.ph-tile__img img, .ph-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-tile__img svg, .ph-thumb svg { display: none; width: 34px; height: 34px; color: var(--navy); }
.ph-tile__img.is-empty svg, .ph-thumb.is-empty svg { display: block; }
.ph-tile__meta { display: grid; gap: .05rem; min-width: 0; }
.ph-tile__meta b { color: var(--navy); font-size: .95rem; }
.ph-tile__meta small, .ph-card__head small { font-size: .8125rem; font-weight: 600; color: var(--shop-ink-soft); overflow-wrap: anywhere; }
.ph-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal !important; }
.ph-remove {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 44px; padding: 0 .4rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 800; color: var(--red); text-decoration: underline; text-underline-offset: 3px;
}
.ph-remove svg { width: 1.05em; height: 1.05em; }
.ph-remove:hover { color: var(--navy); }
.ph-remove:focus-visible { outline: 3px solid rgba(0,174,239,.85); outline-offset: 2px; border-radius: 8px; }

/* steps 2 and 3: one card for each photo */
.ph-all { margin-bottom: .2rem; }
.ph-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .8rem; }
.ph-all + .ph-list { margin-top: .2rem; }
.ph-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "thumb head" "body body"; gap: .55rem .8rem; align-items: center;
  padding: .8rem; background: #fbfdff; border: 1px solid var(--shop-line); border-radius: 16px;
}
.ph-card__head { grid-area: head; min-width: 0; display: grid; gap: .1rem; }
.ph-card__head h3 { margin: 0; font-family: var(--font-d); text-transform: uppercase; font-size: 1.15rem; line-height: 1; color: var(--navy); }
.ph-card__body { grid-area: body; min-width: 0; display: grid; gap: .6rem; }
@media (min-width: 561px) {
  .ph-card { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "thumb head" "thumb body"; align-items: start; }
  .ph-thumb { width: 72px; height: 72px; }
}
.ph-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr)); gap: .45rem; }
.ph-chip {
  position: relative; display: grid; align-content: center; gap: .05rem; min-width: 0; min-height: 64px; padding: .45rem .6rem; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.7); border: 1px solid var(--shop-line-hard); line-height: 1.2; text-align: left;
}
.ph-chip:hover { border-color: rgba(0,174,239,.55); background: #fff; }
.ph-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ph-chip b { color: var(--navy); font-weight: 800; font-size: .84rem; overflow-wrap: anywhere; }
.ph-chip small { font-size: .8125rem; font-weight: 700; color: var(--shop-ink-soft); }
.ph-chip:has(input:checked) { border-color: var(--red); background: #fff; box-shadow: inset 0 0 0 2px var(--red); }
.ph-chip:has(input:checked) small { color: var(--red); }
.ph-chip:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }
.ph-warn {
  margin: 0; padding: .65rem .85rem; border-radius: 12px; font-size: .88rem; font-weight: 600; line-height: 1.4; color: var(--navy);
  background: color-mix(in srgb, var(--yellow) 24%, #fff); border: 1px solid color-mix(in srgb, var(--orange) 55%, #fff);
  scroll-margin-bottom: 150px;            /* the price bar sits at the foot of a phone: a scrolled-to warning stays above it */
}
.ph-warn[hidden] { display: none !important; }
.ph-line { margin: 0; font-size: .9rem; font-weight: 600; color: var(--shop-ink-soft); }
.ph-qtyrow { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.ph-linetotal { color: var(--navy); font-weight: 800; white-space: nowrap; }
.ph-card--qty { align-items: center; }

/* step 4: the job in plain words, then a line for each photo */
.ph-sumhead { margin: 0 0 .6rem; display: grid; gap: .1rem; }
.ph-sumhead b { color: var(--navy); font-size: 1.05rem; }
.ph-sumhead span { font-size: .9rem; font-weight: 600; color: var(--shop-ink-soft); overflow-wrap: anywhere; }
.ph-check { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .5rem; }
.ph-check li { display: flex; justify-content: space-between; gap: .8rem; padding: .6rem .8rem; border: 1px solid var(--shop-line); border-radius: 12px; background: #fff; }
.ph-check li > span { display: grid; gap: .05rem; min-width: 0; }
.ph-check li b { color: var(--navy); }
.ph-check small { font-size: .8125rem; font-weight: 600; color: var(--shop-ink-soft); }

/* ---- slice 4: flyers, business cards and posters (order.php?route=print) ---- */
.pr-chips { grid-template-columns: repeat(auto-fit, minmax(8.4rem, 1fr)); }
.pr-chip { align-content: start; }
.pr-chip b { line-height: 1.25; }
.pr-tag {
  justify-self: start; margin-top: .2rem; padding: .08rem .55rem; border-radius: 999px; font-style: normal; font-size: .8125rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--navy); background: color-mix(in srgb, var(--cyan) 22%, #fff);
}
a.pr-sw { text-decoration: none; color: inherit; }
.pr-sw.is-on, .pr-pick[aria-pressed="true"] { border-color: var(--red); background: #fff; box-shadow: inset 0 0 0 2px var(--red); }
.pr-sw.is-on small, .pr-pick[aria-pressed="true"] small { color: var(--red); }
button.pr-pick { font: inherit; text-align: left; cursor: pointer; color: inherit; }
.pr-pick:focus-visible, .pr-sw:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.pr-switch { margin-bottom: 1.1rem; }
.pr-file { margin: 0 0 1.1rem; }
.pr-picks { margin-bottom: 1rem; }


/* =========================================================
   RE-SKIN 23 Oct 2026 (Steve's print product system, SPEC r1 sections A, D, E, F, G).
   This file loads after shop.css, css/shop-prototype.css and css/stark.css, which are untouched; each block names the rule it re-declares.
   ========================================================= */

/* ---- Spec 3 and A: a page title and its help line that sit straight on the ground (the "not found" pages, and the ask form below)
   are white at display size, not Navy and Red. ---- */
.lt-sec .container > .wz-title, .lt-sec .container > .wz-help { color: #fff; text-wrap: balance; }
.lt-sec .container > .wz-title .wz-title__name, .lt-sec .container > .wz-title .wz-title__step { color: #fff; }
.lt-sec .container > .wz-help { font-size: 1.2rem; font-weight: 700; line-height: 1.4; }

/* ---- Spec 13 and 14: the ask form (route=ask, step 1). The title and help copy come out of the card onto the ground; the question groups
   are the cards; above 900px the groups sit in a two-column grid: the textarea on the left spanning two rows, "How many" over the file
   drop on the right, Next on its own full row, right-aligned. No markup moved: the form stays the panel, it just stops being a card. ---- */
.wz-panel[data-route="ask"][data-step="1"] { background: none; border: 0; box-shadow: none; padding: 0; }
.wz-panel[data-route="ask"][data-step="1"] .wz-title { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: .6rem; }
.wz-panel[data-route="ask"][data-step="1"] .wz-title__name, .wz-panel[data-route="ask"][data-step="1"] .wz-title__step { color: #fff; }
.wz-panel[data-route="ask"][data-step="1"] .wz-help { color: #fff; font-size: 1.2rem; font-weight: 700; line-height: 1.4; max-width: 40rem; text-wrap: balance; margin-bottom: 1.4rem; }
.wz-panel[data-route="ask"][data-step="1"] .wz-screen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem 1.4rem; align-items: stretch; }
.wz-panel[data-route="ask"][data-step="1"] .wz-screen > .wz-title,
.wz-panel[data-route="ask"][data-step="1"] .wz-screen > .wz-help,
.wz-panel[data-route="ask"][data-step="1"] .wz-screen > .notice,
.wz-panel[data-route="ask"][data-step="1"] .wz-screen > .wz-nav { grid-column: 1 / -1; }
.wz-panel[data-route="ask"][data-step="1"] .wz-screen > .wz-nav { margin: .2rem 0 0; justify-content: flex-end; }
/* the groups are the cards */
.wz-panel[data-route="ask"][data-step="1"] .wz-q {
  min-width: 0; padding: clamp(1.1rem, 2.2vw, 1.5rem); background: #fff; color: var(--ink);
  border: 1px solid rgba(0,49,121,.12); border-radius: var(--pc-radius); box-shadow: var(--pc-shadow);
}
/* the file drop IS its own card: the dashed zone, not a box in a box */
.wz-panel[data-route="ask"][data-step="1"] .wz-q[data-dropzone-plain] { padding: 0; background: none; border: 0; box-shadow: none; }
.wz-panel[data-route="ask"][data-step="1"] .cfg-drop { max-width: none; height: 100%; background: #fff; border-color: rgba(0,49,121,.55); box-shadow: var(--pc-shadow); border-radius: var(--pc-radius); align-content: center; }
.wz-panel[data-route="ask"][data-step="1"] .cfg-drop:hover, .wz-panel[data-route="ask"][data-step="1"] .cfg-drop.is-over { border-color: rgba(0,174,239,.9); }
/* the textarea fills its card, and its line stays under 75ch */
.wz-panel[data-route="ask"][data-step="1"] .wz-q:first-of-type { display: flex; flex-direction: column; }
.wz-panel[data-route="ask"][data-step="1"] .wz-q:first-of-type .field { flex: 1; display: flex; flex-direction: column; margin: 0; }
.wz-panel[data-route="ask"][data-step="1"] .wz-q:first-of-type textarea { flex: 1; min-height: 190px; max-width: 72ch; }
@media (min-width: 901px) {
  .wz-panel[data-route="ask"][data-step="1"] .wz-screen { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .wz-panel[data-route="ask"][data-step="1"] .wz-screen > .wz-q:nth-of-type(1) { grid-column: 1; grid-row: span 2; }
  .wz-panel[data-route="ask"][data-step="1"] .wz-screen > .wz-q:nth-of-type(2),
  .wz-panel[data-route="ask"][data-step="1"] .wz-screen > .wz-q:nth-of-type(3) { grid-column: 2; }
}

/* ---- Spec 15: the "How many" stepper. The minus is disabled at the floor (aria-disabled, set by the small script at the foot of order.php
   and by the markup on first paint): faded, no hover, no pointer. The ask form's empty state shows a placeholder dash, not "0". ---- */
.shop .qty button[aria-disabled="true"], .shop .qty button[aria-disabled="true"]:hover { opacity: .45; background: none; cursor: not-allowed; }
.shop .qty input::placeholder { color: rgba(0,49,121,.8); opacity: 1; }

/* ---- Spec 16 (order.css half): choice tiles and chips. Re-declares .wz-tile (order.css:255), .wz-chip (:272) and .ph-chip (:368).
   Unselected border Navy 55% (3.35:1; the .5 in the spec measures 2.94:1). Selected: Sky wash, 2px Red edge, circle-check badge top right. ---- */
.wz-tile, .wz-chip, .ph-chip { background: #fff; border-color: rgba(0,49,121,.55); }
.wz-tile:hover, .wz-chip:hover, .ph-chip:hover { border-color: rgba(0,174,239,.9); background: #fff; }
.wz-tile:has(input:checked), .wz-chip:has(input:checked), .ph-chip:has(input:checked), .pr-sw.is-on, .pr-pick[aria-pressed="true"] {
  border-color: #D5232F; background: var(--sky-wash); box-shadow: 0 0 0 1px #D5232F, 0 14px 30px -18px rgba(213,35,47,.6);
}
.wz-tile:has(input:checked)::after, .wz-chip:has(input:checked)::after, .ph-chip:has(input:checked)::after, .pr-sw.is-on::after, .pr-pick[aria-pressed="true"]::after {
  content: ""; position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; background: #D5232F;
  -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; pointer-events: none;
}
/* Red on the wash is 4.26:1, under 4.5 for 13px text, so the picked tile's small print turns Navy; the edge and the badge carry the choice. */
.wz-chip:has(input:checked) em, .ph-chip:has(input:checked) small, .pr-sw.is-on small, .pr-pick[aria-pressed="true"] small { color: #003179; }
.wz-tile:has(input:focus-visible), .wz-chip:has(input:focus-visible), .ph-chip:has(input:focus-visible), .pr-pick:focus-visible, .pr-sw:focus-visible {
  outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #003179;
}
.wz-photo:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #003179; }
.ord-sec .field input:focus, .ord-sec .field textarea:focus, .ord-sec .field select:focus { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #003179; }   /* spec 4; was a 2.5:1 cyan ring */
.wz-errors:focus { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #003179; }
.ctoggle__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #003179; }
.ctoggle__btn.is-on:focus-visible { outline-color: #fff; }

/* ---- Spec 19: the price panel. The fine print is left-aligned (it hung centred under left-aligned rows) and the total dominates the rows. ---- */
.ord-sec .osum__fine { text-align: left; }
@media (min-width: 781px) {
  .ord-sec .cfg-sum .cfg-sum__total b { font-size: 2.8rem; }
}

/* ---- Spec 22: the courier (quote) side panel speaks in one voice: one heading, one left-aligned 15px body, and the trading-hours
   sentence as a clock-icon line. The panel stays sticky beside the long form. Re-declares css/shop-prototype.css:413 .osum (sticky) and
   order.css:179 .cfg-sum__quote. ---- */
.cfg-sum__quote { font-weight: 700; color: var(--navy); }
.cfg-sum__when { display: flex; align-items: flex-start; gap: .5rem; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--navy); }
.cfg-sum__when .ico { width: 1.25rem; height: 1.25rem; margin-top: .1rem; color: var(--navy); }
@media (min-width: 781px) {
  .cfg-sum--quote { position: sticky; top: 96px; display: flex; flex-direction: column; gap: .7rem; }   /* sticky on desktop only: on a phone the bar is fixed */
  .cfg-sum--quote .cfg-sum__quote { display: contents; }
  .cfg-sum--quote .cfg-sum__quote b { order: 1; font-size: 1.3rem; }
  .cfg-sum--quote .cfg-sum__fine { order: 2; margin: 0; text-align: left; font-size: .9375rem; font-weight: 400; color: var(--navy); line-height: 1.5; }
  .cfg-sum--quote .cfg-sum__when { order: 3; margin: 0; }
  .cfg-sum--quote .cfg-sum__cta { order: 4; }
}

/* ---- Spec 23: check and send is a definition list, not a card in a card. The read card and the summary lose their box, radius and
   shadow; each row is a hairline. A row with no value is not shown. Re-declares order.css:88 .read-card and css/shop-prototype.css:413 .osum. ---- */
.read-card, .wz-panel .wz-summary.osum { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; position: static; }
.read-card__file { border-bottom: 0; padding: 0 0 .9rem; margin: 0; }
.fact { border-top: 1px solid rgba(0,49,121,.14); border-bottom: 0; }
.fact:last-child { border-bottom: 0; }
.wz-summary .osum__lines { gap: 0; border-bottom: 0; padding-bottom: 0; }
.wz-summary .osum__lines li { padding: .7rem 0; border-top: 1px solid rgba(0,49,121,.14); }
.wz-summary .osum__lines li:has(> b:empty), .fact:has(.fact__v:empty) { display: none; }
.fact__note a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
.fact__note a .ico { width: 1.1em; height: 1.1em; }