/* Trio Catalogue.
 *
 * Written to sit inside somebody else's theme without fighting it: everything
 * is scoped under .trio-cat, nothing is !important, and the type inherits from
 * the page rather than imposing a font. Colours come from custom properties so
 * a site can override the sage without touching this file.
 */

.trio-cat {
  /* Room above and below.
   *
   * The grid had no margin at all, so it sat flush against the heading above
   * it and against whatever followed — and a heading with a row of cards
   * touching it reads as part of the cards rather than as a title over them.
   *
   * On the root rather than on the heading, because the heading belongs to
   * the theme: a plugin restyling somebody else's h2 wins that fight on one
   * page and loses it everywhere else. Giving our own block room does the
   * same job and touches nothing that is not ours.
   *
   * margin-block, not a shorthand — a shorthand would zero the side margins a
   * theme may be relying on to centre the thing.
   */
  margin-block: var(--trio-space-top, 28px) var(--trio-space-bottom, 36px);
  --trio-sage: #8A9A5B;
  --trio-fit: contain;
  --trio-ink: #1f2114;
  --trio-muted: #6b7280;
  --trio-line: #e2e4dd;
  --trio-panel: #fbfbf8;
  --trio-cols: 3;
  color: var(--trio-ink);
}

/* ---- how much of the page the block takes ----
 *
 * A theme puts page content in a column, and on a wide screen that column can
 * leave a catalogue looking like a narrow strip of small pictures. This lets a
 * page step outside that column without the theme being edited.
 *
 * Done with margins alone, on purpose. The usual full-bleed trick is
 * `left: 50%; transform: translateX(-50%)`, and a transform here would be a
 * quiet disaster: .trio-cat contains the floating rental-list button, the
 * scrim and the drawer, all position: fixed, and a transformed ancestor
 * becomes the containing block for fixed children — the button would stop
 * being pinned to the screen and start scrolling with the grid.
 *
 * A negative side margin has no such side effect. The width is capped against
 * the viewport so it can never be wider than the screen, with the gutter wide
 * enough to swallow a scrollbar.
 *
 * Only applies when a page asked for it: without the attribute the block sits
 * in the theme's column exactly as before.
 */
.trio-cat[data-width] {
  --trio-cap: min(var(--trio-width, 100%), 94vw);
  width: var(--trio-cap);
  /* Not the margin shorthand — that would wipe out the space above and below
     set in margin-block. */
  margin-inline: calc(50% - var(--trio-cap) / 2);
}

/* ---- the bar above the grid ---- */

.trio-cat .trio-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.trio-cat .trio-bar input[type="search"],
.trio-cat .trio-bar select {
  padding: 9px 12px;
  border: 1px solid var(--trio-line);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: inherit;
  min-height: 42px;
}
.trio-cat .trio-bar input[type="search"] { flex: 1 1 260px; min-width: 0; }
.trio-cat .trio-count { color: var(--trio-muted); font-size: 0.86em; margin-left: auto; }

/* ---- the grid ---- */

.trio-cat .trio-grid {
  display: grid;
  grid-template-columns: repeat(var(--trio-cols), minmax(0, 1fr));
  gap: 18px;
}
/* Narrow screens get fewer columns regardless of what the shortcode asked
   for: three across on a phone is three unreadable columns. */
@media (max-width: 900px) { .trio-cat .trio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .trio-cat .trio-grid { grid-template-columns: 1fr; } }

