/* prices.css — what the prices page adds to the card page's style.css,
   whose looks dress it. Everything here is in the looks' own terms
   (--on, --rule, --chosen, --strip and the rest), so each look carries
   through without a rule of its own. */

/* The choices on the left, the price on the right. */
.workspace.prices { grid-template-columns: minmax(0, 34rem) 21rem; justify-content: start; }
.workspace.prices { row-gap: 1.25rem; align-content: start; }
.page-title { grid-column: 1 / -1; }
.page-title h1 {
  margin: 0;
  font: var(--display-weight) clamp(1.75rem, 1.1rem + 1.6vw, 2.6rem)/1.05 var(--display);
  font-stretch: var(--display-stretch);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.page-title .hint { margin-top: 0.4rem; }
.page-title .hint a { color: inherit; }
/* The last choice has no rule under it; the update button follows it
   only without JavaScript. */
.prices .controls fieldset:last-of-type { border-bottom: 0; padding-bottom: 0; }
.prices legend label { cursor: default; }

/* The number of cards: minus, the number, plus, and beside them the
   cards themselves. */
.count { display: flex; align-items: center; gap: 1.25rem; }
.stepper { display: flex; align-items: center; gap: 0.25rem; flex: none; }
.stepper input {
  width: 4.5rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--field-ink);
  font: 650 1.25rem var(--sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* The pile, as it is without JavaScript: one folded card for each,
   fanned out to the right, the top one whole. Each card keeps a slot of
   its own until there are more than the row holds; then the slots shrink together, and the fan closes up
   into a stack, so fifty cards still fit. Each card is the front of a
   tall card: white, with a picture inside a thin border, the logo's card
   face, vermilion with its hills cut out in white, a little askew
   like the sheets under the card on the card page. It is paper, so it
   casts the sheet's small shadow. */
.pile {
  --card-w: 2.4rem;
  --slot: 1.2rem;
  display: flex;
  flex: 0 1 16rem;
  min-width: 0;
  height: 3.5rem;
  align-items: center;
}
.pile > i {
  position: relative;
  flex: 0 1 var(--slot);
  min-width: 0;
  height: calc(var(--card-w) * 7 / 5);
  --tilt: -1.5deg;
}
/* The top card is always whole; the ones under it give way. */
.pile > i:last-child { flex: none; width: var(--card-w); }
.pile > i:nth-child(3n + 2) { --tilt: 1deg; }
.pile > i:nth-child(3n) { --tilt: -0.4deg; }
.pile > i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--card-w);
  border-left: 2px solid var(--stack-1);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='7 0 34 48' preserveAspectRatio='none'%3E%3Crect x='7' width='34' height='48' fill='%23d8442b'/%3E%3Cpath d='M7 40V35L18.5 19L26 29L31 22.5L41 34V40Z' fill='%23fff'/%3E%3C/svg%3E") 0.22rem 0.22rem / calc(100% - 0.44rem) calc(100% - 0.44rem) no-repeat,
    #fff;
  box-shadow: 0 1px 3px rgb(var(--shade) / 0.3), -1px 0 2px rgb(var(--shade) / 0.12);
  rotate: var(--tilt);
}
/* With JavaScript the pile is laid out by prices.js: each card and band
   placed by its left edge, in card widths, and --dy, how far above or
   below the middle, so a step slides them to where they go next. Ten
   cards make a bundle: four of them squared up into a short stack, with
   a band of brown paper round it saying how many. */
