/* ============================================================
   JAMAR — Custom orders page components (.jm-co-*)
   /custom-orders/ · /pl/zamowienia-indywidualne/ and their thank-you
   pages. Ported from the Claude Design handoff (pages/custom-orders.css,
   .jb-co-*) onto the --jm--* tokens in ../bricks-tokens.css.
   Shared pieces (container, eyebrow, sec-head, icons, link arrow) come
   from bricks-tokens.css — only page-specific components live here.

   The quote form is a native Bricks Form (#jamar-quote,
   .jm-co-form__form). Bricks renders its own markup (.form-group >
   label + control), so it is styled by selector and fields are
   addressed by `name`. Group headings, help lines and notices are
   Bricks "HTML" fields. Conditional groups get .is-hidden / .is-shown
   from assets/js/custom-orders.js.

   Breakpoints follow Bricks: 991px tablet, 767px mobile landscape,
   478px mobile portrait.
   ============================================================ */

/* ---------- Shared on this page ---------- */

.jm-co-h1 {
  margin-bottom: var(--jm--space-m);
  font-size: var(--jm--text-4xl);
  line-height: var(--jm--leading-tight);
  text-wrap: balance;
}
.jm-co-lead {
  margin: 0;
  max-width: 60ch;
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text-muted);
  text-wrap: pretty;
}

/* ---------- 01 Hero + trust strip ---------- */

.jm-co-hero {
  padding-block: var(--jm--space-2xl) var(--jm--space-xl);
  background: var(--jm--color-surface);
}
.jm-co-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 64ch;
}

.jm-co-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jm--space-xs) var(--jm--space-m);
  margin: var(--jm--space-xl) 0 0;
  padding: var(--jm--space-m) 0;
  list-style: none;
  border-block: 1px solid var(--jm--color-border);
}
.jm-co-trust__item {
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
}
.jm-co-trust__item + .jm-co-trust__item::before {
  content: '·';
  margin-right: var(--jm--space-m);
  font-weight: var(--jm--weight-bold);
}
.jm-co-trust__key {
  font-weight: var(--jm--weight-semibold);
  color: var(--jm--color-text);
}
.jm-co-trust__val::before { content: ' — '; }

/* ---------- 02 Instructions + quote form ---------- */

.jm-co-form {
  padding-block: var(--jm--space-2xl) var(--jm--space-3xl);
  background: var(--jm--color-surface-alt);
  border-top: 1px solid var(--jm--color-border);
  scroll-margin-top: 72px;
}
.jm-co-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--jm--space-xl);
  align-items: start;
}

.jm-co-guide {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-m);
  min-width: 0;
}
.jm-co-guide__h {
  font-size: var(--jm--text-xl);
  line-height: var(--jm--leading-snug);
  font-weight: var(--jm--weight-semibold);
  letter-spacing: -0.01em;
}
.jm-co-guide__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--jm--color-border);
}
.jm-co-guide__item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--jm--space-s);
  padding-block: var(--jm--space-m);
  border-top: 1px solid var(--jm--color-border);
}
.jm-co-guide__item .jm-icon { margin-top: 2px; color: var(--jm--color-text); }
.jm-co-guide__lead {
  margin: 0 0 var(--jm--space-3xs);
  font-size: var(--jm--text-s);
  font-weight: var(--jm--weight-semibold);
  color: var(--jm--color-text);
}
.jm-co-guide__body {
  margin: 0;
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
  text-wrap: pretty;
}

.jm-co-card {
  min-width: 0;
  padding: var(--jm--space-xl);
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-m);
}
.jm-co-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-2xs);
  margin-bottom: var(--jm--space-l);
}
.jm-co-card__h {
  font-size: var(--jm--text-2xl);
  line-height: var(--jm--leading-snug);
  font-weight: var(--jm--weight-bold);
  letter-spacing: -0.01em;
}
.jm-co-card__sub {
  margin: 0;
  font-size: var(--jm--text-s);
  color: var(--jm--color-text-muted);
}