.trio-cat .trio-card {
  border: 1px solid var(--trio-line);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trio-cat .trio-shot {
  /* The shape of the picture frame.
   *
   * Every photograph in Trio's catalogue is 760x428 — all 400 of them came
   * through one import that crops to 16:9 — so a 4/3 frame letterboxes every
   * single one, and those grey bands are most of what reads as "the image is
   * cut". Matching the frame to the pictures removes them entirely.
   *
   * A variable rather than a fixed number, because the day Trio re-shoots
   * anything the right frame changes with it, and because a page of tall
   * items (candelabra, easels) wants a different shape from a page of sofas.
   */
  aspect-ratio: var(--trio-shot-ratio, 4 / 3);
  /* The same white the photographs are shot on.
   *
   * Tomer, 2026-09-28: "remove the separating lines inside the image that are
   * cutting the image". They are not in the image. Every photo is 16:9 and the
   * frame is 4:3, so a strip of frame shows above and below — and that strip
   * was painted #fbfbf8 against photographs whose own ground is pure white.
   * Four points of difference: invisible as a colour, and quite enough to draw
   * a hard line across the picture.
   *
   * Painting the frame the same white the photographer used makes the join
   * disappear, without touching the picture or needing anything changed on any
   * page. A variable, because a business that shoots on grey wants to say so
   * once rather than live with a white band round every product. */
  background: var(--trio-shot-bg, #fff);
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* contain, not cover.
 *
 * cover fills the frame by cropping whatever will not fit, and a sofa is much
 * wider than 4/3 — so both arms ran off the sides and the customer saw the
 * middle of a sofa. On a rental catalogue the whole item is the point.
 *
 * The cost is a little empty space above and below a wide product, and it
 * costs almost nothing here because the frame's ground is the same near-white
 * as the product shots themselves, so it does not read as letterboxing.
 * fit="cover" puts the old behaviour back on a page whose photographs are all
 * framed alike. */
.trio-cat .trio-shot img { width: 100%; height: 100%; object-fit: var(--trio-fit, contain); display: block; }
/* Deliberately still grey: a card with no photograph should look like one,
   not like a white space somebody forgot to fill. */
.trio-cat .trio-noshot { width: 100%; height: 100%; background: var(--trio-panel); }

.trio-cat .trio-card h3 { font-size: 1em; margin: 0; line-height: 1.35; }
.trio-cat .trio-detail { margin: 0; font-size: 0.82em; color: var(--trio-muted); line-height: 1.45; }
.trio-cat .trio-price { margin: 0; font-weight: 700; }
.trio-cat .trio-price span { font-weight: 400; font-size: 0.8em; color: var(--trio-muted); }

/* The button sits at the bottom whatever the card above it holds, so a row
   of cards with different amounts of text still lines up. */
.trio-cat .trio-card .trio-add,
.trio-cat .trio-card .trio-qty { margin-top: auto; }

.trio-cat .trio-add {
  border: 1px solid var(--trio-sage);
  background: var(--trio-sage);
  color: #fff;
  padding: 8px 12px;
  border-radius: 7px;
  font: inherit;
  /* Two pixels down from whatever the theme sets, rather than a fixed size.
     A number here would fight a theme that sets 15px and shout on one that
     sets 18px; calc keeps the relationship the same wherever it lands. */
  font-size: calc(1em - 2px);
  font-weight: 600;
  cursor: pointer;
  min-height: 38px;
}
.trio-cat .trio-add:hover { filter: brightness(1.06); }

/* The card's Add button appears on hover, the way a jewellery shop does it.
 *
 * Tomer, 2026-09-28, looking at Cartier: the button only shows when the mouse
 * is over the card. It lets the photograph carry the grid instead of a row of
 * green buttons, which on a page of forty items is most of what you see.
 *
 * THREE THINGS THIS MUST NOT BREAK, and all three are the reason for the
 * shape of the rules below rather than a plain :hover.
 *
 * A PHONE HAS NO HOVER. Most of Trio's customers are on one, and a button that
 * only exists on hover is a button that does not exist for them. The whole
 * block is behind `hover: hover` and `pointer: fine`, so a touch screen keeps
 * the button exactly as it was. Not `min-width`: a touch laptop is wide and
 * still cannot hover, and a mouse on a small window still can.
 *
 * A KEYBOARD HAS NO MOUSE EITHER. Hidden with opacity rather than display or
 * visibility, both of which take the button out of the tab order — so it can
 * still be tabbed to, and focus brings it back into view.
 *
 * AND THE GRID MUST NOT JUMP. Opacity leaves the button occupying its space,
 * so cards keep their height and the row does not resize under the pointer.
 * pointer-events stops an invisible button catching a stray click.
 */
@media (hover: hover) and (pointer: fine) {
  .trio-cat .trio-card .trio-add {
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease;
  }
  .trio-cat .trio-card:hover .trio-add,
  .trio-cat .trio-card:focus-within .trio-add,
  .trio-cat .trio-card .trio-add:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .trio-cat .trio-card .trio-add { transition: none; }
  }
}

/* The quantity stepper is NOT hidden, on any device.
 *
 * It is not an action, it is the answer to "how many of these have I already
 * chosen" — and hiding the one part of the card that carries state would mean
 * a customer had to hover every card to find out what is in their list. */

.trio-cat .trio-qty { display: flex; align-items: stretch; gap: 6px; }
.trio-cat .trio-qty button {
  width: 42px;
  min-height: 42px;
  border: 1px solid var(--trio-line);
  background: #fff;
  border-radius: 7px;
  font: inherit;
  font-size: 1.1em;
  cursor: pointer;
}
.trio-cat .trio-qty .trio-n {
  flex: 1;
  min-width: 0;
  text-align: center;
  border: 1px solid var(--trio-line);
  border-radius: 7px;
  font: inherit;
  padding: 6px;
}

.trio-cat .trio-none { color: var(--trio-muted); grid-column: 1 / -1; }

/* ---- the list ---- */

.trio-cat .trio-basket {
  margin-top: 28px;
  border: 1px solid var(--trio-line);
  border-radius: 10px;
  background: var(--trio-panel);
  padding: 18px;

  /* Tomer, 2026-09-28: "in the rental list we need to make all font bigger by
   * 2px."
   *
   * Set ONCE here rather than on the twenty rules inside. Everything in the
   * basket — the heading, the line items, the totals, the labels, the inputs,
   * the send button, the confirmation — is sized in em, so raising the base
   * carries the whole panel and keeps the hierarchy intact: the label stays
   * smaller than the input, the total stays bigger than the rows.
   *
   * calc(1em + 2px), not a fixed 17px: 1em here is whatever the THEME gives
   * this page, which differs from site to site. A hard number would be +2px on
   * one site and -1px on another.
   *
   * This is why nothing inside the basket may be sized in px — see the check
   * in widthtest.js. One px size in here would be the one thing that did not
   * grow, and it would look like a bug rather than a rule. */
  font-size: calc(1em + 2px);
}
.trio-cat .trio-basket h2 { margin: 0 0 12px; font-size: 1.15em; display: flex; align-items: center; gap: 9px; }

/* ---- the drawer ----
 *
 * A floating button that slides the list out over the page, so somebody deep
 * in a long grid can see what they have chosen without scrolling to the foot
 * of it. The z-index is deliberately enormous: this sits inside somebody
 * else's theme, and a sticky header that covered the list would make it
 * unusable with no obvious cause.
 */

.trio-cat .trio-open {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 17px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--trio-sage);
  color: #fff;
  font: inherit;
  font-size: 1.06em;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24);
  min-height: 60px;
}
/* The count sits beside a larger label, so it grows with it. */
.trio-cat .trio-open .trio-pill { font-size: 0.82em; padding: 2px 11px; }
.trio-cat .trio-open:hover { filter: brightness(1.06); }
/* Clear of a phone's home bar, and of the row of buttons themes like to
   park along the bottom edge. */
