/* ===== Strait Hat Company v0.7 — model selection workflow ===== */

.designer-head{
  background:linear-gradient(105deg,#07182d,#12375f);
  color:#fff;
}
.designer-head h1{color:#fff}
.designer-head p{color:#dfe8f2}
.designer-eyebrow{color:#fff}

.customizer-v07{
  align-items:start;
}

.preview-panel-v07{
  position:sticky;
  top:20px;
}

.selected-hat-banner{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:10px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px 12px 0 0;
  padding:14px 18px;
}

.selected-hat-banner span{
  grid-row:1 / 3;
  background:var(--red);
  color:#fff;
  border-radius:999px;
  padding:7px 11px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.selected-hat-banner strong{
  color:var(--navy);
  font-size:18px;
}

.selected-hat-banner small{
  color:#68778a;
  text-transform:uppercase;
  font-weight:800;
  font-size:10px;
}

.stage-v07{
  border-radius:0;
  border-top:0;
}

.stage-v07 .hat-wrap{
  max-width:600px;
}

.stage-v07 #hatImage{
  max-height:430px;
  object-fit:contain;
}

.preview-tools-note{
  background:#fff;
  border:1px solid var(--line);
  border-top:0;
  padding:13px 18px;
}

.preview-tools-note strong{
  display:block;
  color:var(--navy);
  font-size:13px;
}

.preview-tools-note span{
  display:block;
  color:#718095;
  font-size:11px;
  line-height:1.5;
  margin-top:3px;
}

.controls-v07{
  border-radius:18px;
}

.selected-summary-v07{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin:14px 0 22px;
}

.selected-summary-v07 div{
  background:#f7f9fb;
  border:1px solid #e4e9ef;
  border-radius:9px;
  padding:10px;
}

.selected-summary-v07 small{
  display:block;
  color:#7b8795;
  font-size:9px;
  font-weight:800;
  letter-spacing:.6px;
}

.selected-summary-v07 strong{
  display:block;
  margin-top:3px;
  color:var(--navy);
  font-size:12px;
  line-height:1.25;
}

.uploadbox-v07{
  border-style:dashed;
  border-width:2px;
}

.designer-contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.submit-design-v07{
  width:100%;
  margin-top:16px;
}

.designer-help-v07{
  margin:12px 0 0;
  text-align:center;
  font-size:11px;
  color:#738195;
}

.designer-help-v07 a{
  color:var(--red);
  font-weight:800;
}

@media(max-width:900px){
  .preview-panel-v07{position:static}
}

@media(max-width:620px){
  .selected-summary-v07{grid-template-columns:1fr}
  .designer-contact-grid{grid-template-columns:1fr}
  .selected-hat-banner{grid-template-columns:1fr}
  .selected-hat-banner span{grid-row:auto;width:max-content;margin-bottom:6px}
}