@property --tilt { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.pile.laid { position: relative; display: block; isolation: isolate; }
.pile.laid > * {
  position: absolute;
  transition: left 0.35s var(--ease-out), top 0.35s var(--ease-out), --tilt 0.35s var(--ease-out), opacity 0.3s;
}
.pile.laid > i { width: var(--card-w); top: calc(50% - var(--card-w) * (0.7 - var(--dy, 0))); }
.pile > .band {
  top: 50%;
  translate: 0 -50%;
  width: calc(var(--card-w) * 1.2);
  height: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c9a877;
  box-shadow: 0 1px 2px rgb(var(--shade) / 0.3);
  color: #3a2c18;
  font: 800 0.7rem/1 var(--sans);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
/* Cards gathered into a bundle slide under its band and are gone. */
.pile > i.gathered { opacity: 0; transition-delay: 0s, 0s, 0s, 0.2s; }
/* A band is wrapped round a bundle, and slipped off one undone. */
.pile > .band.arriving { animation: band-wrap 0.3s var(--ease-out) 0.15s backwards; }
.pile > .band.leaving { animation: fade-out 0.2s linear forwards; }
@keyframes band-wrap { from { opacity: 0; scale: 0.2 1; } }

/* Another card is dropped on top; one taken away is lifted off. */
.pile > i.arriving { animation: card-drop 0.34s var(--ease-out) backwards; }
.pile > i.leaving { animation: card-lift 0.2s ease-in forwards; }
@keyframes card-drop {
  from { opacity: 0; transform: translate(0.9rem, -1.1rem) rotate(9deg); }
  40% { opacity: 1; }
}
@keyframes card-lift {
  to { opacity: 0; transform: translate(0.9rem, -1.1rem) rotate(9deg); }
}

/* Paper and postage are the settings' ruled cells: the name large, what
   it is small. Postage is two by two, with its price beneath. */
.cells.papers > label, .cells.postages > label { padding: 0.75rem 0.75rem 0.8rem; gap: 0.15rem; }
.cells.papers b, .cells.postages b {
  font: var(--display-weight) 1.35rem/1.1 var(--display);
  font-stretch: var(--size-stretch);
}
.cells.papers small, .cells.postages small { font-size: 0.875rem; line-height: 1.35; color: var(--on-soft); text-wrap: balance; }
.cells.papers label:has(input:checked) small,
.cells.postages label:has(input:checked) small { color: var(--chosen-soft); }
.cells.postages > label:nth-child(n + 3) { border-top: 1px solid var(--rule); }
.cells.postages > label:nth-child(odd) { border-left: 0; }
/* The card's size, as the card page gives a paper's: the size large,
   its measure small. */
.card-size { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.card-size b {
  font: var(--display-weight) var(--size-font)/1 var(--display);
  font-stretch: var(--size-stretch);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.card-size span { flex: 1 1 14rem; font-size: 0.9375rem; line-height: 1.45; color: var(--on-soft); }
/* How long before the cards are posted, at the head of the postage: the
   icon beside the first line, the words beside it, not under it. The
   step pages carry the card page's styles, not rastrillo's callout. */
.dispatch-note {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin: 0 0 1rem; padding: 0.85rem 1rem;
  border: 1.5px solid var(--rule); border-radius: var(--radius);
}
.dispatch-note-ic { display: inline-flex; flex: none; align-items: center; height: 1.5rem; }
.dispatch-note-ic .icon { width: 1.25rem; height: 1.25rem; }
.dispatch-note strong { display: block; line-height: 1.5; }
.dispatch-note p { margin: 0.15rem 0 0; font-size: 0.9375rem; line-height: 1.45; color: var(--on-soft); }
.cell-price { margin-top: 0.3rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.cell-price:empty { display: none; }
/* A postage nobody would choose: there, but out of reach, saying why. */
.cells.postages > label:has(input:disabled) { cursor: default; background: transparent; }
.cells.postages > label:has(input:disabled) b { color: var(--on-soft); }
.cell-price.ruled-out { font-weight: 400; font-size: 0.875rem; line-height: 1.35; font-style: italic; text-wrap: balance; }

/* What a card comes to for so many cards: a bar for each, the one
   chosen solid, its price over it, and the price of one card alone over
   the first, so the fall reads at a glance. Each bar is drawn in an SVG
   of its own, by its height, all on the same scale. */
.per-card { margin-top: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.per-card-title { margin: 0; font-weight: 750; }
.bars { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.35rem; height: 10.5rem; }
.bars li { flex: 1 1 0; min-width: 0; display: flex; contain: inline-size; }
.bars a {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}
.bar { display: block; flex: 1 1 auto; width: 100%; min-height: 0; border-bottom: 2px solid var(--on); }
.bar rect { fill: color-mix(in srgb, var(--on) 30%, transparent); transition: fill 0.15s; }
.bars a:hover .bar rect { fill: color-mix(in srgb, var(--on) 55%, transparent); }
.bars a[aria-current] .bar rect { fill: var(--on); }
.bar-each { font-size: 0.75rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar-each.quiet { visibility: hidden; }
.bars li:first-child .bar-each { align-self: flex-start; }
.bars li:last-child .bar-each { align-self: flex-end; }
.bar-copies { font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.bars a[aria-current] .bar-copies { font-weight: 800; }
.per-card .hint { margin: 0; }

/* Without JavaScript, the button that sends the choices. */
.update { padding-top: 1rem; }
.update[hidden] { display: none; }

/* The price, in the tear strip, kept in view beside the choices. */
.finish.summary { position: sticky; top: 1.5rem; gap: 0.6rem; }
.summary p { margin: 0; }
.summary-what { font-weight: 650; }
.summary-total {
  font: var(--display-weight) clamp(3rem, 2.4rem + 2vw, 4rem)/1 var(--display);
  font-stretch: var(--size-stretch);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.summary-note { font-weight: 650; }
/* The price block (price-parts.html), the calculator's and the cart's:
   under the total, what a card comes to with postage, its figure in
   the condensed numerals in an ink box, and "with postage" beside it in
   soft ink. A price is never filled: vermilion is for what is chosen. */
.price-each { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
.price-each-box {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border: 1.5px solid var(--on);
  border-radius: var(--radius);
  font-weight: 750;
}
.price-each-box .summary-each-figure {
  font: var(--display-weight) 1.5rem/1.1 var(--display);
  font-stretch: var(--size-stretch);
  font-variant-numeric: tabular-nums;
}
.price-each-note { color: var(--on-soft); }
/* And the next number of cards up, what each would come to, and a link
   to it. */
.summary-next {
  margin-top: 0.35rem;
  padding: 0.8rem 0.9rem;
  border: 2px solid currentColor;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.summary-next p { flex: 1 1 12rem; line-height: 1.4; }
.summary-next .button { flex: none; text-decoration: none; border-color: var(--go); background: var(--go); color: var(--go-ink); font-weight: 750; }
.summary-next .button:hover { border-color: var(--go); background: color-mix(in srgb, var(--go) 85%, var(--go-ink)); }
.summary-discount strong { font-weight: 750; }
.summary-lines {
  margin: 0.35rem 0 0.4rem;
  padding-top: 0.75rem;
  border-top: 1.5px dashed var(--strip-rule);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.summary-lines div { display: flex; justify-content: space-between; gap: 1rem; }
.summary-lines dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.summary .finish-buttons .button { text-decoration: none; }
.summary[aria-busy="true"] :is(.summary-total, .calc-window) { opacity: 0.55; transition: opacity 0.2s 0.15s; }
/* The calculator's adding machine (calc.css), large, with a heavier
   line, under what the price is for. */
.summary > .calc { --calc-w: min(20rem, 100%); --calc-line: 2.5px; justify-self: start; margin-block: 0.25rem 0.5rem; }

/* A figure that changes turns over, a digit at a time, like a till:
   upwards when it goes up, downwards when it comes down. prices.js puts
   each changed digit in a .turn, with the old one in data-was, drawn
   here above or below the new and with nothing to read out. The old one
   rests out of sight, so a digit that never moves still shows the new
   value. */
.turn { display: inline-block; position: relative; overflow: clip; vertical-align: bottom; }
.turn > span { display: inline-block; }
.turn::after { content: attr(data-was) / ""; position: absolute; inset: 0; }
.turn.up > span { animation: turn-in-up 0.42s var(--ease-out) var(--delay, 0s) backwards; }
.turn.up::after { transform: translateY(-100%); animation: turn-out-up 0.42s var(--ease-out) var(--delay, 0s) backwards; }
.turn.down > span { animation: turn-in-down 0.42s var(--ease-out) var(--delay, 0s) backwards; }
.turn.down::after { transform: translateY(100%); animation: turn-out-down 0.42s var(--ease-out) var(--delay, 0s) backwards; }
@keyframes turn-in-up { from { transform: translateY(100%); } }
@keyframes turn-out-up { from { transform: translateY(0); } }
@keyframes turn-in-down { from { transform: translateY(-100%); } }
@keyframes turn-out-down { from { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  /* Nothing moves: the new digits fade in where they stand, and the
     cards come and go in place. */
  .turn::after { display: none; }
  .turn.up > span, .turn.down > span { animation: fade-in 0.25s ease-out; }
  .pile > i.arriving { animation: fade-in 0.2s ease-out backwards; }
  .pile > i.leaving { animation: fade-out 0.15s linear forwards; }
  .pile.laid > * { transition: none; }
  .pile > .band.arriving { animation: fade-in 0.2s ease-out backwards; }
}
@keyframes fade-out { to { opacity: 0; } }

@media (max-width: 52rem) {
  /* One column: the title, the choices, then the price, as the card
     page puts its tear strip last. */
  .workspace.prices { grid-template-columns: 1fr; }
  .page-title { order: 0; }
  /* The card page lets its settings go to pieces on a narrow screen
     (style.css); here they stay a form, before the price. */
  .prices .controls { display: flex; order: 1; }
  .finish.summary { position: static; order: 2; }
}

/* The ordering steps for quantity and paper and for delivery, built from
   these same parts (card-page.html): a message from the step before; the
   card itself, at the head of the price; and where the cards are posted. */
.prices .flash { grid-column: 1 / -1; margin: 0; font-weight: 650; }
.summary-card { display: block; width: 4.5rem; height: auto; margin-bottom: 0.4rem; box-shadow: 0 1px 4px rgb(var(--shade) / 0.3); }
.summary-card.landscape { width: 6.3rem; }
/* The card being made, before it is saved, has its look only once
   prices.js has found it in the browser. */
.summary-card[hidden] { display: none; }
/* Signing in on the delivery step, before anyone has: a form of its
   own, under the step's, with the price beside them both. */
@media (min-width: 52.01rem) {
  .prices .signin-here { grid-column: 1; grid-row: 3; }
  .prices .signin-here ~ .finish.summary { grid-column: 2; grid-row: 2 / span 2; align-self: start; }
}
.prices .signin-here fieldset, .prices .address-fields { display: grid; gap: 1rem; }
.prices .signin-here fieldset > .hint, .prices .address-fields > .hint { margin: 0; }
.summary-postage { color: var(--on); }
.prices .postal { font-style: normal; font-size: 1.0625rem; line-height: 1.5; }
.prices fieldset .hint a { color: inherit; font-weight: 650; text-underline-offset: 0.15em; }
/* Payment: why the order did not go through, above the rest; the
   fieldsets' few sentences; and, in the price, what is paid by card. */
.prices .flash.problem { color: var(--on); display: flex; gap: 0.5rem; }
.prices .controls fieldset > p:not(.hint, .card-size) { margin: 0.6rem 0 0; font-size: 1.0625rem; line-height: 1.5; }
.prices .order-terms { margin-top: 1rem; }
.summary-due dt, .summary-due dd { font-weight: 750; }
.prices .admin-fields { display: grid; gap: 1rem; }

/* The delivery step, signing in, before anyone has: once a link is
   asked for, the step says to check the email, in the middle, with the
   card and what it comes to above, and what to do if nothing comes
   under a rule. */
.signin-sent {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 34rem);
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding: clamp(1rem, 4vw, 2.5rem) 0 1rem;
  text-align: center;
}
.signin-sent p { margin: 0; }
.signin-sent .summary-card { width: 8rem; margin: 0; rotate: -3deg; box-shadow: 0 10px 30px -8px rgb(var(--shade) / 0.45); }
.signin-sent .summary-card.landscape { width: 11rem; }
.signin-sent-order { color: var(--on-soft); }
.signin-sent-order strong { color: var(--on); }
.signin-sent-head { display: grid; gap: 0.75rem; }
.signin-sent h1 {
  margin: 0;
  font: var(--display-weight) clamp(2rem, 1.4rem + 1.8vw, 2.75rem)/1.05 var(--display);
  font-stretch: var(--display-stretch);
  letter-spacing: -0.025em;
}
.signin-sent-lede { font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; overflow-wrap: anywhere; }
.signin-sent-again { font-weight: 650; }
.signin-sent-help {
  justify-self: stretch;
  display: grid;
  gap: 0.75rem;
  padding-top: 1.35rem;
  border-top: 1.5px solid var(--rule);
  text-align: left;
}
.signin-sent-help h2 { margin: 0; font-size: 1rem; font-weight: 750; }
.signin-sent-help ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; line-height: 1.5; overflow-wrap: anywhere; }
.signin-sent-help a { color: inherit; font-weight: 650; text-underline-offset: 0.15em; }
.signin-again { display: inline; }
.signin-again [data-pow-status] { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--on-soft); }
.signin-again [data-pow-status][hidden] { display: none; }

/* The emailed link, opened: the one press that signs in, boxed where
   the email address was asked for. */
.signin-confirm {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: 1.25rem;
  border: 1.5px solid var(--on);
  border-radius: var(--radius);
  background: var(--strip);
  color: var(--strip-ink);
}
.signin-confirm h2 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.signin-confirm p { margin: 0; line-height: 1.55; }
.signin-confirm form { margin: 0.25rem 0 0; }

/* Signed in, who as, above the address, with a way out for someone it
   is not. */
.signed-in-as { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.signed-in-tick {
  display: inline-grid; place-items: center; flex: none;
  width: 1.25rem; height: 1.25rem; margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--go); color: var(--go-ink);
}
.signed-in-tick .icon { width: 0.8rem; height: 0.8rem; stroke-width: 3; }

/* A button that reads as a link, inside a sentence. */
.link-button {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.link-button:hover { color: var(--chosen); }
.link-button:disabled { color: var(--on-soft); cursor: default; text-decoration-style: dotted; }
.link-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* The cards in an order of several, each with how many: in the order
   step's other cards, beside a number to choose; in the tear strip,
   and on the payment step, as a list. */
.order-cards { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.5rem; }
.order-cards li { display: grid; grid-template-columns: 3rem 1fr auto; gap: 0.75rem; align-items: center; }
.order-cards img { display: block; width: 2.2rem; height: auto; justify-self: center; box-shadow: 0 1px 3px rgb(var(--shade) / 0.3); }
.order-cards img.landscape { width: 3rem; }
.order-cards label { display: grid; gap: 0.1rem; }
.order-cards label small { color: var(--on-soft); }
.order-cards input[type="number"] {
  width: 4.5rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--field-ink);
  font: 650 1.125rem var(--sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.summary .order-cards li { grid-template-columns: 2.2rem 1fr; gap: 0.5rem; font-size: 0.9rem; }
.summary .order-cards img { width: 1.6rem; }
.summary .order-cards img.landscape { width: 2.2rem; }
.order-lines { margin: 0.25rem 0 0.75rem; padding-left: 1.2rem; }
.keep-card { margin-top: 1.5rem; }

/* The cart: a line for each card, its picture beside its name and
   reference, with Remove at the right; and under them two labelled
   controls of one height side by side: how many, the stepper joined in
   one ruled box, and the paper, matt or gloss, each with its mark. */
.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.cart-line {
  display: grid;
  grid-template-columns: 6.5rem auto 1fr auto;
  grid-template-areas: "img what what remove" "img copies paper paper";
  gap: 0.75rem 1.5rem;
  align-items: start;
  padding-bottom: 1.25rem;
  border-bottom: 1.5px solid var(--rule);
}
.cart-line img { grid-area: img; display: block; width: 100%; height: auto; box-shadow: 0 1px 4px rgb(var(--shade) / 0.3); }
.cart-line img.portrait { width: 4.6rem; justify-self: center; }
.cart-line-what { grid-area: what; display: grid; gap: 0.1rem; min-width: 0; }
.cart-line-what b { font-size: 1.125rem; font-weight: 650; }
.cart-line-what .design-ref { color: var(--on-soft); }
.cart-remove { grid-area: remove; font-weight: 650; }
.cart-copies { grid-area: copies; }
.cart-paper-field { grid-area: paper; }
.cart-copies, .cart-paper-field { display: grid; gap: 0.35rem; }
.cart-copies > label, .cart-paper-label { font-size: 0.9375rem; color: var(--on-soft); }
/* The stepper, joined: minus, the number and plus in one ruled box, as
   tall as the paper's pair. */
.cart-copies .stepper { gap: 0; width: fit-content; border: 1px solid var(--rule); border-radius: var(--radius); }
.cart-copies .stepper .icon-button { border-radius: 0; }
.cart-copies .stepper input { width: 3.5rem; min-height: 2.75rem; border: 0; border-inline: 1px solid var(--rule); border-radius: 0; font-size: 1.125rem; }
.cart-paper { width: fit-content; grid-template-columns: repeat(2, auto); }
.cart-paper label { min-height: 2.75rem; padding: 0 2.1rem 0 0.9rem; gap: 0.45rem; flex-direction: row; align-items: center; font-weight: 650; }
.paper-mark { width: 1rem; height: 1rem; flex: none; }
/* In the calculator's paper cells, the mark before the name, as large as
   the name's capitals. */
.paper-name { display: inline-flex; align-items: center; gap: 0.45rem; }
.paper-name .paper-mark { width: 0.8em; height: 0.8em; }
/* One more of the collection, or, at the most an order holds, why not. */
.add-more {
  justify-self: start;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1.5px dashed var(--rule);
  border-radius: 6px;
  color: var(--on);
  font-weight: 650;
  text-decoration: none;
}
.add-more:hover { border-color: var(--on); background: var(--hover); }
.add-more[hidden], .cart-limit[hidden] { display: none; }
.cart-limit { margin-top: 1rem; }
/* The papers: each its mark and name, then what it is, its weight first. */
.paper-list { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.5rem; margin: 0 0 1rem; }
.paper-list > div { display: contents; }
.paper-list dt { display: flex; align-items: center; align-self: start; min-height: 1.6em; gap: 0.5rem; font-weight: 650; }
.paper-list dd { margin: 0; color: var(--on-soft); }
.paper-list dd b { color: var(--on); font-weight: 500; }
.card-size-line { margin: 0; font-size: 0.9375rem; color: var(--on-soft); }
.card-size-line b { color: var(--on); }
/* The cart's price slip: the panel, ruled, its price, then each line
   by its card's reference, and the postage. */
.cart-slip { padding: 1.5rem; background: var(--strip); color: var(--strip-ink); border: 1.5px solid var(--strip-rule); border-radius: var(--radius); }
.cart-slip .summary-what { margin: 0; font-size: 1rem; }
.cart-slip-lines { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px dashed var(--strip-rule); display: grid; gap: 0.75rem; }
.cart-slip-lines dt small { display: block; color: var(--on-soft); font-size: 0.8125rem; }
.cart-slip .price-each-note { color: var(--on-soft); }
.order-cards-price { margin-left: auto; font-variant-numeric: tabular-nums; }
.summary .order-cards li { grid-template-columns: 2.2rem 1fr auto; }
@media (max-width: 40rem) {
  .cart-line { grid-template-columns: 4.5rem 1fr auto; grid-template-areas: "img what remove" "copies copies copies" "paper paper paper"; }
  .cart-line img.portrait { width: 3.4rem; }
  .paper-list { grid-template-columns: 1fr; gap: 0.2rem; }
  .paper-list dd { margin-bottom: 0.6rem; }
}
/* Delivery: the address we have, as it is, with Change the address
   beside it; or the fields, the second line of the address under the
   first with no label of its own to see, town and postcode side by
   side, and the county behind a dashed button until it is wanted. */
.address-shown { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.address-shown address { font-style: normal; line-height: 1.5; }
.address-shown[hidden], .address-form[hidden], .address-county[hidden] { display: none; }
.address-form { display: grid; gap: 1rem; }
.address-form [rst-field] { margin: 0; }
.address-form [rst-field-label] { color: var(--on); font-size: 0.9375rem; font-weight: 650; margin-bottom: 0.35rem; }
.address-line2 { margin-top: -0.5rem; }
.address-line2 [rst-field-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.address-row { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: 1rem; }
button.add-more { margin-top: 0; background: none; font: inherit; font-weight: 650; cursor: pointer; }
button.add-more[hidden] { display: none; }
button.add-more .icon { width: 1.125rem; height: 1.125rem; }
@media (max-width: 30rem) { .address-row { grid-template-columns: 1fr; } }
/* Payment: each card in the order, its front and, in the condensed
   numerals, how many of it by its reference, with what it is under it;
   where it is posted beside how, and when it should arrive; and the
   terms, a warning with its triangle, only its first sentence in ink. */
.pay-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.pay-line { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.25rem; align-items: center; }
.pay-line img { display: block; width: 100%; height: auto; box-shadow: 0 1px 4px rgb(var(--shade) / 0.3); }
.pay-line img.portrait { width: 5.3rem; justify-self: center; }
.pay-line p { margin: 0; }
.pay-line-what {
  font: var(--display-weight) 2rem/1.1 var(--display);
  font-stretch: var(--size-stretch);
  font-variant-numeric: tabular-nums;
}
.pay-line-how { color: var(--on-soft); font-size: 0.9375rem; }
.pay-change { color: var(--on); font-weight: 650; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.pay-posted { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; align-items: start; }
.pay-posted .postal { margin: 0; font-size: 1.0625rem; }
.pay-post p { margin: 0 0 0.35rem; line-height: 1.45; }
.pay-post-how { font-weight: 700; font-size: 1.0625rem; }
.order-terms.warning { font-weight: 400; color: var(--on-soft); }
.order-terms.warning strong { color: var(--on); font-weight: 700; }
.order-terms.warning a { color: var(--on); }
.pay-slip-due { margin-top: 0.75rem; }
.pay-slip-due .summary-due dt, .pay-slip-due .summary-due dd { font-weight: 750; }
/* The pill that pays: a card drawn in it, in place of the step's number. */
.pay-card-icon { width: 1.35rem; height: 1.35rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@media (max-width: 40rem) {
  .pay-posted { grid-template-columns: 1fr; }
  .pay-line { grid-template-columns: 5rem 1fr; }
  .pay-line img.portrait { width: 3.6rem; }
  .pay-line-what { font-size: 1.6rem; }
}
/* An empty cart says what it is for, and where its cards come from, as
   rastrillo's empty state does on the admin's pages: a dashed box, the
   words and the buttons in its middle. */
.cart-empty { grid-column: 1 / -1; padding: 3rem 1.5rem; border: 1px dashed var(--rule); border-radius: var(--radius); text-align: center; }
.cart-empty h2 { margin: 0 0 0.5rem; font-size: 1.375rem; }
.cart-empty p { margin: 0 auto; max-width: 34rem; color: var(--on-soft); }
.cart-empty .cart-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; }