/* ==========================================================
   KODICA CARGA FÁCIL - MODO HAIR / FRONTEND
   ========================================================== */

body.kcf-hair-product form.variations_form table.variations,
body.kcf-hair-product form.variations_form .reset_variations{
  display:none!important;
}

body.kcf-hair-product .single_variation_wrap .woocommerce-variation-price{
  display:none!important;
}

body.kcf-hair-product .summary.entry-summary > .price,
body.kcf-hair-product .product-info > .price,
body.kcf-hair-product .product-info > .price-wrapper,
body.kcf-hair-product .summary.entry-summary > .price-wrapper{
  display:none;
}

.kcf-hair-selector{
  --kcf-hair-text:#1d1d1f;
  --kcf-hair-muted:#737373;
  --kcf-hair-border:#ddd;
  --kcf-hair-soft:#f7f7f7;
  margin:18px 0 22px;
  padding:18px 0 4px;
  border-top:1px solid #e7e7e7;
  color:var(--kcf-hair-text);
}

.kcf-hair-option-group{
  margin:0 0 20px;
}

.kcf-hair-option-label{
  display:flex;
  align-items:center;
  gap:5px;
  margin-bottom:10px;
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.08em;
}

.kcf-hair-current{
  font-weight:600;
  letter-spacing:0;
  color:var(--kcf-hair-muted);
  text-transform:none;
}

.kcf-hair-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.kcf-hair-swatch{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  width:34px;
  height:34px;
  margin:0;
  padding:0;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--kcf-tone);
  box-shadow:0 0 0 1px #cfcfcf;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}

.kcf-hair-swatch:hover,
.kcf-hair-swatch:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 0 0 2px #8d8d8d;
  outline:none;
}

.kcf-hair-swatch.is-active{
  box-shadow:0 0 0 2px #111;
}

.kcf-hair-swatch.is-disabled,
.kcf-hair-swatch:disabled{
  opacity:.3;
  cursor:not-allowed;
  filter:grayscale(.35);
}

.kcf-hair-tooltip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  transform:translate(-50%,4px);
  z-index:20;
  padding:5px 8px;
  border-radius:5px;
  background:#111;
  color:#fff;
  font-size:11px;
  font-weight:600;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.15s ease;
}

.kcf-hair-tooltip:after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:#111;
}

.kcf-hair-swatch:hover .kcf-hair-tooltip,
.kcf-hair-swatch:focus .kcf-hair-tooltip,
.kcf-hair-swatch:focus-visible .kcf-hair-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

.kcf-hair-buttons{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.kcf-hair-choice{
  appearance:none;
  -webkit-appearance:none;
  min-height:36px;
  padding:7px 12px;
  border:1px solid var(--kcf-hair-border);
  border-radius:7px;
  background:#fff;
  color:var(--kcf-hair-text);
  font:inherit;
  font-size:12px;
  font-weight:700;
  line-height:1.1;
  cursor:pointer;
  transition:.15s ease;
}

.kcf-hair-choice:hover,
.kcf-hair-choice:focus-visible{
  border-color:#777;
  outline:none;
}

.kcf-hair-choice.is-active{
  border-color:#111;
  background:#111;
  color:#fff;
}

.kcf-hair-choice.is-disabled,
.kcf-hair-choice:disabled{
  opacity:.3;
  cursor:not-allowed;
  text-decoration:line-through;
}

.kcf-hair-price-row{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding-top:4px;
  margin-top:2px;
}

.kcf-hair-price-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}

.kcf-hair-live-price{
  min-height:28px;
  font-size:24px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.02em;
}

.kcf-hair-live-price .price{
  margin:0!important;
  font-size:inherit!important;
  line-height:inherit!important;
}

.kcf-hair-live-price del{
  opacity:.5;
  font-size:.72em;
  margin-right:5px;
}

.kcf-hair-live-price ins{
  text-decoration:none;
}

body.kcf-hair-product .single_variation_wrap{
  margin-top:8px;
}

@media(max-width:549px){
  .kcf-hair-selector{
    margin-top:14px;
    padding-top:15px;
  }

  .kcf-hair-option-group{
    margin-bottom:18px;
  }

  .kcf-hair-swatch{
    width:36px;
    height:36px;
  }

  .kcf-hair-choice{
    min-height:38px;
    padding:8px 11px;
    font-size:12px;
  }

  .kcf-hair-live-price{
    font-size:22px;
  }
}