/* --- The Bricks form --- */

.jm-co-form__form {
  --co-gap: var(--jm--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--co-gap);
}
.jm-co-form__form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-xs);
  width: 100%;
  max-width: 35rem;
  margin: 0;
  padding: 0;
}
.jm-co-form__form .form-group.is-hidden { display: none; }
/* Notices stay hidden until the script decides they apply. */
.jm-co-form__form .form-group:has(> [data-co-show]):not(.is-shown) { display: none; }
/* Wrappers of hidden inputs take no space. */
.jm-co-form__form > div:has(> input[type="hidden"]:only-child) { display: none; }

.jm-co-form__form .form-group > label,
.jm-co-form__form .form-group > .label {
  margin: 0;
  font-size: var(--jm--text-s);
  font-weight: var(--jm--weight-semibold);
  color: var(--jm--color-text);
}
.jm-co-form__form label.required::after,
.jm-co-form__form .label.required::after {
  content: ' *';
  color: var(--jm--color-brand);
}

.jm-co-form__form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
  width: 100%;
  min-height: 44px;
  padding: var(--jm--space-xs) 14px;
  font: inherit;
  font-size: var(--jm--text-base);
  color: var(--jm--color-text);
  background-color: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-s);
  transition: border-color var(--jm--duration-base) var(--jm--ease-out),
              box-shadow var(--jm--duration-base) var(--jm--ease-out);
}
.jm-co-form__form :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--jm--color-brand);
  box-shadow: var(--jm--shadow-focus);
}
.jm-co-form__form ::placeholder { color: var(--jm--color-text-muted); }
.jm-co-form__form textarea { min-height: 8.5rem; line-height: var(--jm--leading-normal); resize: vertical; }
/* Chevron: same encoded value as .jm-field__select in bricks-tokens.css. */
.jm-co-form__form select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1B17' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}
.jm-co-form__form select:has(option[value=""]:checked) { color: var(--jm--color-text-muted); }

/* Error message rendered by Bricks validation. */
.jm-co-form__form .form-group-error-message {
  margin: 0;
  padding: 0;
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-medium);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-error);
  background: none;
}
.jm-co-form__form .form-group:has(> .form-group-error-message.show) :is(input, select, textarea) { border-color: var(--jm--color-error); }

/* Group headings (HTML fields): "1 About you" … */
.jm-co-form__form .form-group:has(> .jm-co-group__h) {
  max-width: none;
  margin-top: var(--jm--space-s);
  padding-top: var(--jm--space-l);
  border-top: 1px solid var(--jm--color-border);
}
.jm-co-form__form .form-group:has(> [data-co-show="product"]) + .form-group {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.jm-co-group__h {
  display: flex;
  align-items: center;
  gap: var(--jm--space-s);
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-snug);
  font-weight: var(--jm--weight-semibold);
  letter-spacing: 0;
}
.jm-co-group__num {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--jm--color-text);
  border-radius: var(--jm--radius-pill);
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-bold);
  font-variant-numeric: tabular-nums;
}
.jm-co-group__meta {
  margin-left: auto;
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-medium);
  color: var(--jm--color-text-muted);
}

/* Help lines (HTML fields) sit directly under their field. */
.jm-co-form__form .form-group:has(> .jm-co-help) {
  margin-top: calc(var(--jm--space-2xs) - var(--co-gap));
}
.jm-co-help {
  margin: 0;
  font-size: var(--jm--text-xs);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
}
.jm-co-help:empty { display: none; }
.jm-co-help.is-error { font-weight: var(--jm--weight-medium); color: var(--jm--color-error); }
.jm-co-help a { color: var(--jm--color-text); text-underline-offset: 3px; }
.jm-co-help a:hover { color: var(--jm--color-brand); }