@media (max-width: 560px) {
  .trio-cat .trio-open { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

.trio-cat .trio-scrim {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(17, 19, 12, 0.38);
}

.trio-cat.is-drawer .trio-basket {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 100%);
  /* The width includes the padding. Without this, a theme that leaves the
     browser's default box model in place makes a phone-width drawer 40px
     wider than the screen, cutting off its left edge — the tick boxes with it. */
  box-sizing: border-box;
  margin: 0;
  z-index: 99999;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
  /* The form is long; the drawer scrolls rather than the page behind it. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.22s ease, visibility 0.22s;
}
.trio-cat.is-drawer .trio-basket.shown { transform: none; visibility: visible; }

/* The heading stays put while the list scrolls under it, so the close button
   is always within reach on a long list. */
.trio-cat.is-drawer .trio-basket h2 {
  position: sticky;
  top: 0;
  margin: -18px -20px 12px;
  padding: 16px 20px 12px;
  background: #fff;
  border-bottom: 1px solid var(--trio-line);
  z-index: 1;
}
.trio-cat .trio-close {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--trio-muted);
  font-size: 1.6em;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
}
.trio-cat .trio-close:hover { background: var(--trio-panel); color: var(--trio-ink); }

@media (prefers-reduced-motion: reduce) {
  .trio-cat.is-drawer .trio-basket { transition: none; }
}
.trio-cat .trio-pill {
  background: var(--trio-sage);
  color: #fff;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.75em;
  font-weight: 700;
}

.trio-cat .trio-list { list-style: none; margin: 0 0 14px; padding: 0; }
.trio-cat .trio-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--trio-line);
  font-size: 0.92em;
}
.trio-cat .trio-list li:last-child { border-bottom: 0; }
/* A thumbnail on each line, so a long list can be scanned by eye rather than
   read word by word. Fixed size, and a plain tile where there is no photo, so
   the names stay in a straight column either way. */
