/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
/*
 * HubSpot embedded form styling (form.hs-form.stacked, loaded via TwoColumn.html).
 * Matches orders__input-group tokens (border, border-radius, focus-visible outline)
 * for visual consistency between the form and the checkout summary alongside it.
 * Deliberately NOT in a cascade layer: HubSpot injects its own unlayered CSS at runtime
 * (e.g. fieldset max-width: 500px), which would beat any layered rule. The .hs-form.stacked
 * prefix gives higher specificity than HubSpot's selectors instead of !important.
 */
.hs-form.stacked fieldset {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 0;
  border: none;
}
@media (min-width: 640px) {
  .hs-form.stacked fieldset {
    flex-direction: row;
  }
}
.hs-form.stacked fieldset:has(input[type=hidden]):not(:has(input:not([type=hidden]), select, textarea)) {
  display: none;
}
.hs-form.stacked fieldset:last-of-type {
  margin-bottom: 0;
}
.hs-form.stacked .hs-form-field .input {
  margin: 0;
}
.hs-form.stacked .hs-form-field {
  flex: 1 1 auto;
  min-width: 100%;
}
@media (min-width: 640px) {
  .hs-form.stacked .hs-form-field {
    flex: 1 1 0;
    min-width: 0;
  }
}
.hs-form.stacked .hs-form-field {
  display: flex;
  flex-direction: column;
}
.hs-form.stacked label:not(.hs-form-checkbox-display):not(.hs-form-radio-display):not(.hs-form-booleancheckbox-display) {
  font-size: var(--font-size-s);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.hs-form.stacked .hs-input:not([type=checkbox]):not([type=radio]) {
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  height: 3rem;
  padding: 0 1.5rem;
  border: var(--border-default-width) solid var(--shade-grey-250);
  border-radius: var(--border-radius-button);
  font-family: inherit;
  font-size: var(--font-size-default);
  color: var(--body-text-color);
  background: var(--shade-white);
  transition: border-color var(--motion-base) var(--motion-ease);
}
.hs-form.stacked .hs-input:not([type=checkbox]):not([type=radio]):focus-visible {
  outline: var(--border-default-width) solid var(--color-primary-orange);
  outline-offset: var(--border-default-width);
  border-color: var(--color-primary-orange);
}
.hs-form.stacked textarea.hs-input:not([type=checkbox]):not([type=radio]) {
  display: block;
  height: 6rem;
  padding: 1.5rem;
  resize: vertical;
}
.hs-form.stacked select.hs-input:not([type=checkbox]):not([type=radio]) {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%23a2a2a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.5rem center;
  background-size: 1.5rem;
  padding-right: 4rem;
}
.hs-form.stacked .inputs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hs-form.stacked .inputs-list li {
  margin-bottom: var(--gap-s);
  padding: 0;
}
.hs-form.stacked .inputs-list li::before {
  content: normal;
}
.hs-form.stacked .hs-form-checkbox-display,
.hs-form.stacked .hs-form-radio-display,
.hs-form.stacked .hs-form-booleancheckbox-display {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}
.hs-form.stacked .hs-form-booleancheckbox-display > span {
  margin-left: 0;
}
.hs-form.stacked .hs-input[type=checkbox],
.hs-form.stacked .hs-input[type=radio] {
  appearance: none;
  flex: none;
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: var(--border-default-width) solid var(--shade-grey-250);
  border-radius: var(--border-radius-checkbox);
  background: var(--shade-white) center/0.875rem no-repeat;
  cursor: pointer;
  transition: background-color var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease);
}
.hs-form.stacked .hs-input[type=checkbox]:checked,
.hs-form.stacked .hs-input[type=radio]:checked {
  border-color: var(--color-primary-orange);
  background-color: var(--color-primary-orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hs-form.stacked .hs-input[type=checkbox]:focus-visible,
.hs-form.stacked .hs-input[type=radio]:focus-visible {
  outline: var(--border-default-width) solid var(--color-primary-orange);
  outline-offset: var(--border-default-width);
}
.hs-form.stacked .hs-input[type=radio] {
  border-radius: 50%;
}
.hs-form.stacked .hs-submit {
  margin-top: 3rem;
}
.hs-form.stacked .hs-button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 var(--padding-l);
  border: none;
  border-radius: var(--border-radius-button);
  background-color: var(--color-primary-orange);
  color: var(--shade-white);
  font-family: inherit;
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-button);
  cursor: pointer;
  transition: all var(--motion-base) var(--motion-ease);
}
.hs-form.stacked .hs-button.primary:hover {
  background-color: #d64102;
}
.hs-form.stacked .hs-button.primary:focus-visible {
  outline: var(--border-default-width) solid var(--color-primary-orange);
  outline-offset: 2px;
}
.hs-form.stacked .hs-error-msgs {
  list-style: none;
  margin: var(--gap-s) 0 0;
  padding: 0;
  color: var(--color-alert-red);
  font-size: var(--font-size-s);
}
.hs-form.stacked .hs-error-msgs li::before {
  content: normal;
}