/* Checkbox and radio rows — 20 px control in a 44 px row. */
.jm-co-form__form .options-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--jm--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jm-co-form__form .form-group:has([name="finishes[]"]) .options-wrapper {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jm-co-form__form .options-wrapper li {
  display: flex;
  align-items: center;
  gap: var(--jm--space-s);
  min-height: 44px;
  margin: 0;
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text);
}
.jm-co-form__form .options-wrapper label { flex: 1; padding-block: var(--jm--space-2xs); font-weight: var(--jm--weight-regular); cursor: pointer; }
.jm-co-form__form :is(input[type="checkbox"], input[type="radio"]) {
  appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--jm--color-border-strong);
  border-radius: var(--jm--radius-xs);
  background: var(--jm--color-surface);
  cursor: pointer;
  transition: background-color var(--jm--duration-fast) var(--jm--ease-out),
              border-color var(--jm--duration-fast) var(--jm--ease-out);
}
.jm-co-form__form input[type="radio"] { border-radius: var(--jm--radius-pill); }
.jm-co-form__form input[type="checkbox"]:checked {
  border-color: var(--jm--color-brand);
  background: var(--jm--color-brand) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.jm-co-form__form input[type="radio"]:checked {
  border-color: var(--jm--color-brand);
  background: var(--jm--color-brand);
  box-shadow: inset 0 0 0 4px var(--jm--color-surface);
}
.jm-co-form__form .form-group:has(> .form-group-error-message.show) :is(input[type="checkbox"], input[type="radio"]):not(:checked) { border-color: var(--jm--color-error); }

/* Consent rows: the group label is for screen readers only. */
.jm-co-form__form .form-group:has(:is([name="consent_privacy[]"], [name="consent_marketing[]"])) > .label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.jm-co-form__form .form-group:has(:is([name="consent_privacy[]"], [name="consent_marketing[]"])) li { align-items: flex-start; }
.jm-co-form__form .form-group:has(:is([name="consent_privacy[]"], [name="consent_marketing[]"])) input { margin-top: var(--jm--space-2xs); }
.jm-co-form__form .form-group:has([name="consent_privacy[]"]) label::after { content: ' *'; color: var(--jm--color-brand); }
/* The help lines under the consent rows line up with the text, not the box. */
.jm-co-form__form .form-group:has(> [data-co-help-for^="consent"]) { padding-left: calc(20px + var(--jm--space-s)); }

/* Notices: product hint and the regular-supply branch. */
.jm-co-form__form .form-group:has(> .jm-co-alert),
.jm-co-form__form .form-group:has(> .jm-co-branch) { max-width: none; }
.jm-co-alert,
.jm-co-branch {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--jm--space-s);
  padding: var(--jm--space-m);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-m);
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-normal);
}
.jm-co-alert { background: var(--jm--color-surface); }
.jm-co-branch { margin-top: var(--jm--space-xs); background: var(--jm--color-surface-alt); }
.jm-co-alert .jm-icon,
.jm-co-branch .jm-icon { margin-top: 1px; color: var(--jm--color-text); }
.jm-co-alert p,
.jm-co-branch p { margin: 0; color: var(--jm--color-text-muted); }
.jm-co-alert .jm-co-alert__h,
.jm-co-branch .jm-co-branch__h { font-weight: var(--jm--weight-semibold); color: var(--jm--color-text); }
.jm-co-alert__h + p,
.jm-co-branch__h + p { margin-top: var(--jm--space-3xs); }

/* File upload — Bricks' "choose files" label becomes the drop zone.
   The native input stays focusable (Bricks sizes it to 0), so its focus
   ring is drawn on the zone. Drag and drop is wired in the page script. */
