/* V102.03 — 3 usable mini placement cells per Vaastu zone */
.direction-zone{
  position:absolute;
  z-index:1;
  pointer-events:none;
  border:1px solid rgba(242,212,141,.48)!important;
  background:rgba(215,170,82,.025)!important;
}
.direction-zone-label{
  top:3px!important;
  font-size:8.5px!important;
  color:rgba(255,245,215,.96)!important;
}
.direction-zone .placement-slot{
  position:absolute!important;
  top:15%!important;
  bottom:7%!important;
  width:28%!important;
  border:1px solid rgba(242,212,141,.34)!important;
  border-radius:3px!important;
  background:rgba(255,255,255,.012)!important;
}
.direction-zone .placement-slot.slot-1{left:3%!important}
.direction-zone .placement-slot.slot-2{left:36%!important}
.direction-zone .placement-slot.slot-3{left:69%!important}

/* remove quantity control block completely; Add means add one component */
.left-panel #quantitySelect{display:none!important}
.left-panel label[for="quantitySelect"]{display:none!important}
.left-panel .field:has(#quantitySelect){display:none!important}

/* component blocks sized for the mini-cells and readable vertical labels */
.component{
  min-width:8%!important;
  min-height:18%!important;
  padding:2px 1px!important;
}
.component>span{
  font-size:10.5px!important;
  writing-mode:vertical-rl!important;
  text-orientation:mixed!important;
  line-height:1!important;
  font-weight:950!important;
}
.component>span small{font-size:6.8px!important}