/* Refinements layered after the core application and modern UI styles. */
.garment-designer-app .garment-design-control>.design-thumbnail-wrapper{
    width:112px!important;
    padding:8px!important;
    overflow:visible!important;
}
.garment-designer-app .garment-design-control .design-thumbnail-button{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:7px!important;
    width:94px!important;
    min-height:132px!important;
    padding:0 0 9px!important;
    overflow:hidden!important;
    border:1px solid var(--zbr-accent)!important;
    border-radius:10px!important;
    background:var(--zbr-accent)!important;
    color:#fff!important;
}
.garment-designer-app .garment-design-control .design-thumbnail-button:hover{
    border-color:var(--zbr-accent-dark)!important;
    background:var(--zbr-accent-dark)!important;
    color:#fff!important;
}
.garment-designer-app .garment-design-control .design-thumbnail-button .design-thumbnail{
    width:94px!important;
}
.garment-designer-app .garment-design-control .design-thumbnail-label{
    display:block!important;
    padding:0 6px!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1.2!important;
    text-align:center!important;
    white-space:normal!important;
}
.garment-designer-app .modal .modal-design-content .design-thumbail-button{
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:center!important;
}
.garment-designer-app .modal .modal-design-content .design-thumbnail-wrapper{
    width:100%!important;
    max-width:190px!important;
    aspect-ratio:1/1!important;
    margin:0 auto!important;
    padding:0!important;
    background:#fff!important;
}
.garment-designer-app .modal .modal-design-content .design-thumbnail,
.garment-designer-app .modal .modal-design-content .design-hover-thumbnail{
    left:0!important;
    top:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
}

/* Keep modals aligned to the viewport top with matching outer spacing. */
.garment-designer-app .modal.modal-active{
    align-items:flex-start!important;
    justify-content:center!important;
}
.garment-designer-app .modal.modal-active .modal-box{
    margin:0 auto!important;
}

/* Blend hover artwork with the original instead of washing it out. */
.garment-designer-app .modal-categories-content .category-thumbnail-wrapper:hover .category-thumbnail,
.garment-designer-app .modal-garment-content .garment-thumbnail-wrapper:hover .garment-thumbnail{
    opacity:.2!important;
}
.garment-designer-app .modal-categories-content .category-thumbnail-wrapper:hover .category-hover-thumbnail,
.garment-designer-app .modal-garment-content .garment-thumbnail-wrapper:hover .garment-hover-thumbnail{
    opacity:.8!important;
    mix-blend-mode:normal!important;
}