/*
 * Our own forms on the storefront (the Sales Hub's "CRNR form" block).
 *
 * The look is the THEME's (Vinny, 2026-10-05: "the same fonts and everything as the theme and the
 * same boxed style"): its body and heading fonts, its buttons, its colors, read from the theme's own
 * CSS variables so the form follows any theme change. Fallbacks are today's values.
 *
 * Built into extensions/crnr-forms/assets/crnr-forms.css with intl-tel-input's styles after it.
 */

.crf-host {
  --crf-font: var(--FONT-STACK-BODY, Inter, sans-serif);
  --crf-heading: var(--FONT-STACK-HEADING, Anton, sans-serif);
  --crf-text: var(--COLOR-TEXT, #000);
  --crf-muted: var(--COLOR-TEXT-LIGHT, #4d4d4d);
  --crf-field: var(--COLOR-BG-BRIGHTER, #f2f2f2);
  --crf-line: #c3c3c3;
  --crf-error: var(--COLOR-ERROR, #721c24);
  --crf-error-bg: var(--COLOR-ERROR-BG, #f8d7da);
  --crf-error-border: var(--COLOR-ERROR-BORDER, #f5c6cb);
  --crf-btn-bg: var(--BTN-PRIMARY-BG, #000);
  --crf-btn-text: var(--BTN-PRIMARY-TEXT, #fff);
  --crf-radius: var(--RADIUS, 0px);
  --crf-max: 1296px;
  display: block;
  font-family: var(--crf-font);
  color: var(--crf-text);
}
.crf-host--narrow { --crf-max: 900px; }
.crf-host [hidden] { display: none !important; }
.crf-host *, .crf-host *::before, .crf-host *::after { box-sizing: border-box; }

/* The card: white, the soft shadow of the boxed form. */
.crf {
  max-width: var(--crf-max);
  margin: 30px auto;
  background: var(--COLOR-BG, #fff);
  border-radius: var(--crf-radius);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  font-size: 16px;
  line-height: 1.375;
  text-align: left;
}
.crf-inner { padding: 32px; }
@media (max-width: 749px) {
  .crf { margin: 20px 0; }
  .crf-inner { padding: 24px 16px; }
}

.crf-title {
  margin: 0 0 12px;
  font-family: var(--crf-heading);
  font-weight: var(--FONT-WEIGHT-HEADING, 400);
  font-size: 24px;
  line-height: 1.2;
  text-transform: var(--FONT-UPPERCASE-HEADING, uppercase);
  letter-spacing: var(--LETTER-SPACING-HEADING, 0);
  color: var(--crf-text);
}
/* Who is signed in, or the way to sign in and skip the typing. */
.crf-account { margin: -4px 0 16px; font-size: 14px; line-height: 1.5; color: var(--crf-muted); }
.crf-link { color: var(--crf-text); text-decoration: underline; text-underline-offset: 3px; }
/* The signed-in customer's email: their account, so not editable here. */
.crf-ctl.is-locked .crf-input { color: var(--crf-muted); cursor: default; }
.crf-heading {
  margin: 4px 0 0;
  font-family: var(--crf-heading);
  font-weight: var(--FONT-WEIGHT-HEADING, 400);
  font-size: 18px;
  line-height: 1.2;
  text-transform: var(--FONT-UPPERCASE-HEADING, uppercase);
  letter-spacing: var(--LETTER-SPACING-HEADING, 0);
}

/* The progress bar: a gray line, black up to the current step, a marker per step. */
.crf-steps { margin: 8px 0 28px; }
.crf-steps__track { position: relative; height: 16px; }
.crf-steps__line,
.crf-steps__fill { position: absolute; left: 0; top: 6.5px; height: 3px; }
.crf-steps__line { right: 0; background: var(--crf-line); }
.crf-steps__fill { width: 0; background: var(--crf-text); transition: width 0.3s ease; }
.crf-steps__marker {
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border: 3px solid var(--crf-line);
  border-radius: 50%;
  background: #fff;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.crf-steps__marker.is-done { background: var(--crf-text); border-color: var(--crf-text); }
.crf-steps__names { display: none; margin-top: 8px; grid-auto-flow: column; grid-auto-columns: 1fr; }
.crf-host--step-names .crf-steps__names { display: grid; }
.crf-steps__name {
  text-align: center;
  font-family: var(--FONT-STACK-SUBHEADING, var(--crf-font));
  font-weight: var(--FONT-WEIGHT-SUBHEADING, 600);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crf-muted);
}
.crf-steps__name.is-current { color: var(--crf-text); }

/* Questions: label, help line, box, message. Side by side in a row on wide screens. */
.crf-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 16px; }
@media (max-width: 749px) {
  .crf-row { display: block; }
}
/* A question with a width (Vinny, 2026-10-06): half or a third of the line on a wide screen, the
   whole line on a phone. Only a form that uses widths lays its steps out this way. A break starts
   the line over before a question set to start a new line. Six columns: a half is three, a third two.
   Each line is two rows, every question's head (label, help line) in the first and its answer in the
   second, so the answers on a line start level. Without subgrid a question simply stacks. */
.crf-panel--flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 16px; }
.crf-panel--flow > * { grid-column: span 6; grid-row: span 2; min-width: 0; }
.crf-panel--flow > .crf-w-half { grid-column: span 3; }
.crf-panel--flow > .crf-w-third { grid-column: span 2; }
.crf-panel--flow > .crf-split { display: grid; grid-template-rows: subgrid; }
.crf-panel--flow > .crf-break { grid-row: span 1; }
.crf-head,
.crf-body { min-width: 0; }
/* The head keeps its own bottom margin, so the answer adds none (it used to collapse into the label's). */
.crf-head:not(:empty) + .crf-body > :first-child { margin-top: 0; }
.crf-break { height: 0; margin: 0; }
@media (max-width: 749px) {
  .crf-panel--flow > .crf-w-half,
  .crf-panel--flow > .crf-w-third { grid-column: span 6; }
}
.crf-ctl { margin: 0 0 22px; }
.crf-ctl--heading { margin-bottom: 20px; }
.crf-ctl--divider { margin: 8px 0 26px; }
.crf-divider { margin: 0; border: 0; border-top: 1px solid var(--crf-text); opacity: 0.85; }

.crf-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: var(--FONT-WEIGHT-BODY-BOLD, 500); line-height: 1.4; }
.crf-req { color: var(--crf-muted); font-weight: 400; }
.crf-help { display: block; margin: -2px 0 8px; font-size: 13px; line-height: 1.4; color: var(--crf-muted); }

.crf-input,
.crf-ns {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--crf-radius);
  background: var(--crf-field);
  color: var(--crf-text);
  font-family: var(--crf-font);
  font-size: 16px;
  line-height: 1.3;
  box-shadow: none;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.crf-input::placeholder { color: rgba(0, 0, 0, 0.45); opacity: 1; }
.crf-input:focus,
.crf-ns:focus,
.crf-ns.is-open { border-color: var(--crf-text); background: #fff; }
.crf-textarea { min-height: 120px; resize: vertical; }
.crf-select {
  padding-right: 40px;
  background-image: var(--ICON-SELECT, none);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  cursor: pointer;
}
.crf-select.is-empty { color: rgba(0, 0, 0, 0.45); }
.crf-select option { color: var(--crf-text); }

.crf-ctl.has-error .crf-input,
.crf-ctl.has-error .crf-ns { border-color: var(--crf-error); }
.crf-msg { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--crf-error); }
.crf-msg:empty { display: none; }

/* Radio and checkbox: our own marks over hidden native inputs, which still take the keyboard. */
.crf-choices { display: grid; row-gap: 10px; margin-top: 4px; }
.crf-choice { position: relative; display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.35; cursor: pointer; }
.crf-choice__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.crf-choice__mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 0;
  border: 1.5px solid var(--crf-text);
  background: #fff;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.crf-choice__input[type="radio"] + .crf-choice__mark { border-radius: 50%; }
.crf-choice__input[type="radio"]:checked + .crf-choice__mark { box-shadow: inset 0 0 0 4px #fff; background: var(--crf-text); }
.crf-choice__input[type="checkbox"] + .crf-choice__mark { border-radius: 2px; }
.crf-choice__input[type="checkbox"]:checked + .crf-choice__mark {
  background: var(--crf-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.crf-choice__input:focus-visible + .crf-choice__mark { outline: 2px solid var(--crf-text); outline-offset: 2px; }
.crf-ctl.has-error .crf-choice__mark { border-color: var(--crf-error); }
.crf-other { margin-top: 10px; }
.crf-ctl--accept .crf-help--above { margin: 0 0 10px; }

/* Choices side by side, as many to a line as the question says; at most two on a phone. */
.crf-choices--per-2,
.crf-choices--per-3,
.crf-choices--per-4,
.crf-choices--per-5 { column-gap: 16px; }
.crf-choices--per-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crf-choices--per-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crf-choices--per-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crf-choices--per-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 749px) {
  .crf-choices--per-3,
  .crf-choices--per-4,
  .crf-choices--per-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Picture choices: a card per choice, the picture above its mark and words. Four to a line, two on a phone. */
.crf-choices--pictures { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 749px) {
  .crf-choices--pictures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.crf-choice--picture {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--crf-line);
  border-radius: var(--crf-radius);
  background: #fff;
  transition: border-color 0.15s ease;
}
.crf-choice--picture:hover,
.crf-choice--picture.is-checked { border-color: var(--crf-text); }
.crf-choice__img { display: block; width: 100%; height: 140px; object-fit: contain; }
.crf-choice__line { display: flex; align-items: flex-start; gap: 10px; }
.crf-ctl.has-error .crf-choice--picture { border-color: var(--crf-error-border); }
@media (max-width: 749px) {
  .crf-choice__img { height: 110px; }
}

/* A file question: a dashed box to choose or drop files, then each file with its bar and an X. */
.crf-drop__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.crf-drop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 18px;
  border: 1.5px dashed var(--crf-line);
  border-radius: var(--crf-radius);
  background: var(--crf-field);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.crf-drop:hover,
.crf-drop.is-over { border-color: var(--crf-text); background: #fff; }
.crf-drop__input:focus-visible + .crf-drop { outline: 2px solid var(--crf-text); outline-offset: 2px; }
.crf-drop__button { pointer-events: none; }
.crf-drop__hint { font-size: 14px; color: var(--crf-muted); }
/* A phone cannot drag a file in, so it is only offered where a mouse can. */
@media (hover: none) {
  .crf-drop__hint--drag { display: none; }
}
.crf-drop__input:disabled + .crf-drop { cursor: default; }
.crf-drop__limits { margin: 8px 0 0; }
.crf-ctl.has-error .crf-drop { border-color: var(--crf-error); }
.crf-files { display: grid; row-gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.crf-files:empty { display: none; }
.crf-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  align-items: center;
  column-gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--crf-line);
  border-radius: var(--crf-radius);
  font-size: 14px;
  line-height: 1.35;
}
.crf-file__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: var(--FONT-WEIGHT-BODY-BOLD, 500); }
.crf-file__status { font-size: 13px; color: var(--crf-muted); white-space: nowrap; }
.crf-file__remove {
  grid-column: 3;
  grid-row: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--crf-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.crf-file__remove:focus-visible { outline: 2px solid var(--crf-text); outline-offset: 1px; }
.crf-file__track { grid-column: 1 / -1; height: 3px; margin-top: 8px; background: var(--crf-line); }
.crf-file__bar { display: block; height: 100%; width: 0; background: var(--crf-text); transition: width 0.2s ease; }
.crf-file.is-done .crf-file__track { display: none; }
.crf-file.is-failed { border-color: var(--crf-error-border); background: var(--crf-error-bg); }
.crf-file.is-failed .crf-file__status { grid-column: 1 / -2; grid-row: 2; margin-top: 4px; white-space: normal; color: var(--crf-error); }
.crf-file.is-failed .crf-file__track { display: none; }

/* Fixed words from the form itself: plain text (a release's terms, a list of links) and the older
   HTML text (the tax forms note). A line break between HTML paragraphs is spacing the paragraphs
   already have; one inside a paragraph still breaks the line. */
.crf-html,
.crf-text { font-size: 15px; line-height: 1.5; }
.crf-html p,
.crf-text p { margin: 0 0 6px; }
.crf-html p + p,
.crf-text p + p { margin-top: 10px; }
.crf-html > br { display: none; }
.crf-html ul,
.crf-html ol,
.crf-text ul { margin: 0 0 10px; padding-left: 22px; }
.crf-html li,
.crf-text li { margin: 0 0 2px; }
.crf-html img { display: block; max-width: 100%; height: auto; }
.crf-html a,
.crf-text a { color: var(--crf-text); text-decoration: underline; text-underline-offset: 3px; }
.crf-text > :last-child { margin-bottom: 0; }
/* A text block's Shaded box: the gray box the form app drew around a release's terms. */
.crf-text--shaded { padding: 20px 24px; border-radius: 4px; background: #f4f4f4; line-height: 1.6; }
@media (max-width: 749px) {
  .crf-text--shaded { padding: 16px; }
}
/* The line of smaller words under a heading. */
.crf-heading-note { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--crf-muted); }
/* A picture block: as wide as the form allows, never wider than it was set. */
.crf-image__img { display: block; width: 100%; height: auto; }

/* The searchable select (country). */
.crf-ns { position: relative; padding-right: 40px; cursor: pointer; user-select: none; }
.crf-ns::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.crf-ns.is-open::after { transform: rotate(-135deg); margin-top: -2px; }
.crf-ns.is-empty .crf-ns__current { color: rgba(0, 0, 0, 0.45); }
.crf-ns__current { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.crf-ns__drop {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: -1px;
  right: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.12);
  cursor: default;
}
.crf-ns.is-open .crf-ns__drop { display: block; }
.crf-ns__search-box { padding: 8px; }
.crf-ns__search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--crf-radius);
  font: inherit;
  font-size: 16px;
  outline: none;
}
.crf-ns__search:focus { border-color: var(--crf-text); }
.crf-ns__list { max-height: 240px; margin: 0; padding: 0 0 6px; overflow-y: auto; list-style: none; }
.crf-ns__option { padding: 9px 16px; font-size: 15px; cursor: pointer; }
.crf-ns__option:hover,
.crf-ns__option.is-focus { background: var(--crf-field); }
.crf-ns__option.is-selected { font-weight: var(--FONT-WEIGHT-BODY-BOLD, 500); }

/* Address suggestions under a street box. */
.crf-ctl { position: relative; }
.crf-ac {
  position: absolute;
  z-index: 25;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.12);
}
.crf-ac__item { padding: 10px 14px; font-size: 15px; line-height: 1.35; cursor: pointer; }
.crf-ac__item:hover,
.crf-ac__item.is-focus { background: var(--crf-field); }
.crf-ac__main { font-weight: var(--FONT-WEIGHT-BODY-BOLD, 500); }
.crf-ac__secondary { margin-left: 6px; color: var(--crf-muted); font-size: 14px; }
.crf-ac__by { padding: 6px 14px 8px; text-align: right; font-size: 11px; color: var(--crf-muted); }

/* Phone: intl-tel-input fills the row like any other box. */
.crf-phone .crfi { display: block; width: 100%; }
.crf-phone .crfi__country-container { padding: 1px; }
.crf-phone .crfi__selected-country { background: transparent; }
.crf-ctl.has-error .crf-phone .crf-input { border-color: var(--crf-error); }
/* .crf-iti is on the phone box and on the full screen country list, which mounts on body. */
.crfi.crf-iti { --iti-path-flags-1x: url("flags.png"); --iti-path-flags-2x: url("flags-2x.png"); }
/* Above the theme's sticky header and drawers. */
.crfi.crf-iti.crfi--fullscreen-popup { z-index: 2147483646; }
.crf-iti .crfi__dropdown-content { font-family: var(--crf-font, var(--FONT-STACK-BODY, Inter, sans-serif)); font-size: 15px; }

/* Buttons: the theme's. Inter 500, 12px, uppercase, wide letter spacing, square corners. */
.crf-footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.crf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  margin: 0;
  padding: var(--btn-top, 12px) var(--btn-left, 21.6px);
  border: 1px solid var(--crf-btn-bg);
  border-radius: var(--crf-radius);
  font-family: var(--BTN-FONT-STACK, var(--crf-font));
  font-size: var(--BTN-FONT-SIZE, 12px);
  font-weight: var(--BTN-FONT-WEIGHT, 500);
  line-height: 1.375;
  letter-spacing: var(--BTN-LETTER-SPACING, 0.1em);
  text-transform: var(--BTN-UPPERCASE, uppercase);
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.crf-btn--solid { background: var(--crf-btn-bg); color: var(--crf-btn-text); }
.crf-btn--solid:hover { opacity: 0.85; }
.crf-btn--outline { background: transparent; color: var(--crf-btn-bg); }
.crf-btn--outline:hover { background: var(--crf-btn-bg); color: var(--crf-btn-text); }
.crf-btn:focus-visible { outline: 2px solid var(--crf-text); outline-offset: 2px; }
.crf-btn[disabled] { opacity: 0.6; cursor: wait; }
@media (max-width: 749px) {
  .crf-btn { flex: 1 1 0; }
}

.crf-turnstile:empty { display: none; }
.crf-turnstile { margin: 4px 0 18px; }
.crf-form-error {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--crf-error-border);
  background: var(--crf-error-bg);
  color: var(--crf-error);
  font-size: 14px;
}
.crf-success { padding: 8px 0; font-size: 16px; line-height: 1.5; }
/* In place of a form for signed-in customers with a company (gate.ts). */
.crf-gate { margin: 0 0 18px; font-size: 16px; line-height: 1.5; }
a.crf-btn { text-decoration: none; }
/* Signed out on a form that requires sign-in (form-view.ts): Sign in on top, the whole form under it, grayed out and shut. */
.crf-signin { margin: 0 0 24px; }
.crf-signin .crf-gate { margin-bottom: 12px; }
.crf-form--locked { opacity: 0.5; }
.crf-form--locked .crf-panel + .crf-panel { margin-top: 24px; }

/* The box people never see, there to catch scripts. Off screen, not display:none (some bots skip those). */
.crf-hp-wrap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* intl-tel-input 29.5.3 (MIT) */
:root{--iti-flag-width: 20px;--iti-flag-count: 244}.crfi__ac{--iti-flag-offset: 0}.crfi__ad{--iti-flag-offset: -1}.crfi__ae{--iti-flag-offset: -2}.crfi__af{--iti-flag-offset: -3}.crfi__ag{--iti-flag-offset: -4}.crfi__ai{--iti-flag-offset: -5}.crfi__al{--iti-flag-offset: -6}.crfi__am{--iti-flag-offset: -7}.crfi__ao{--iti-flag-offset: -8}.crfi__ar{--iti-flag-offset: -9}.crfi__as{--iti-flag-offset: -10}.crfi__at{--iti-flag-offset: -11}.crfi__au{--iti-flag-offset: -12}.crfi__aw{--iti-flag-offset: -13}.crfi__ax{--iti-flag-offset: -14}.crfi__az{--iti-flag-offset: -15}.crfi__ba{--iti-flag-offset: -16}.crfi__bb{--iti-flag-offset: -17}.crfi__bd{--iti-flag-offset: -18}.crfi__be{--iti-flag-offset: -19}.crfi__bf{--iti-flag-offset: -20}.crfi__bg{--iti-flag-offset: -21}.crfi__bh{--iti-flag-offset: -22}.crfi__bi{--iti-flag-offset: -23}.crfi__bj{--iti-flag-offset: -24}.crfi__bl{--iti-flag-offset: -25}.crfi__bm{--iti-flag-offset: -26}.crfi__bn{--iti-flag-offset: -27}.crfi__bo{--iti-flag-offset: -28}.crfi__bq{--iti-flag-offset: -29}.crfi__br{--iti-flag-offset: -30}.crfi__bs{--iti-flag-offset: -31}.crfi__bt{--iti-flag-offset: -32}.crfi__bw{--iti-flag-offset: -33}.crfi__by{--iti-flag-offset: -34}.crfi__bz{--iti-flag-offset: -35}.crfi__ca{--iti-flag-offset: -36}.crfi__cc{--iti-flag-offset: -37}.crfi__cd{--iti-flag-offset: -38}.crfi__cf{--iti-flag-offset: -39}.crfi__cg{--iti-flag-offset: -40}.crfi__ch{--iti-flag-offset: -41}.crfi__ci{--iti-flag-offset: -42}.crfi__ck{--iti-flag-offset: -43}.crfi__cl{--iti-flag-offset: -44}.crfi__cm{--iti-flag-offset: -45}.crfi__cn{--iti-flag-offset: -46}.crfi__co{--iti-flag-offset: -47}.crfi__cr{--iti-flag-offset: -48}.crfi__cu{--iti-flag-offset: -49}.crfi__cv{--iti-flag-offset: -50}.crfi__cw{--iti-flag-offset: -51}.crfi__cx{--iti-flag-offset: -52}.crfi__cy{--iti-flag-offset: -53}.crfi__cz{--iti-flag-offset: -54}.crfi__de{--iti-flag-offset: -55}.crfi__dj{--iti-flag-offset: -56}.crfi__dk{--iti-flag-offset: -57}.crfi__dm{--iti-flag-offset: -58}.crfi__do{--iti-flag-offset: -59}.crfi__dz{--iti-flag-offset: -60}.crfi__ec{--iti-flag-offset: -61}.crfi__ee{--iti-flag-offset: -62}.crfi__eg{--iti-flag-offset: -63}.crfi__eh{--iti-flag-offset: -64}.crfi__er{--iti-flag-offset: -65}.crfi__es{--iti-flag-offset: -66}.crfi__et{--iti-flag-offset: -67}.crfi__fi{--iti-flag-offset: -68}.crfi__fj{--iti-flag-offset: -69}.crfi__fk{--iti-flag-offset: -70}.crfi__fm{--iti-flag-offset: -71}.crfi__fo{--iti-flag-offset: -72}.crfi__fr{--iti-flag-offset: -73}.crfi__ga{--iti-flag-offset: -74}.crfi__gb{--iti-flag-offset: -75}.crfi__gd{--iti-flag-offset: -76}.crfi__ge{--iti-flag-offset: -77}.crfi__gf{--iti-flag-offset: -78}.crfi__gg{--iti-flag-offset: -79}.crfi__gh{--iti-flag-offset: -80}.crfi__gi{--iti-flag-offset: -81}.crfi__gl{--iti-flag-offset: -82}.crfi__gm{--iti-flag-offset: -83}.crfi__gn{--iti-flag-offset: -84}.crfi__gp{--iti-flag-offset: -85}.crfi__gq{--iti-flag-offset: -86}.crfi__gr{--iti-flag-offset: -87}.crfi__gt{--iti-flag-offset: -88}.crfi__gu{--iti-flag-offset: -89}.crfi__gw{--iti-flag-offset: -90}.crfi__gy{--iti-flag-offset: -91}.crfi__hk{--iti-flag-offset: -92}.crfi__hn{--iti-flag-offset: -93}.crfi__hr{--iti-flag-offset: -94}.crfi__ht{--iti-flag-offset: -95}.crfi__hu{--iti-flag-offset: -96}.crfi__id{--iti-flag-offset: -97}.crfi__ie{--iti-flag-offset: -98}.crfi__il{--iti-flag-offset: -99}.crfi__im{--iti-flag-offset: -100}.crfi__in{--iti-flag-offset: -101}.crfi__io{--iti-flag-offset: -102}.crfi__iq{--iti-flag-offset: -103}.crfi__ir{--iti-flag-offset: -104}.crfi__is{--iti-flag-offset: -105}.crfi__it{--iti-flag-offset: -106}.crfi__je{--iti-flag-offset: -107}.crfi__jm{--iti-flag-offset: -108}.crfi__jo{--iti-flag-offset: -109}.crfi__jp{--iti-flag-offset: -110}.crfi__ke{--iti-flag-offset: -111}.crfi__kg{--iti-flag-offset: -112}.crfi__kh{--iti-flag-offset: -113}.crfi__ki{--iti-flag-offset: -114}.crfi__km{--iti-flag-offset: -115}.crfi__kn{--iti-flag-offset: -116}.crfi__kp{--iti-flag-offset: -117}.crfi__kr{--iti-flag-offset: -118}.crfi__kw{--iti-flag-offset: -119}.crfi__ky{--iti-flag-offset: -120}.crfi__kz{--iti-flag-offset: -121}.crfi__la{--iti-flag-offset: -122}.crfi__lb{--iti-flag-offset: -123}.crfi__lc{--iti-flag-offset: -124}.crfi__li{--iti-flag-offset: -125}.crfi__lk{--iti-flag-offset: -126}.crfi__lr{--iti-flag-offset: -127}.crfi__ls{--iti-flag-offset: -128}.crfi__lt{--iti-flag-offset: -129}.crfi__lu{--iti-flag-offset: -130}.crfi__lv{--iti-flag-offset: -131}.crfi__ly{--iti-flag-offset: -132}.crfi__ma{--iti-flag-offset: -133}.crfi__mc{--iti-flag-offset: -134}.crfi__md{--iti-flag-offset: -135}.crfi__me{--iti-flag-offset: -136}.crfi__mf{--iti-flag-offset: -137}.crfi__mg{--iti-flag-offset: -138}.crfi__mh{--iti-flag-offset: -139}.crfi__mk{--iti-flag-offset: -140}.crfi__ml{--iti-flag-offset: -141}.crfi__mm{--iti-flag-offset: -142}.crfi__mn{--iti-flag-offset: -143}.crfi__mo{--iti-flag-offset: -144}.crfi__mp{--iti-flag-offset: -145}.crfi__mq{--iti-flag-offset: -146}.crfi__mr{--iti-flag-offset: -147}.crfi__ms{--iti-flag-offset: -148}.crfi__mt{--iti-flag-offset: -149}.crfi__mu{--iti-flag-offset: -150}.crfi__mv{--iti-flag-offset: -151}.crfi__mw{--iti-flag-offset: -152}.crfi__mx{--iti-flag-offset: -153}.crfi__my{--iti-flag-offset: -154}.crfi__mz{--iti-flag-offset: -155}.crfi__na{--iti-flag-offset: -156}.crfi__nc{--iti-flag-offset: -157}.crfi__ne{--iti-flag-offset: -158}.crfi__nf{--iti-flag-offset: -159}.crfi__ng{--iti-flag-offset: -160}.crfi__ni{--iti-flag-offset: -161}.crfi__nl{--iti-flag-offset: -162}.crfi__no{--iti-flag-offset: -163}.crfi__np{--iti-flag-offset: -164}.crfi__nr{--iti-flag-offset: -165}.crfi__nu{--iti-flag-offset: -166}.crfi__nz{--iti-flag-offset: -167}.crfi__om{--iti-flag-offset: -168}.crfi__pa{--iti-flag-offset: -169}.crfi__pe{--iti-flag-offset: -170}.crfi__pf{--iti-flag-offset: -171}.crfi__pg{--iti-flag-offset: -172}.crfi__ph{--iti-flag-offset: -173}.crfi__pk{--iti-flag-offset: -174}.crfi__pl{--iti-flag-offset: -175}.crfi__pm{--iti-flag-offset: -176}.crfi__pr{--iti-flag-offset: -177}.crfi__ps{--iti-flag-offset: -178}.crfi__pt{--iti-flag-offset: -179}.crfi__pw{--iti-flag-offset: -180}.crfi__py{--iti-flag-offset: -181}.crfi__qa{--iti-flag-offset: -182}.crfi__re{--iti-flag-offset: -183}.crfi__ro{--iti-flag-offset: -184}.crfi__rs{--iti-flag-offset: -185}.crfi__ru{--iti-flag-offset: -186}.crfi__rw{--iti-flag-offset: -187}.crfi__sa{--iti-flag-offset: -188}.crfi__sb{--iti-flag-offset: -189}.crfi__sc{--iti-flag-offset: -190}.crfi__sd{--iti-flag-offset: -191}.crfi__se{--iti-flag-offset: -192}.crfi__sg{--iti-flag-offset: -193}.crfi__sh{--iti-flag-offset: -194}.crfi__si{--iti-flag-offset: -195}.crfi__sj{--iti-flag-offset: -196}.crfi__sk{--iti-flag-offset: -197}.crfi__sl{--iti-flag-offset: -198}.crfi__sm{--iti-flag-offset: -199}.crfi__sn{--iti-flag-offset: -200}.crfi__so{--iti-flag-offset: -201}.crfi__sr{--iti-flag-offset: -202}.crfi__ss{--iti-flag-offset: -203}.crfi__st{--iti-flag-offset: -204}.crfi__sv{--iti-flag-offset: -205}.crfi__sx{--iti-flag-offset: -206}.crfi__sy{--iti-flag-offset: -207}.crfi__sz{--iti-flag-offset: -208}.crfi__tc{--iti-flag-offset: -209}.crfi__td{--iti-flag-offset: -210}.crfi__tg{--iti-flag-offset: -211}.crfi__th{--iti-flag-offset: -212}.crfi__tj{--iti-flag-offset: -213}.crfi__tk{--iti-flag-offset: -214}.crfi__tl{--iti-flag-offset: -215}.crfi__tm{--iti-flag-offset: -216}.crfi__tn{--iti-flag-offset: -217}.crfi__to{--iti-flag-offset: -218}.crfi__tr{--iti-flag-offset: -219}.crfi__tt{--iti-flag-offset: -220}.crfi__tv{--iti-flag-offset: -221}.crfi__tw{--iti-flag-offset: -222}.crfi__tz{--iti-flag-offset: -223}.crfi__ua{--iti-flag-offset: -224}.crfi__ug{--iti-flag-offset: -225}.crfi__us{--iti-flag-offset: -226}.crfi__uy{--iti-flag-offset: -227}.crfi__uz{--iti-flag-offset: -228}.crfi__va{--iti-flag-offset: -229}.crfi__vc{--iti-flag-offset: -230}.crfi__ve{--iti-flag-offset: -231}.crfi__vg{--iti-flag-offset: -232}.crfi__vi{--iti-flag-offset: -233}.crfi__vn{--iti-flag-offset: -234}.crfi__vu{--iti-flag-offset: -235}.crfi__wf{--iti-flag-offset: -236}.crfi__ws{--iti-flag-offset: -237}.crfi__xk{--iti-flag-offset: -238}.crfi__ye{--iti-flag-offset: -239}.crfi__yt{--iti-flag-offset: -240}.crfi__za{--iti-flag-offset: -241}.crfi__zm{--iti-flag-offset: -242}.crfi__zw{--iti-flag-offset: -243}:root{--iti-hover-color: rgba(0, 0, 0, .05);--iti-border-color: #ccc;--iti-country-selector-bg: white;--iti-icon-color: #555;--iti-spacer-horizontal: 10px;--iti-flag-height: calc(var(--iti-flag-width) * 3 / 4);--iti-globe-icon-size: 17px;--iti-clear-icon-size: 15px;--iti-close-icon-size: 20px;--iti-border-width: 1px;--iti-arrow-size: 5px;--iti-arrow-width: 1.5px;--iti-arrow-padding: 7px;--iti-mobile-popup-margin: 44px;--iti-strict-reject-flash-color: rgba(255, 0, 0, .12)}.crfi{position:relative;display:inline-block}.crfi *{box-sizing:border-box}.crfi input.crfi__tel-input,.crfi input.crfi__tel-input[type=text],.crfi input.crfi__tel-input[type=tel]{position:relative;z-index:0;display:block;min-width:100%;margin:0!important}.crfi__a11y-text{width:1px;height:1px;clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute}.crfi__country-container{position:absolute;top:0;bottom:0;left:0;padding:var(--iti-border-width)}.crfi__selected-country{z-index:1;position:relative;display:flex;align-items:center;height:100%;background:none;border:0;margin:0;padding:0;font-family:inherit;font-size:inherit;color:inherit;border-radius:0;font-weight:inherit;line-height:inherit;text-decoration:none}.crfi__selected-country-primary{display:flex;align-items:center;height:100%;padding:0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal)}.crfi__selected-dial-code{margin-left:4px}.crfi__arrow{margin-left:var(--iti-arrow-padding);margin-top:-2px;width:var(--iti-arrow-size);height:var(--iti-arrow-size);box-sizing:border-box;border-right:var(--iti-arrow-width) solid var(--iti-icon-color);border-bottom:var(--iti-arrow-width) solid var(--iti-icon-color);transform:rotate(45deg)}.crfi__arrow--up{margin-top:4px;transform:rotate(-135deg)}.crfi__country-selector{border-radius:3px;background-color:var(--iti-country-selector-bg)}.crfi--inline-country-selector .crfi__country-selector{border:var(--iti-border-width) solid var(--iti-border-color);box-shadow:1px 1px 4px #0003}.crfi--inline-country-selector:not(.crfi--detached-country-selector) .crfi__country-selector{position:absolute;z-index:2;left:0}.crfi__search-input{width:100%;border-width:0;border-radius:3px;padding-left:calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));padding-right:calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal))}[dir=rtl] .crfi__search-input{padding-left:inherit;padding-right:30px;background-position:right 8px center}.crfi__search-input::-webkit-search-cancel-button{appearance:none}.crfi__search-input,.crfi__country{padding-top:8px;padding-bottom:8px}.crfi__search-input-wrapper{position:relative;display:flex;align-items:center;border-bottom:1px solid var(--iti-border-color)}.crfi__search-icon{position:absolute;left:var(--iti-spacer-horizontal);display:flex;pointer-events:none}[dir=rtl] .crfi__search-icon{left:auto;right:var(--iti-spacer-horizontal)}.crfi__search-icon-svg{width:var(--iti-globe-icon-size);height:var(--iti-globe-icon-size);display:block;stroke:var(--iti-icon-color);fill:none;stroke-width:3}.crfi__search-clear{position:absolute;right:calc(var(--iti-spacer-horizontal) / 2);background:transparent;border:0;border-radius:3px;cursor:pointer;padding:calc(var(--iti-spacer-horizontal) / 2);display:flex;align-items:center;justify-content:center;transition:background-color .15s ease}.crfi__search-clear .crfi__search-clear-x{stroke-width:2}.crfi__search-clear .crfi__search-clear-bg{fill:var(--iti-icon-color)}[dir=rtl] .crfi__search-clear{right:auto;left:var(--iti-spacer-horizontal)}.crfi__search-clear:hover,.crfi__search-clear:focus-visible{background:var(--iti-hover-color);outline:none}.crfi__search-clear-svg{width:var(--iti-clear-icon-size);height:var(--iti-clear-icon-size);display:block}.crfi__no-results{text-align:center;padding:30px 0}.crfi__country-list{list-style:none;padding:0;margin:0;cursor:pointer;outline:none;overflow-y:scroll;-webkit-overflow-scrolling:touch}.crfi--inline-country-selector .crfi__country-list{max-height:185px}.crfi--flexible-dropdown-width .crfi__country-list{white-space:nowrap}@media(max-width:500px){.crfi--flexible-dropdown-width .crfi__country-list{white-space:normal}}.crfi__country{display:flex;align-items:center;padding-left:var(--iti-spacer-horizontal);padding-right:var(--iti-spacer-horizontal)}.crfi__country.crfi__highlight{background-color:var(--iti-hover-color)}.crfi__country-name{flex-grow:1}.crfi__country-check{margin-left:var(--iti-spacer-horizontal);display:flex;align-items:center;color:var(--iti-icon-color)}.crfi__country-check-svg{width:var(--iti-clear-icon-size);height:var(--iti-clear-icon-size);display:block}.crfi__country-list .crfi__flag{margin-right:var(--iti-spacer-horizontal);flex-shrink:0}[dir=rtl] :is(.crfi__country-list .crfi__flag){margin-right:0;margin-left:var(--iti-spacer-horizontal)}:is(.crfi--has-country-selector .crfi__country-container:has(+input[disabled]),.crfi--has-country-selector .crfi__country-container:has(+input[readonly])) button.crfi__selected-country{cursor:not-allowed}:is(.crfi--has-country-selector .crfi__country-container:has(+input[disabled]),.crfi--has-country-selector .crfi__country-container:has(+input[readonly])) button.crfi__selected-country .crfi__arrow{visibility:hidden}.crfi--has-country-selector .crfi__country-container:not(:has(+input[disabled])):not(:has(+input[readonly])) .crfi__selected-country-primary:hover,.crfi--has-country-selector .crfi__country-container:not(:has(+input[disabled])):not(:has(+input[readonly])) .crfi__selected-country[aria-expanded=true] .crfi__selected-country-primary{background-color:var(--iti-hover-color)}.crfi--detached-country-selector{position:fixed;top:-1000px;left:-1000px;z-index:1060}.crfi--detached-country-selector:hover{cursor:pointer}.crfi--detached-country-selector{top:calc(anchor(bottom) + 3px);left:anchor(left);position-try-fallbacks:--iti-flip-above}@position-try --iti-flip-above{top:auto;bottom:calc(anchor(top) + 3px)}.crfi__hide{display:none}.crfi__v-hide{visibility:hidden}.crfi--fullscreen-popup.crfi--detached-country-selector{background-color:#00000080;inset:0;position:fixed;padding:var(--iti-mobile-popup-margin);padding-bottom:calc(var(--iti-mobile-popup-margin) + var(--iti-virtual-keyboard-height, 0px));display:flex;flex-direction:column;justify-content:flex-start}.crfi--fullscreen-popup .crfi__country-selector{display:flex;flex-direction:column;max-height:100%;position:relative}.crfi--fullscreen-popup .crfi__close-button{position:absolute;bottom:100%;right:calc(-1 * var(--iti-mobile-popup-margin));width:var(--iti-mobile-popup-margin);height:var(--iti-mobile-popup-margin);padding:0;background:transparent;border:0;border-radius:3px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}[dir=rtl] :is(.crfi--fullscreen-popup .crfi__close-button){right:auto;left:calc(-1 * var(--iti-mobile-popup-margin))}.crfi--fullscreen-popup .crfi__close-button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.crfi--fullscreen-popup .crfi__close-button-svg{width:var(--iti-close-icon-size);height:var(--iti-close-icon-size);display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}.crfi--fullscreen-popup .crfi__country,.crfi--fullscreen-popup .crfi__search-input{padding-top:10px;padding-bottom:10px}.crfi--fullscreen-popup .crfi__search-input{font-size:max(16px,1em)}.crfi--fullscreen-popup .crfi__country{padding-left:10px;padding-right:10px;line-height:1.5em}.crfi__flag{height:var(--iti-flag-height);width:var(--iti-flag-width);border-radius:1px;box-shadow:0 0 1px #888;background-image:image-set(var(--iti-path-flags-1x) 1x,var(--iti-path-flags-2x) 2x);background-repeat:no-repeat;background-position:calc(var(--iti-flag-offset, 100) * var(--iti-flag-width)) 0;background-size:calc(var(--iti-flag-count) * var(--iti-flag-width)) var(--iti-flag-height)}.crfi__loading{position:relative;background:none;box-shadow:none}.crfi__loading:after{content:"";position:absolute;inset:0;margin:auto;width:var(--iti-flag-height);height:var(--iti-flag-height);box-sizing:border-box;border:2px solid var(--iti-icon-color);border-right-color:transparent;border-radius:50%;animation:iti-spinner 1s linear infinite}@keyframes iti-spinner{to{transform:rotate(360deg)}}.crfi__strict-reject-animation .crfi__tel-input,.crfi__strict-reject-animation .crfi__selected-country{animation:iti-strict-reject-shake .3s cubic-bezier(.36,.07,.19,.97)}@media(prefers-reduced-motion:reduce){.crfi__strict-reject-animation .crfi__tel-input{animation:iti-strict-reject-flash .3s ease-out both}.crfi__strict-reject-animation .crfi__selected-country{animation:none}}@keyframes iti-strict-reject-shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-3px)}40%,60%{transform:translate(3px)}}@keyframes iti-strict-reject-flash{40%{background-color:var(--iti-strict-reject-flash-color)}}.crfi__globe{background:none;box-shadow:none;height:var(--iti-globe-icon-size);display:flex;align-items:center;justify-content:center;padding:0}.crfi__globe .crfi__globe-svg{width:100%;height:100%;fill:var(--iti-icon-color)}@supports (-webkit-appearance: none) and (not (background: -webkit-canvas(foo))){.crfi__tel-input:focus{outline-offset:1px}}

/*
 * Our form embedded on another site, after crnr-forms.css, for the snippet's <div class="crf-embed">
 * (form-embed.ts). Built into public/forms-embed/crnr-forms.css (and the builder's preview); the storefront never
 * loads it. Its intl-tel-input class names are renamed at build as the storefront's are (iti-rename.ts).
 *
 * Undefeated Prints' look, read from its live project-requests page (2026-11-06): a charcoal page, white heavy
 * uppercase labels in Archivo Black, Archivo text, the orange pill button (#f05323). The page loads both fonts.
 *
 * Vinny's pick 11/06 ("look 3"): the form in a dark box a shade lighter than the page, the way Combat Corner's
 * form sits in its card, and soft dark answer boxes, not near-white ones ("with the background being so dark, and
 * the fields being so white, it's kind of harsh on the eyes"). Typing in a box gives it an orange edge.
 */

.crf-embed {
  --FONT-STACK-BODY: Archivo, "Helvetica Neue", Arial, sans-serif;
  --FONT-STACK-HEADING: "Archivo Black", Archivo, "Helvetica Neue", Arial, sans-serif;
  --COLOR-TEXT: #fff;
  --COLOR-TEXT-LIGHT: rgba(255, 255, 255, 0.75);
  --COLOR-BG: #2e3135;
  --COLOR-BG-BRIGHTER: #3a3d43;
  --COLOR-ERROR: #ffb4a8;
  --COLOR-ERROR-BG: rgba(255, 120, 100, 0.12);
  --COLOR-ERROR-BORDER: rgba(255, 180, 168, 0.5);
  --BTN-PRIMARY-BG: #f05323;
  --BTN-PRIMARY-TEXT: #fff;
  --RADIUS: 10px;
  --crf-line: #50555c;
  --crf-embed-ink: #eef0f2;
  --crf-embed-faint: rgba(238, 240, 242, 0.45);
  --crf-embed-box: #3a3d43;
  --crf-embed-list: #33363b;
  --crf-embed-accent: #f05323;
  /* The phone's country list (intl-tel-input). */
  --iti-border-color: #50555c;
  --iti-hover-color: rgba(255, 255, 255, 0.08);
  --iti-icon-color: #c9cdd2;
  --iti-country-selector-bg: #33363b;
  --iti-dropdown-bg: #33363b;
}

/* The box around the form: a shade lighter than the page, rounded, with a deep shadow that shows on dark. */
.crf-embed .crf {
  margin: 0 auto;
  background: #2e3135;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.crf-embed .crf-inner { padding: 36px; }
@media (max-width: 749px) {
  .crf-embed .crf { margin: 0; }
  .crf-embed .crf-inner { padding: 24px 16px; }
}

.crf-embed .crf-label {
  font-family: var(--FONT-STACK-HEADING);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
.crf-embed .crf-req { color: var(--crf-embed-accent); }
.crf-embed .crf-help { font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.crf-embed .crf-divider { border-color: rgba(255, 255, 255, 0.2); }

/* The answer boxes: a shade lighter than the box around them, light words, an orange edge while typing. */
.crf-embed .crf-input,
.crf-embed .crf-ns {
  min-height: 40px;
  padding: 9px 14px;
  border-color: var(--crf-line);
  background-color: var(--crf-embed-box);
  color: var(--crf-embed-ink);
}
.crf-embed .crf-input::placeholder { color: var(--crf-embed-faint); }
.crf-embed .crf-select.is-empty,
.crf-embed .crf-ns.is-empty .crf-ns__current { color: var(--crf-embed-faint); }
.crf-embed .crf-input:focus,
.crf-embed .crf-ns:focus,
.crf-embed .crf-ns.is-open { border-color: var(--crf-embed-accent); background-color: var(--crf-embed-box); }
.crf-embed .crf-ctl.has-error .crf-input,
.crf-embed .crf-ctl.has-error .crf-ns { border-color: var(--COLOR-ERROR); }
.crf-embed .crf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23c9cdd2' stroke-width='1.6'/%3E%3C/svg%3E");
}
/* A native list opens in the browser's own colors on some systems: dark words there stay readable on its light. */
.crf-embed .crf-select option { color: #1f2933; background: #fff; }

/* The country list and the address suggestions, opened under their box. */
.crf-embed .crf-ns__drop,
.crf-embed .crf-ac {
  background: var(--crf-embed-list);
  color: var(--crf-embed-ink);
  box-shadow: 0 0 0 1px var(--crf-line), 0 8px 24px rgba(0, 0, 0, 0.45);
}
.crf-embed .crf-ns__search {
  border-color: var(--crf-line);
  background: var(--crf-embed-box);
  color: var(--crf-embed-ink);
}
.crf-embed .crf-ns__search:focus { border-color: var(--crf-embed-accent); }
.crf-embed .crf-ns__option:hover,
.crf-embed .crf-ns__option.is-focus,
.crf-embed .crf-ac__item:hover,
.crf-embed .crf-ac__item.is-focus { background: rgba(255, 255, 255, 0.08); }
.crf-embed .crf-ac__secondary,
.crf-embed .crf-ac__by { color: rgba(238, 240, 242, 0.65); }

/* The phone: its country list in the same dark, its search box like the others. */
.crf-embed .crfi__dropdown-content { background-color: var(--crf-embed-list); color: var(--crf-embed-ink); border-color: var(--crf-line); }
.crf-embed .crfi__search-input { background-color: var(--crf-embed-box); color: var(--crf-embed-ink); }
.crf-embed .crfi__dial-code { color: rgba(238, 240, 242, 0.6); }

/* Ticks and dots: dark like the boxes, orange when picked. */
.crf-embed .crf-choice { color: #fff; font-weight: 500; }
.crf-embed .crf-choice__mark { border-color: #8a9099; background-color: var(--crf-embed-box); }
.crf-embed .crf-choice__input[type="checkbox"]:checked + .crf-choice__mark { background-color: var(--crf-embed-accent); border-color: var(--crf-embed-accent); }
.crf-embed .crf-choice__input[type="radio"]:checked + .crf-choice__mark {
  background: var(--crf-embed-accent);
  border-color: var(--crf-embed-accent);
  box-shadow: inset 0 0 0 4px var(--crf-embed-box);
}
.crf-embed .crf-choice__input:focus-visible + .crf-choice__mark { outline-color: var(--crf-embed-accent); }

/* Ticks side by side, as many as fit: Archivo is wider than the store's font, and five to a half-width line ran
   "Hoodies" into the next box (the embed test page, 11/06). Two to a line on a phone, as on the store. */
.crf-embed .crf-choices--per-3,
.crf-embed .crf-choices--per-4,
.crf-embed .crf-choices--per-5 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 749px) {
  .crf-embed .crf-choices--per-3,
  .crf-embed .crf-choices--per-4,
  .crf-embed .crf-choices--per-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The artwork drop box and its files. */
.crf-embed .crf-drop { background: var(--crf-embed-box); border-color: #6b7078; color: #fff; }
.crf-embed .crf-drop:hover,
.crf-embed .crf-drop.is-over { background: #41454b; border-color: var(--crf-embed-accent); }
.crf-embed .crf-drop__hint { color: rgba(255, 255, 255, 0.75); }
.crf-embed .crf-file { color: var(--crf-embed-ink); border-color: var(--crf-line); }
.crf-embed .crf-file__track { background: var(--crf-line); }
.crf-embed .crf-file__bar { background: var(--crf-embed-accent); }

/* The orange pill button. */
.crf-embed .crf-btn { border-radius: 999px; font-family: var(--FONT-STACK-HEADING); font-size: 13px; letter-spacing: 0.02em; text-transform: none; }
.crf-embed .crf-btn--outline { color: #fff; border-color: #fff; }
.crf-embed .crf-btn:focus-visible { outline-color: var(--crf-embed-accent); }

/* "Powered by" and the CRNR logo at the bottom of the form, centered, under the buttons (Vinny 11/06: under Submit,
   then "a little bit bigger ... in the center of the form at the bottom"). The logo is the store's own file, never a
   copy ("You should just be using an actual file and resizing"): CRNR_Boxed_Logo_White.png, the white box with
   black letters he picked, from Shopify's CDN at 200 wide (its image service resizes it) and drawn 20 tall.
   The ::before starts a new line under the buttons; the ::after is the line, centered: the words, then the logo.
   The first `content` is for a browser that can't read the second's spoken form. */
.crf-embed .crf-footer::before { content: ""; order: 1; flex-basis: 100%; height: 0; }
.crf-embed .crf-footer::after {
  content: "Powered by";
  content: "Powered by" / "Powered by CRNR";
  order: 2;
  margin: 20px auto 0;
  padding-right: 68px;
  font-family: var(--FONT-STACK-BODY);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.65);
  background: no-repeat right center / auto 20px
    url("https://cdn.shopify.com/s/files/1/0719/2631/7110/files/CRNR_Boxed_Logo_White.png?width=200");
}

/* The thank-you keeps its lines (the list of what they'll be asked). */
.crf-embed .crf-success { white-space: pre-line; color: #fff; }