/* ===== Strait Hat Company v0.8 — color visualization + artwork tools ===== */
.stage-v08 .hat-wrap{position:relative;isolation:isolate}
.stage-v08 #hatImage{position:relative;z-index:1}
.hat-color-overlay{
  position:absolute;
  z-index:2;
  inset:12% 13% 15% 13%;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:0;
  border-radius:42% 42% 30% 30%;
  transition:background .18s ease,opacity .18s ease;
}
.stage-v08 .artwork-overlay{z-index:3}

.color-preview-row{
  display:flex;align-items:center;gap:7px;margin-top:10px;
  color:#53647a;font-size:12px;
}
.color-chip{
  width:23px;height:23px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 0 0 1px #cbd3dd;display:none;
}
.color-preview-row strong{margin-left:5px;color:var(--navy);font-size:12px}

.artwork-tools{
  display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:8px;margin-top:10px;
}
.tool-btn{
  border:1px solid #cfd7e1;background:#fff;color:var(--navy);
  border-radius:8px;padding:10px 8px;font-size:10px;font-weight:800;cursor:pointer;
}
.tool-btn:hover{background:#f1f4f8}
.tool-btn:disabled{opacity:.45;cursor:not-allowed}
.tool-btn-danger{color:#a71f31}

.bg-controls{
  margin-top:10px;padding:12px;border:1px solid #e0e6ed;
  background:#f8fafc;border-radius:9px;
}
.bg-controls label{
  display:flex;justify-content:space-between;color:var(--navy);
  font-size:11px;font-weight:800;margin-bottom:6px;
}
.bg-controls input{width:100%}

@media(max-width:650px){
  .artwork-tools{grid-template-columns:1fr}
}