input, textarea, select {
  border-color: #d2d2d2;
}


._keyfocus *:focus,
input:not([disabled]):focus,
textarea:not([disabled]):focus,
select:not([disabled]):focus {
  --focusBoxShadow: 0 0 0 3px hsla(210, 96%, 45%, 25%), 0 1px 1px 0 rgba(0, 0, 0, 0.08);
  border-color: #0570de;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02), var(--focusBoxShadow);
}


input[type=radio]{
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  padding: 2px;
  background-clip: content-box;
  border: 2px solid #aaa;
  background-color: transparent;
}

input[type="radio"]:checked {
  background-color: var(--gray-blue-shadow);
  border: 2px solid var(--gray-blue-shadow);
}


.cart-summary .block .item-options .field .radio,
.table-checkout-shipping-method tbody td input[type='radio'] {
  margin-top: 3px;
}


select {
	appearance: none;
}


// Learn about this technique:
// @link https://moderncss.dev/pure-css-custom-checkbox-style/

:root {
  --form-control-color: rebeccapurple;
  --form-control-disabled: #959495;
}


input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: white;
  /* Not removed via appearance */
  /*margin: 0;*/
  top: 0;

  font: inherit;
  color: var(--gray-blue-shadow);
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid var(--gray-blue-shadow); 
  border-radius: 0.15em;
  transform: translateY(-0.075em);

  display: inline-grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  /*box-shadow: inset 1em 1em var(--form-control-color);*/
  background-color: hsl(205, 20%, 60%);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:disabled {
  --form-control-color: var(--form-control-disabled);

  color: var(--form-control-disabled);
  cursor: not-allowed;
}


.fieldset > .field.required > .label::after, .fieldset > .fields > .field.required > .label::after, .fieldset > .field._required > .label::after, .fieldset > .fields > .field._required > .label::after {
  color: var(--tio-lipstick) !important;
}


.field-error {
  color: var(--tio-lipstick) !important;
}

.field input.mage-error:not([disabled]),
.field._error ._keyfocus *,
.field._error input:not([disabled]),
.field._error textarea:not([disabled]),
.field._error select:not([disabled]) {
  border-color: var(--tio-lipstick);
}

.field input.mage-error:not([disabled]):focus,
.field._error ._keyfocus *:focus,
.field._error input:not([disabled]):focus,
.field._error textarea:not([disabled]):focus,
.field._error select:not([disabled]):focus {
  --focusBoxShadowError: 0 0 0 3px hsla(327, 89%, 48%, 25%), 0 1px 1px 0 rgba(0, 0, 0, 0.08);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02), var(--focusBoxShadowError);
  border-color: hsl(327, 70%, 80%);
}


#coupon_code {
  position: relative;
  z-index: 10;

  border-bottom-right-radius: 0 !important;
  border-top-right-radius:    0 !important;
}