.hb-builder{
    display:flex;
    gap:40px;
    align-items:flex-start;
}
.hb-left{
    width:45%;
}
.hb-right{
    width:55%;
}
.hb-carry-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}
.hb-carry-card{
    border:1px solid #ddd;
    border-radius:8px;
    padding:15px;
    cursor:pointer;
    text-align:center;
    transition:.2s;
}
.hb-carry-card img{
    width:100%;
    height:140px;
    object-fit:cover;
    border-radius:6px;
}
.hb-carry-card:hover{
    border-color:#000;
}
.hb-carry-card.active{
    border:2px solid #000;
}
.hb-step select{
    width:100%;
    max-width:420px;
    padding:12px;
    font-size:15px;
    border:1px solid #ddd;
    border-radius:6px;
    background:#fff;
}
.hb-handedness-grid{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}
.hb-hand-card{
    border:2px solid #ddd;
    border-radius:8px;
    padding:12px 20px;
    cursor:pointer;
    text-align:center;
    min-width:140px;
    transition:.2s;
}
.hb-hand-card img{
    width:40px;
    display:block;
    margin:0 auto 10px;
}
.hb-hand-card.active{
    border-color:#000;
    background:#f3f3f3;
}
.hb-kydex-grid{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}
.hb-kydex-card{
    width:170px;
    border:2px solid #ddd;
    border-radius:10px;
    padding:12px;
    cursor:pointer;
    text-align:center;
    transition:.25s;
}

.hb-kydex-card img{
    width:100%;
    height:120px;
    object-fit:contain;
}
.hb-kydex-card h4{
    margin:10px 0 5px;
}
.hb-kydex-card.active{
    border-color:#000;
    background:#f5f5f5;
}
.hb-kydex-tab.disabled{
    opacity:.4;
    pointer-events:none;
    cursor:not-allowed;
}

.hb-edc-grid{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.hb-edc-card{
    width:170px;
    border:2px solid #ddd;
    border-radius:8px;
    padding:12px;
    cursor:pointer;
    text-align:center;
    background:#fff;
    transition:.3s;
    position:relative;
}

.hb-edc-card:hover{
    border-color:#2271b1;
}

.hb-edc-card.active{
    border-color:#2271b1 !important;
    background:#eef6ff !important;
}

.hb-edc-card.active::after{
    content:"✓";
    position:absolute;
    top:8px;
    right:8px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#2271b1;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:bold;
}
.hb-washer-grid{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}
.hb-washer-card{
    width:170px;
    border:2px solid #ddd;
    border-radius:8px;
    padding:12px;
    cursor:pointer;
    text-align:center;
}
.hb-washer-card.active{
    border-color:#2271b1;
    background:#eef6ff;
}
.hb-addon-grid{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}
.hb-addon-card{
    width:180px;
    border:2px solid #ddd;
    border-radius:8px;
    padding:12px;
    cursor:pointer;
    display:block;
}
.hb-addon-card input{
    display:none;
}
.hb-addon-card.active{
    border-color:#2271b1;
    background:#eef6ff;
}
.hb-step-error {
    border: 1px solid #e74c3c !important;
    padding: 12px;
    border-radius: 6px;
    background-color: rgba(231, 76, 60, 0.04);
}
.hb-error-msg {
    display: block;
    color: #e74c3c;
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
}

 /* preview image */
/* Container Box */
/* Container styling to match reference dark theme */
.hb-preview-container {
    position: sticky;
    top: 20px;
    width: 100%;
    background-color: #121212;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
}

/* Main Preview Box */
.hb-preview-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: #181818;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Layer Images Absolute Overlay */
.hb-preview-canvas img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Prevents zooming / stretching */
    pointer-events: none;
}

#hb_img_base   { z-index: 1; }
#hb_img_wrap   { z-index: 2; }
#hb_img_washer { z-index: 3; }

/* Hide broken image icons automatically */
.hb-preview-canvas img[src=""],
.hb-preview-canvas img:not([src]) {
    display: none !important;
}

/* Label on bottom right */
.hb-preview-caption {
    text-align: right;
    margin-top: 12px;
}

#hb_preview_label {
    font-size: 13px;
    color: #888888;
    font-weight: 500;
}