/* Phase 1 hero icon integration: use the approved Repmation icon system. */
body.brand-v5 .builder .business-field::before{
  content:"";
  position:absolute;
  z-index:2;
  left:16px;
  top:50%;
  width:20px;
  height:20px;
  border:0;
  border-radius:0;
  background:#655D56;
  box-shadow:none;
  transform:translateY(-50%);
  -webkit-mask:url("/assets/icons/icon-business.svg") center/contain no-repeat;
  mask:url("/assets/icons/icon-business.svg") center/contain no-repeat;
  pointer-events:none;
}

body.brand-v5 .builder .business-field::after{
  content:none;
  display:none;
}

/* Make the entire brand-color field the native, tappable color swatch. */
body.brand-v5 .builder .color-control{
  position:relative;
  display:block;
  min-height:52px;
  padding:0;
  overflow:hidden;
  border:1px solid #C9BDB4;
  border-radius:10px;
  background:#FFFFFF;
}

body.brand-v5 .builder .color-control input[type="color"]{
  display:block;
  width:100%;
  min-height:52px;
  height:52px;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

body.brand-v5 .builder .color-control input[type="color"]::-webkit-color-swatch-wrapper{
  padding:0;
}

body.brand-v5 .builder .color-control input[type="color"]::-webkit-color-swatch{
  border:0;
  border-radius:9px;
}

body.brand-v5 .builder .color-control input[type="color"]::-moz-color-swatch{
  border:0;
  border-radius:9px;
}

body.brand-v5 .builder .color-control b{
  position:absolute;
  top:50%;
  left:50%;
  right:auto;
  z-index:1;
  min-width:94px;
  padding:7px 11px;
  border:1px solid rgba(23,21,19,.18);
  border-radius:8px;
  background:#FFFFFF;
  color:#171513;
  font:800 12px/1 Archivo,Arial,sans-serif;
  letter-spacing:.025em;
  text-align:center;
  text-shadow:none;
  filter:none;
  backdrop-filter:none;
  opacity:1;
  box-shadow:none;
  transform:translate(-50%,-50%);
  pointer-events:none;
}