.jm-co-form__form .form-group.file { display: flex; }
.jm-co-form__form .form-group.file > label.choose-files {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--jm--space-xs);
  min-height: 7rem;
  margin: 0;
  padding: var(--jm--space-m);
  font-family: inherit;
  font-size: var(--jm--text-s);
  font-weight: var(--jm--weight-semibold);
  line-height: var(--jm--leading-normal);
  text-align: center;
  white-space: normal;
  color: var(--jm--color-text);
  background: var(--jm--color-surface-alt);
  border: 1px dashed var(--jm--color-border-strong);
  border-radius: var(--jm--radius-s);
  cursor: pointer;
  transition: border-color var(--jm--duration-base) var(--jm--ease-out),
              background-color var(--jm--duration-base) var(--jm--ease-out);
}
.jm-co-form__form .form-group.file > label.choose-files::before {
  content: '';
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12'/%3E%3Cpath d='M6 10l6-6 6 6'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12'/%3E%3Cpath d='M6 10l6-6 6 6'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
}
.jm-co-form__form .form-group.file > label.choose-files:hover,
.jm-co-form__form .form-group.file > label.choose-files.is-drag {
  background: var(--jm--color-surface);
  border-color: var(--jm--color-text);
}
.jm-co-form__form .form-group.file:has(input[type="file"]:focus-visible) > label.choose-files {
  border-style: solid;
  border-color: var(--jm--color-brand);
  box-shadow: var(--jm--shadow-focus);
}
.jm-co-form__form .form-group.file:has(.jm-co-files-over) > label.choose-files { border-color: var(--jm--color-error); }
.jm-co-form__form .file-result.show {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jm--space-s);
  min-height: 44px;
  margin: 0;
  padding: var(--jm--space-2xs) var(--jm--space-2xs) var(--jm--space-2xs) var(--jm--space-s);
  font-size: var(--jm--text-s);
  color: var(--jm--color-text);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-s);
  overflow-wrap: anywhere;
}
.jm-co-form__form .file-result.show.danger {
  color: var(--jm--color-error);
  background: color-mix(in srgb, var(--jm--color-error) 5%, transparent);
  border-color: var(--jm--color-error);
}
.jm-co-form__form .file-result.show .remove {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 36px;
  margin: 0;
  padding: 0 var(--jm--space-s);
  font: inherit;
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-semibold);
  line-height: 1;
  color: var(--jm--color-text);
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-s);
  cursor: pointer;
}
.jm-co-form__form .file-result.show .remove:hover { border-color: var(--jm--color-text); background: var(--jm--color-surface); color: var(--jm--color-text); }
.jm-co-form__form .file-result.show .remove:focus-visible { outline: none; box-shadow: var(--jm--shadow-focus); }

/* Submit — mirrors .jm-btn.jm-btn--primary.jm-btn--lg (Bricks renders the
   button itself, so the library classes cannot be attached). */
.jm-co-form__form .submit-button-wrapper {
  max-width: none;
  margin-top: var(--jm--space-s);
  padding-top: var(--jm--space-l);
  border-top: 1px solid var(--jm--color-border);
}
.jm-co-form__form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jm--space-xs);
  align-self: flex-start;
  min-width: 13.75rem;
  min-height: 44px;
  padding: 16px 28px;
  font-family: var(--jm--font-body);
  font-size: var(--jm--text-l);
  font-weight: var(--jm--weight-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--jm--color-on-brand);
  background: var(--jm--color-brand);
  border: 1.5px solid transparent;
  border-radius: var(--jm--radius-s);
  cursor: pointer;
  transition: background-color var(--jm--duration-base) var(--jm--ease-out);
}
.jm-co-form__form button[type="submit"]:hover { background: var(--jm--color-brand-hover); }
.jm-co-form__form button[type="submit"]:focus-visible { outline: none; box-shadow: var(--jm--shadow-focus); }
.jm-co-form__form button[type="submit"]:disabled {
  color: var(--jm--color-text-muted);
  background: var(--jm--color-border);
  cursor: not-allowed;
}
/* The reason line is moved under the button by the script. */
.jm-co-reason {
  margin: 0;
  font-size: var(--jm--text-xs);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
}
.jm-co-reason[hidden] { display: none; }

