.htv-buttons{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
    direction:rtl;
}

.htv-preview-button{
    appearance:none;
    -webkit-appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:32px;
    padding:5px 11px;
    border:1px solid rgba(185,144,69,.55) !important;
    border-radius:999px !important;
    background:#fff !important;
    color:#7b5b24 !important;
    box-shadow:none !important;
    font-family:inherit;
    font-size:11.5px;
    font-weight:600;
    line-height:1.4;
    white-space:nowrap;
    cursor:pointer;
    transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}

.htv-preview-button::before{
    content:'';
    width:13px;
    height:13px;
    flex:0 0 13px;
    background-color:currentColor;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
}

.htv-preview-button[data-view="sofa"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 10V8a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v2a3 3 0 0 1 2 2.83V18h-2v-1H5v1H3v-5.17A3 3 0 0 1 5 10Zm2 0h10V8a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v2Zm-2 2a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2H5Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 10V8a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v2a3 3 0 0 1 2 2.83V18h-2v-1H5v1H3v-5.17A3 3 0 0 1 5 10Zm2 0h10V8a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v2Zm-2 2a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2H5Z'/%3E%3C/svg%3E");
}

.htv-preview-button[data-view="cushion"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Zm0 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H8Zm1 3h6v6H9V9Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Zm0 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H8Zm1 3h6v6H9V9Z'/%3E%3C/svg%3E");
}

.htv-preview-button:hover{
    background:#f8f3e9 !important;
    color:#6a4a17 !important;
    border-color:#b99045 !important;
    transform:translateY(-1px);
}

.htv-preview-button:focus-visible{
    outline:2px solid rgba(185,144,69,.3);
    outline-offset:2px;
}

.htv-preview-button:active{
    transform:none;
}

.htv-modal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:15px;direction:rtl}
.htv-modal.htv-is-open{display:flex}
.htv-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(4px)}
.htv-modal-dialog{position:relative;z-index:2;width:min(980px,96vw);max-height:94vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 25px 80px rgba(0,0,0,.38)}
.htv-modal-close{position:absolute;top:10px;left:12px;z-index:5;width:40px;height:40px;border:0;border-radius:50%;background:#222;color:#fff;font-size:28px;cursor:pointer}
.htv-modal-header{text-align:center;padding:20px 60px 14px;border-bottom:1px solid #eee}
.htv-modal-header h3{margin:0 0 5px}
.htv-modal-header p{margin:0;color:#777}
.htv-modal-body{padding:18px}
.htv-preview-stage{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:14px;background:#f3efe8;isolation:isolate}
.htv-sofa-base-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.htv-fabric-layer{position:absolute;inset:0;z-index:3;display:none;background-repeat:repeat;background-position:center;background-size:220px auto;opacity:.9;mix-blend-mode:multiply;-webkit-mask-image:var(--htv-mask-image);mask-image:var(--htv-mask-image);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.htv-preview-stage[data-view="sofa"] .htv-sofa-fabric-layer{display:block}
.htv-preview-stage[data-view="cushion"] .htv-cushion-fabric-layer{display:block}
.htv-preview-information{text-align:center;margin-top:12px;padding:10px;background:#f7f7f7;border-radius:9px}
.htv-pattern-control{display:grid;grid-template-columns:auto minmax(150px,380px) 50px;gap:10px;align-items:center;justify-content:center;margin-top:12px}
body.htv-modal-open{overflow:hidden!important}
@media(max-width:767px){.htv-preview-button{flex:0 1 auto;min-height:30px;padding:5px 9px;font-size:11px}.htv-modal{padding:7px}.htv-modal-dialog{width:100%;border-radius:12px}.htv-preview-stage{aspect-ratio:4/3}.htv-pattern-control{grid-template-columns:1fr 45px}.htv-pattern-control label{grid-column:1/-1;text-align:center}}