.trio-cat .trio-li-shot {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
  background: var(--trio-panel);
  border: 1px solid var(--trio-line);
}
.trio-cat .trio-li-name { flex: 1; min-width: 0; }
.trio-cat .trio-li-qty { color: var(--trio-muted); }
.trio-cat .trio-li-sum { font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.trio-cat .trio-drop {
  border: 0; background: none; color: var(--trio-muted);
  font-size: 1.2em; line-height: 1; cursor: pointer; padding: 4px 6px;
}
.trio-cat .trio-drop:hover { color: #b4232a; }

/* ---- the sum ---- */

.trio-cat .trio-sum { border-top: 1px solid var(--trio-line); padding-top: 12px; }
.trio-cat .trio-sum-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0; font-size: 0.92em;
}
.trio-cat .trio-sum-row b { font-variant-numeric: tabular-nums; }
.trio-cat .trio-sum-total {
  border-top: 1px solid var(--trio-line);
  margin-top: 6px; padding-top: 10px;
  font-size: 1.05em;
}
.trio-cat .trio-sum-total b { color: var(--trio-sage); font-size: 1.15em; }
.trio-cat .trio-sum-note {
  margin: 10px 0 0; font-size: 0.78em; color: var(--trio-muted); line-height: 1.55;
}

/* ---- the form ---- */

.trio-cat .trio-form { margin-top: 20px; border-top: 1px solid var(--trio-line); padding-top: 16px; }
.trio-cat .trio-form h3 { margin: 0 0 12px; font-size: 1em; }
.trio-cat .trio-form label { display: block; margin-bottom: 10px; font-size: 0.85em; color: var(--trio-muted); }
.trio-cat .trio-form input,
.trio-cat .trio-form select,
.trio-cat .trio-form textarea {
  display: block; width: 100%; box-sizing: border-box;
  margin-top: 4px; padding: 9px 11px;
  border: 1px solid var(--trio-line); border-radius: 7px;
  font: inherit; color: var(--trio-ink); background: #fff;
  min-height: 42px;
}
.trio-cat .trio-form textarea { min-height: 76px; resize: vertical; }
.trio-cat .trio-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
/* The texts box: a tick and its words on one line, not a full-width field.
   The general rule above makes every input a 42px block, which would turn a
   checkbox into a bar. */
.trio-cat .trio-form label.trio-consent {
  display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 14px;
  font-size: 0.8em; line-height: 1.45; cursor: pointer;
}
.trio-cat .trio-form label.trio-consent input {
  display: inline-block; width: 18px; height: 18px; min-height: 0; margin: 1px 0 0;
  padding: 0; flex: none; accent-color: var(--trio-sage);
}
/* "Can we text you?" — two choices in a quiet panel, red until answered when
   someone tries to send without answering. */
.trio-cat .trio-choice {
  margin: 2px 0 14px; padding: 10px 12px 2px; border: 1px solid var(--trio-line); border-radius: 8px;
}
.trio-cat .trio-choice .trio-choice-q { margin: 0 0 8px; font-size: 0.85em; font-weight: 600; color: var(--trio-ink); }
.trio-cat .trio-choice label.trio-consent { margin: 0 0 10px; }
.trio-cat .trio-choice label.trio-consent b { color: var(--trio-ink); }
.trio-cat .trio-choice.missing { border-color: #c0392b; background: #fdf3f2; }
/* "Getting it in" left unanswered: the same red as the text question. */
.trio-cat select.missing { border-color: #c0392b !important; background-color: #fdf3f2; }
.trio-cat .trio-access-err { display: block; margin-top: 6px; font-size: 0.85em; font-weight: 600; color: #b42318; }
.trio-cat .trio-choice .trio-choice-err { margin: 0 0 10px; font-size: 0.85em; font-weight: 600; color: #b42318; }
@media (max-width: 560px) { .trio-cat .trio-f2 { grid-template-columns: 1fr; } }

.trio-cat .trio-send {
  width: 100%; margin-top: 6px; padding: 13px;
  border: 0; border-radius: 8px;
  background: var(--trio-sage); color: #fff;
  font: inherit; font-weight: 600; font-size: 1.02em;
  cursor: pointer; min-height: 48px;
}
.trio-cat .trio-send[disabled] { opacity: 0.6; cursor: default; }
/* Gray under the pointer. Tomer, 2026-10-10: "when hovering over the SEND MY
   RENTAL LIST button lets change the hover color to gray". The plugin set no
   hover of its own, so the theme's button hover showed through; this one is
   specific enough to win over a theme's plain button:hover. A mid gray, so
   the white words stay readable (4.8:1). */
.trio-cat .trio-send:not([disabled]):hover,
.trio-cat .trio-send:not([disabled]):focus-visible { background: #6b7280; color: #fff; }

.trio-cat .trio-said { margin: 12px 0 0; padding: 10px 12px; border-radius: 7px; font-size: 0.9em; }
.trio-cat .trio-said.good { background: #eef1e6; color: #4d5a2f; }
.trio-cat .trio-said.bad { background: #fdecec; color: #8c1c1c; }
.trio-cat .trio-small { margin: 10px 0 0; font-size: 0.78em; color: var(--trio-muted); }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   anything hidden outright — and never reachable by keyboard or screen reader. */
.trio-cat .trio-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* A note only an administrator sees: something is wrong with how the page is
   written, not with what Trio rents. Deliberately plain — it is scaffolding,
   and should not read as part of the shop. */
.trio-admin-note {
  border-left: 3px solid #a5643c; background: #faf6f2; color: #4a3a30;
  padding: 12px 15px; margin: 0 0 18px; border-radius: 0 8px 8px 0; font-size: 14px;
}
.trio-admin-note ul { margin: 6px 0 0; padding-left: 18px; }
.trio-admin-note li { margin: 3px 0; }

/* ---------- one product, in full ----------
   A panel over the page rather than a page of its own: six hundred products
   would be six hundred pages to keep in step with the catalogue, and the
   moment they drifted the website would quote prices the office had changed. */
.trio-item {
  position: fixed; inset: 0; z-index: 10000; overflow-y: auto;
  background: rgba(24, 26, 20, .55); padding: 24px 16px;
  display: flex; align-items: flex-start; justify-content: center;
}
.trio-item[hidden] { display: none; }
body.trio-locked { overflow: hidden; }

.trio-item-inner {
  position: relative; background: #fff; border-radius: 12px; max-width: 900px; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .3); overflow: hidden; margin: auto;
}
@media (max-width: 760px) { .trio-item-inner { grid-template-columns: 1fr; } }

.trio-item-close {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  background: rgba(255, 255, 255, .92); border: 1px solid #e3e2d7; border-radius: 8px;
  width: 34px; height: 34px; font-size: 20px; line-height: 1; cursor: pointer; color: #4a4a42;
}
.trio-item-pics { background: #f4f3ec; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
/* The big picture sits on the same white as the card's frame, for the same
   reason: contain leaves a strip of ground showing, and a strip in a different
   colour from the photograph's own reads as a line drawn across the product.
   The cream stays as the surround, which is what it is good at. */
.trio-item-big { width: 100%; aspect-ratio: var(--trio-shot-ratio, 4 / 3); object-fit: contain;
  display: block; max-width: 100%; background: var(--trio-shot-bg, #fff); border-radius: 6px; }
.trio-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.trio-thumb {
  width: 58px; height: 58px; padding: 2px; background: #fff; cursor: pointer;
  border: 1px solid #e3e2d7; border-radius: 7px; overflow: hidden;
}
.trio-thumb.on { border-color: #8a9a5b; box-shadow: 0 0 0 2px rgba(138, 154, 91, .3); }
.trio-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.trio-item-facts { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.trio-item-facts h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.trio-item-sub { margin: 0; font-size: 13px; color: #6d7268; }
.trio-item-price { margin: 0; font-size: 22px; font-weight: 700; color: #5b6a38; }
.trio-item-price span { font-size: 13px; font-weight: 400; color: #6d7268; }
.trio-item-desc { font-size: 14px; line-height: 1.6; color: #35382f; }

/* Label and value on one line each, so a customer comparing two chairs can
   run an eye down the same column on both. */
.trio-specs {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
  margin: 4px 0; font-size: 13.5px;
}
.trio-specs dt { color: #6d7268; }
.trio-specs dd { margin: 0; color: #35382f; }
.trio-item-act { margin-top: 6px; }

/* The picture is a button now, and must not look like one. */
button.trio-shot { display: block; width: 100%; padding: 0; border: 0; background: #f4f3ec; cursor: pointer; position: relative; }
.trio-titlebtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.trio-titlebtn:hover, button.trio-shot:hover img { opacity: .88; }
.trio-morepics {
  position: absolute; left: 8px; bottom: 8px; background: rgba(24, 26, 20, .72); color: #fff;
  font-size: 11px; padding: 2px 7px; border-radius: 20px; letter-spacing: .02em;
}

/* The thank-you, after a rental list is sent.
 *
 * It replaces the list and the form rather than sitting beneath them, and it
 * waits to be dismissed. Sending used to empty the list, and an empty list
 * closed the drawer — so the confirmation was written into a panel that had
 * already gone, and the customer watched everything they had chosen vanish
 * with no word that it had arrived. */
.trio-cat .trio-thanks {
  text-align: center;
  padding: 28px 20px 24px;
}
.trio-cat .trio-thanks-tick {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--trio-sage);
  color: #fff;
  font-size: 30px; line-height: 56px;
}
.trio-cat .trio-thanks h3 {
  margin: 0 0 8px;
  font-size: 1.25em;
  line-height: 1.3;
}
.trio-cat .trio-thanks p { margin: 0 0 10px; line-height: 1.5; }
.trio-cat .trio-thanks-small { font-size: 0.88em; color: var(--trio-muted); }
/* The request number, set apart so it can be read out over the phone. */
.trio-cat .trio-thanks-no {
  margin: 4px 0 14px; padding: 10px 14px; border-radius: 8px;
  background: #f4f6ef; border-left: 3px solid #8A9A5B; font-size: 0.9em; color: var(--trio-muted);
}
.trio-cat .trio-thanks-no strong {
  display: block; font-size: 1.6em; line-height: 1.2; color: #1f2419; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; margin: 2px 0;
}
.trio-cat .trio-thanks-no span { display: block; font-size: 0.92em; }
.trio-cat .trio-thanks .trio-add { margin-top: 8px; min-width: 160px; }