/* Result messages rendered by Bricks (the send error; success redirects). */
.jm-co-form__form .message {
  max-width: none;
  padding: var(--jm--space-m);
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-m);
}
.jm-co-form__form .message.success { border-color: var(--jm--color-success); }
.jm-co-form__form .message.danger {
  border-color: var(--jm--color-error);
  background: color-mix(in srgb, var(--jm--color-error) 5%, transparent);
}

/* ---------- 03 What happens next (also on the thank-you page) ---------- */

.jm-co-next {
  padding-block: var(--jm--space-3xl);
  background: var(--jm--color-surface);
}
/* Steps (.jm-co-steps / .jm-co-step): the rules now live in bricks-tokens.css as
   .jm-steps, with this page's names kept as an alias until it switches over. */

/* ---------- 04 Contact fallback ---------- */

.jm-co-alt {
  padding-block: var(--jm--space-2xl);
  background: var(--jm--color-surface-alt);
  border-top: 1px solid var(--jm--color-border);
}
.jm-co-alt__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--jm--space-xl);
  align-items: start;
}
.jm-co-alt__head .jm-sub { margin-top: var(--jm--space-xs); }
.jm-co-channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jm--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jm-co-channels__item { display: flex; }
.jm-co-channel {
  display: grid;
  flex: 1;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--jm--space-m);
  min-height: 44px;
  padding: var(--jm--space-m);
  color: var(--jm--color-text);
  text-decoration: none;
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-m);
  transition: border-color var(--jm--duration-base) var(--jm--ease-out),
              box-shadow var(--jm--duration-base) var(--jm--ease-out);
}
.jm-co-channel:hover { color: var(--jm--color-text); border-color: var(--jm--color-border-strong); box-shadow: var(--jm--shadow-soft); }
.jm-co-channel:focus-visible { outline: none; box-shadow: var(--jm--shadow-focus); }
.jm-co-channel .jm-icon { --jm-icon-size: 1.5rem; margin-top: 2px; }
.jm-co-channel__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--jm--space-2xs);
  min-width: 0;
}
.jm-co-channel__label {
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-bold);
  letter-spacing: var(--jm--tracking-wide);
  text-transform: uppercase;
  color: var(--jm--color-text-muted);
}
.jm-co-channel__value {
  font-size: var(--jm--text-xl);
  line-height: var(--jm--leading-snug);
  font-weight: var(--jm--weight-semibold);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  transition: color var(--jm--duration-base) var(--jm--ease-out);
}
.jm-co-channel:hover .jm-co-channel__value { color: var(--jm--color-brand); }
.jm-co-channel__meta { font-size: var(--jm--text-s); color: var(--jm--color-text-muted); }

/* ---------- 20 Thank-you page ----------
   The layout (.jm-co-ty, .jm-co-urgent, .jm-co-links) and .jm-co-merge now live in
   bricks-tokens.css as .jm-status / .jm-merge, with these names kept as aliases. */

/* ---------- Responsive ---------- */

@media (min-width: 992px) {
  .jm-co-guide { position: sticky; top: 96px; }
}

@media (max-width: 991px) {
  .jm-co-form__grid,
  .jm-co-alt__grid { grid-template-columns: minmax(0, 1fr); gap: var(--jm--space-l); }
  .jm-co-trust { flex-direction: column; gap: var(--jm--space-xs); }
  .jm-co-trust__item + .jm-co-trust__item::before { display: none; }
}

@media (max-width: 767px) {
  .jm-co-card { padding: var(--jm--space-m); }
  .jm-co-channels { grid-template-columns: minmax(0, 1fr); }
  .jm-co-form__form .form-group:has([name="finishes[]"]) .options-wrapper { grid-template-columns: minmax(0, 1fr); }
  .jm-co-form__form button[type="submit"] { align-self: stretch; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .jm-co-channel,
  .jm-co-channel__value,
  .jm-co-form__form .form-group.file > label.choose-files { transition: none; }
}