/* Generated by scripts/build-configurator-template.py from the standalone
   configurator. Edit the styles there, not here. */
/*
   * Typography and colour follow the specification the shop supplied on
   * 9 September 2026: Sora for headings and prices, Inter for everything else, on
   * a near-black page with gunmetal cards.
   *
   * Two decisions here are deliberate and easy to undo by accident.
   *
   * The palette is fixed rather than following prefers-color-scheme. This widget
   * began as a standalone page and carried a light palette and a dark one. Inside
   * the site there is only ever one background to sit on, so an OS setting
   * deciding which palette a customer got meant some of them saw white cards on a
   * black page.
   *
   * Text colour is set on the widget's own root, not on body. The site's
   * stylesheets load after this one and set body colour to a mid grey, so every
   * element that inherited its colour rather than declaring one came out grey on
   * a white card. That is the "text is really light and hard to read" report.
   * Declaring it here puts it beyond the theme's reach.
   */
  :root {
    /* Surfaces */
    --ground: #0B0D10;
    --surface: #15181D;
    --surface-2: #0F1216;
    --rule: #262A31;
    --rule-strong: #333944;

    /* Text */
    --ink: #F5F5F3;
    --ink-2: #C7CBD1;
    --ink-3: #AEB4BC;
    --muted: #9299A3;

    /* Brand */
    --accent: #E33B4F;
    --accent-bright: #E5485D;
    --accent-ink: #FFFFFF;
    --alert: #F05264;
    --alert-bg: #23151A;
    --warn-ink: #E0A64A;
    --warn-bg: #241D12;

    /* Type. Sizes are the desktop column of the specification; the mobile column
       is applied by overriding these once, near the end of this file. */
    --font-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --size-eyebrow: 13px;
    --size-title: 48px;
    --size-card: 22px;
    --size-question: 20px;
    --size-body: 17px;
    --size-label: 16px;
    --size-description: 15px;
    --size-price: 22px;
    --size-print: 14px;
  }

  * { box-sizing: border-box; }

  /*
   * The hidden attribute only works because the browser's own stylesheet says
   * display:none, which any display declaration in this file outranks. Several
   * things here are flex containers and are also hidden from the script: the
   * build drawer, the total bar, and the selectable rows for options a vehicle
   * does not offer. Without this they stay on screen while reporting themselves
   * as hidden, which is how the drawer came to be open on first load.
   */
  .ua-config.wrap [hidden] { display: none !important; }

  /* The standalone page needs the background here. On the site the theme sets it,
     and the page-specific selector is what overrides that. Nothing below depends
     on either winning. */
  body,
  body.path-tuning {
    margin: 0;
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
  }

  /*
   * The page colour is set here, but on the site the theme paints its own content
   * region over it in black. That is left alone on purpose: overriding it needs
   * !important, which a module has no business using against a theme, and the two
   * colours are a shade apart. It belongs in the site-wide typography pass, where
   * the region can be set properly.
   */

  /*
   * The site prints the page title in a block of its own, and this widget carries
   * its own heading, so the page ends up saying "Build your tune" twice, in two
   * different treatments, under two h1 elements. The widget's own is kept: it is
   * the one the specification describes, it carries the small label above it, and
   * it is what the standalone page shows. Hidden only on this page.
   */
  body.path-tuning .block-page-title-block {
    display: none;
  }

  /*
   * Everything below is scoped to the widget's own root. The extra class is not
   * decoration: one class alone loses to the theme's own rules, which are just as
   * specific and load later.
   */
  .ua-config.wrap {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem 1.1rem 4rem;
    font: 400 var(--size-body)/1.6 var(--font-body);
    color: var(--ink-2);
    /* Checkboxes and radios are left as native controls so they keep their
       keyboard and assistive behaviour. This is what stops them rendering as
       white squares on the near-black cards. */
    color-scheme: dark;
  }

  .ua-config.wrap header {
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: .9rem;
    margin-bottom: 1.5rem;
  }
  .ua-config.wrap .eyebrow {
    margin: 0 0 .5rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--size-eyebrow);
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .ua-config.wrap h1 {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--size-title);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--ink);
  }
  .ua-config.wrap header p {
    margin: .5rem 0 0;
    font-size: var(--size-body);
    line-height: 1.6;
    color: var(--ink-2);
  }

  .ua-config.wrap .grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
  @media (min-width: 56rem) {
    .ua-config.wrap .grid { grid-template-columns: 1.15fr .85fr; align-items: start; }
  }

  .ua-config.wrap .card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1.35rem;
    color: var(--ink-2);
  }
  .ua-config.wrap .card + .card { margin-top: 1.1rem; }

  .ua-config.wrap h2 {
    margin: 0 0 .9rem;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--size-card);
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
  }

  /* Form questions: the label above a select or a number box. */
  .ua-config.wrap .field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
  .ua-config.wrap .field label {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--size-question);
    line-height: 1.4;
    color: var(--ink);
  }
  .ua-config.wrap select,
  .ua-config.wrap input[type="number"] {
    font-family: var(--font-body);
    font-weight: 400;
    /* Never below 16px: iOS zooms the page when a field smaller than this is
       focused, which throws the customer out of the layout mid-form. */
    font-size: var(--size-label);
    line-height: 1.4;
    padding: .6rem .7rem;
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--ink);
    width: 100%;
  }
  .ua-config.wrap select:disabled { opacity: .5; }

  /* Selection labels: the text beside a checkbox. */
  .ua-config.wrap .check {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .42rem 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--size-label);
    line-height: 1.4;
    color: var(--ink);
  }
  .ua-config.wrap .check input {
    width: 1.1rem; height: 1.1rem; flex: none;
    accent-color: var(--accent);
  }

  /*
   * The price beside a selection. The specification puts prices in Sora Bold at
   * 22px, which is right for the order total but would shout down the label it
   * sits next to, so the inline hint keeps the face and the colour at the size of
   * the label beside it.
   */
  .ua-config.wrap .price-hint {
    margin-left: auto;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--size-label);
    color: var(--accent-bright);
    font-variant-numeric: tabular-nums;
  }
  .ua-config.wrap fieldset { border: 0; padding: 0; margin: 0 0 .6rem; }

  /* ------------------------------------------------------------ the summary */

  .ua-config.wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--size-label);
    line-height: 1.4;
  }
  .ua-config.wrap td {
    padding: .5rem 0;
    /* The site puts a light border on all four sides of a cell, which draws a grid
       over the summary. Only the line between rows is wanted. */
    border: 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
    color: var(--ink-2);
  }
  .ua-config.wrap td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink);
  }
  .ua-config.wrap tfoot td,
  /* The figure as well as the word, or the amount stays in the body colour that
     the rule for numeric cells gives it. */
  .ua-config.wrap tfoot td.num {
    border: 0;
    padding-top: .8rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--size-price);
    line-height: 1.2;
    color: var(--accent-bright);
  }

  .ua-config.wrap .flag {
    display: inline-block;
    margin-left: .4rem;
    padding: .1em .45em;
    border-radius: 3px;
    background: var(--warn-bg);
    color: var(--warn-ink);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--size-print);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .ua-config.wrap .vehicle {
    margin-bottom: .7rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--size-label);
    line-height: 1.4;
    color: var(--ink);
  }

  /* ------------------------------------------------------------- the buttons */

  .ua-config.wrap button {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--size-label);
    line-height: 1.4;
    padding: .8rem 1rem;
    border-radius: 4px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
    width: 100%;
  }
  .ua-config.wrap button:hover:not(:disabled) {
    background: var(--accent-bright);
    border-color: var(--accent-bright);
  }
  .ua-config.wrap button:disabled { opacity: .45; cursor: not-allowed; }
  .ua-config.wrap button.secondary {
    background: transparent;
    color: var(--ink-2);
    border-color: var(--rule-strong);
    margin-top: .55rem;
  }
  .ua-config.wrap button.secondary:hover:not(:disabled) {
    background: transparent;
    border-color: var(--ink-3);
    color: var(--ink);
  }
  .ua-config.wrap button:focus-visible,
  .ua-config.wrap select:focus-visible,
  .ua-config.wrap input:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
  }

  .ua-config.wrap a {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: inherit;
    color: var(--accent-bright);
  }

  /* ------------------------------------------------- notices and shop copy */

  .ua-config.wrap .notice {
    padding: .85rem .9rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--size-print);
    line-height: 1.5;
    margin-top: .9rem;
  }
  .ua-config.wrap .notice.stop {
    background: var(--alert-bg);
    color: var(--alert);
    border: 1px solid currentColor;
  }
  .ua-config.wrap .notice.warn {
    background: var(--warn-bg);
    color: var(--warn-ink);
    border: 1px solid currentColor;
  }

  /* A notice whose wording is the shop's own, so it arrives as paragraphs styled
     for body copy. The colours have to come from the notice or the text would sit
     grey on amber, and the outer box already supplies the spacing. */
  .ua-config.wrap .notice .help {
    margin: 0;
    color: inherit;
    font-size: inherit;
  }
  .ua-config.wrap .notice .help strong { color: inherit; }

  /*
   * The shop's own copy, entered at /admin/config/content/tuning-text. It arrives
   * as paragraphs, lists and bold run-in headings, so each of those is given the
   * matching style from the specification rather than left to inherit.
   */
  .ua-config.wrap .help {
    font-size: var(--size-body);
    line-height: 1.6;
    color: var(--ink-2);
    margin: -.2rem 0 1.1rem;
  }
  .ua-config.wrap .help p { margin: 0 0 .7rem; }
  .ua-config.wrap .help :first-child { margin-top: 0; }
  .ua-config.wrap .help :last-child { margin-bottom: 0; }
  .ua-config.wrap .help strong {
    font-weight: 600;
    color: var(--ink);
  }
  .ua-config.wrap .help ul,
  .ua-config.wrap .help ol { margin: 0 0 .7rem; padding-left: 1.2rem; }
  .ua-config.wrap .help li { margin-bottom: .35rem; }

  .ua-config.wrap .help-footer {
    font-size: var(--size-description);
    line-height: 1.6;
    color: var(--ink-2);
  }
  .ua-config.wrap .help-footer:empty { display: none; }
  .ua-config.wrap .help-footer p { margin: 0 0 .6rem; }
  .ua-config.wrap .help-footer strong { font-weight: 600; color: var(--ink); }
  .ua-config.wrap .help-footer ul { margin: 0; padding-left: 1.2rem; }
  .ua-config.wrap .help-footer li { margin-bottom: .35rem; }

  .ua-config.wrap .preview-note {
    font-size: var(--size-print);
    line-height: 1.5;
    color: var(--muted);
    margin-top: .8rem;
  }
  .ua-config.wrap #loading {
    font-size: var(--size-body);
    color: var(--ink-3);
    padding: 2rem 0;
  }

  /* ------------------------------------------------------------ stepped flow */

  /*
   * The configurator is a set of collapsible steps with one open at a time. The
   * shop asked for this because the single long page showed every question at
   * once and read as overwhelming before a customer had chosen anything.
   *
   * Nothing here uses display:none for the closed state. The inputs inside a
   * closed step still have to be readable by the code that prices the build and
   * writes the shareable link, and a step the vehicle does not need is hidden
   * with the hidden attribute instead, which removes it from the flow entirely.
   */

  .ua-config.wrap .chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
  }
  .ua-config.wrap .chips li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .34rem .7rem .34rem .4rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: var(--size-print);
    color: var(--muted);
    white-space: nowrap;
  }
  .ua-config.wrap .chips li .n {
    display: grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    background: var(--rule);
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 700;
  }
  .ua-config.wrap .chips li.is-current {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
  }
  .ua-config.wrap .chips li.is-current .n {
    background: rgba(0, 0, 0, .28);
    color: var(--accent-ink);
  }
  .ua-config.wrap .chips li.is-done { color: var(--ink-2); }
  .ua-config.wrap .chips li.is-done .n {
    background: #1B5E43;
    color: #DFF5E9;
    font-size: 0;
  }
  /* The tick is drawn rather than set as text so it keeps its weight at any size. */
  .ua-config.wrap .chips li.is-done .n::after {
    content: '';
    width: .32rem;
    height: .58rem;
    margin-top: -.12rem;
    border: solid #DFF5E9;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .ua-config.wrap .step {
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--surface-2);
    margin-bottom: .7rem;
    overflow: hidden;
  }
  .ua-config.wrap .step.is-open {
    background: var(--surface);
    border-color: var(--rule-strong);
  }

  .ua-config.wrap .step-head { margin: 0; font-size: inherit; }
  .ua-config.wrap .step-toggle {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: .95rem 1.05rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .ua-config.wrap .step-toggle:hover:not(:disabled) { background: rgba(255, 255, 255, .02); }

  .ua-config.wrap .step-badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 9px;
    background: var(--rule);
    color: var(--ink-3);
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
  }
  .ua-config.wrap .step.is-open .step-badge {
    background: var(--accent);
    color: var(--accent-ink);
  }
  .ua-config.wrap .step.is-done .step-badge {
    background: #1B5E43;
    color: transparent;
    font-size: 0;
  }
  .ua-config.wrap .step.is-done .step-badge::after {
    content: '';
    width: .4rem;
    height: .72rem;
    margin-top: -.16rem;
    border: solid #DFF5E9;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
  }

  .ua-config.wrap .step-heading {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
  }
  .ua-config.wrap .step-title {
    font-family: var(--font-head);
    font-size: var(--size-question);
    font-weight: 600;
    color: var(--ink);
  }
  .ua-config.wrap .step-summary {
    font-size: var(--size-description);
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ua-config.wrap .step.is-open .step-summary,
  .ua-config.wrap .step-summary:empty { display: none; }

  .ua-config.wrap .step-edit {
    flex: none;
    color: var(--accent-bright);
    font-size: var(--size-description);
    font-weight: 600;
  }
  .ua-config.wrap .step:not(.is-done) .step-edit,
  .ua-config.wrap .step.is-open .step-edit { visibility: hidden; }

  .ua-config.wrap .step-chevron {
    flex: none;
    width: .5rem;
    height: .5rem;
    margin-left: .15rem;
    border: solid var(--muted);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
  }
  .ua-config.wrap .step.is-open .step-chevron {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  .ua-config.wrap .step-body {
    display: none;
    padding: 0 1.05rem 1.1rem;
  }
  .ua-config.wrap .step.is-open .step-body { display: block; }

  .ua-config.wrap .step-intro {
    margin: 0 0 .85rem;
    color: var(--ink-3);
    font-size: var(--size-description);
  }
  .ua-config.wrap .step-intro:empty { display: none; }
  .ua-config.wrap .step-hint {
    margin: .9rem 0 0;
    color: var(--muted);
    font-size: var(--size-print);
  }

  /* The long shop-authored copy, folded away until asked for. */
  .ua-config.wrap .means {
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--rule);
    padding-bottom: .55rem;
  }
  .ua-config.wrap .means > summary {
    display: flex;
    align-items: center;
    gap: .35rem;
    width: fit-content;
    color: var(--ink-3);
    font-size: var(--size-description);
    cursor: pointer;
    list-style: none;
  }
  .ua-config.wrap .means > summary::-webkit-details-marker { display: none; }
  .ua-config.wrap .means > summary::after {
    content: '';
    width: .38rem;
    height: .38rem;
    border: solid var(--muted);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-2px);
  }
  .ua-config.wrap .means[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
  .ua-config.wrap .means .help { margin-top: .6rem; }

  .ua-config.wrap .group-label {
    margin: 1rem 0 .5rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .ua-config.wrap .group-label:empty { display: none; }

  /* A selectable row: control, name and description, price. */
  .ua-config.wrap .opt {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem .85rem;
    border: 1px solid var(--rule);
    border-radius: 11px;
    background: var(--surface-2);
    margin-bottom: .45rem;
    cursor: pointer;
  }
  .ua-config.wrap .step.is-open .opt { background: var(--ground); }
  .ua-config.wrap .opt:hover { border-color: var(--rule-strong); }
  .ua-config.wrap .opt:has(input:checked) {
    border-color: var(--accent);
    background: rgba(227, 59, 79, .10);
  }
  .ua-config.wrap .opt:has(input:focus-visible) {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
  }
  .ua-config.wrap .opt input {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin: .15rem 0 0;
    accent-color: var(--accent);
  }
  .ua-config.wrap .opt-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
  }
  .ua-config.wrap .opt-title {
    color: var(--ink);
    font-size: var(--size-label);
    font-weight: 600;
  }
  .ua-config.wrap .opt-desc {
    color: var(--muted);
    font-size: var(--size-description);
    line-height: 1.45;
  }
  .ua-config.wrap .opt-desc:empty { display: none; }
  .ua-config.wrap .opt-price {
    flex: none;
    font-family: var(--font-head);
    font-size: var(--size-label);
    font-weight: 600;
    color: var(--ink);
  }
  .ua-config.wrap .opt-price.included { color: #6FCF97; }
  .ua-config.wrap .tag {
    display: inline-block;
    margin-left: .35rem;
    padding: .1rem .4rem;
    border-radius: 4px;
    background: rgba(227, 59, 79, .16);
    color: var(--accent-bright);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: .08em;
  }

  .ua-config.wrap .continue { margin-top: 1rem; }

  /* ------------------------------------------------------------- running total */

  .ua-config.wrap .totalbar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem -1.1rem -4rem;
    padding: .7rem 1.1rem;
    border-top: 1px solid var(--rule-strong);
    background: rgba(11, 13, 16, .94);
    backdrop-filter: blur(8px);
  }
  .ua-config.wrap .totalbar-total {
    display: grid;
    grid-template-areas: 'label label' 'price caret';
    justify-content: start;
    align-items: center;
    gap: 0 .4rem;
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .ua-config.wrap .totalbar-label {
    grid-area: label;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .ua-config.wrap .totalbar-price {
    grid-area: price;
    font-family: var(--font-head);
    font-size: var(--size-price);
    font-weight: 700;
    color: var(--ink);
  }
  .ua-config.wrap .totalbar-caret {
    grid-area: caret;
    width: .42rem;
    height: .42rem;
    border: solid var(--muted);
    border-width: 0 2px 2px 0;
    transform: rotate(-135deg);
  }
  .ua-config.wrap .drawer.is-open ~ .totalbar .totalbar-caret { transform: rotate(45deg); }

  .ua-config.wrap .drawer {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
  }
  .ua-config.wrap .drawer-panel {
    width: min(38rem, 100%);
    max-height: 82vh;
    overflow-y: auto;
    padding: 1.1rem 1.1rem 1.4rem;
    border: 1px solid var(--rule-strong);
    border-radius: 16px 16px 0 0;
    background: var(--surface);
  }
  .ua-config.wrap .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .8rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .ua-config.wrap .drawer-close {
    padding: 0 .3rem;
    border: 0;
    background: none;
    color: var(--ink-3);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
  }
  .ua-config.wrap .vehicle-spec {
    margin: -.2rem 0 .6rem;
    color: var(--muted);
    font-size: var(--size-description);
  }
  .ua-config.wrap .drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1rem;
  }
  .ua-config.wrap .drawer-actions button { flex: 1 1 12rem; }

  /* ------------------------------------------------------------- narrow screens */

  /* The mobile column of the specification. Form controls stay at 16px. */
  @media (max-width: 47.99rem) {
    :root {
      --size-eyebrow: 12px;
      --size-title: 36px;
      --size-card: 20px;
      --size-question: 19px;
      --size-body: 16px;
      --size-price: 20px;
    }
  }