.myunikat-configurator,
.myunikat-configurator *{box-sizing:border-box}

.myunikat-configurator{
    --mu:#08bbb7;
    --mu-dark:#059d9a;
    --mu-soft:#eefcfb;
    --mu-ink:#091824;
    --mu-muted:#758394;
    --mu-line:#e4ebee;
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:16px;
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(320px,.78fr);
    gap:20px;
    border:1px solid #e1eaed;
    border-radius:25px;
    background:rgba(255,255,255,.98);
    box-shadow:0 24px 70px rgba(12,75,85,.10);
    color:var(--mu-ink);
    font-family:Raleway,Arial,sans-serif;
    line-height:1.35;
    overflow:hidden;
}

.myunikat-configurator button,
.myunikat-configurator input{font-family:inherit!important}

.myunikat-configurator button{
    -webkit-appearance:none!important;
    appearance:none!important;
    text-transform:none!important;
    letter-spacing:0!important;
}

.myunikat-configurator__left,
.myunikat-options,
.myunikat-option-group,
.myunikat-purchase,
.myunikat-preview-card{min-width:0}

.myunikat-configurator__left{
    padding:2px 2px 0;
    display:flex;
    flex-direction:column;
}

.myunikat-options{
    display:flex;
    flex-direction:column;
    border-bottom:1px solid var(--mu-line);
}

.myunikat-option-group{
    min-width:0;
    padding:16px 20px;
    display:grid;
    grid-template-columns:minmax(170px,205px) minmax(0,1fr);
    column-gap:20px;
    row-gap:5px;
    align-items:center;
}

.myunikat-option-group + .myunikat-option-group{border-top:1px solid var(--mu-line)}

.myunikat-option-group__title{
    width:100%;
    margin:0!important;
    color:#0d1d2a!important;
    font-size:16px!important;
    font-weight:750!important;
    line-height:1.35!important;
}

.myunikat-capacity-list{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
}

.myunikat-capacity-group .myunikat-option-group__title,
.myunikat-capacity-group .myunikat-capacity-list{grid-row:1}
.myunikat-capacity-group .myunikat-option-group__title{grid-column:1}
.myunikat-capacity-group .myunikat-capacity-list{grid-column:2}

.myunikat-configurator .myunikat-capacity{
    position:relative;
    width:100%!important;
    min-width:0!important;
    min-height:84px!important;
    margin:0!important;
    padding:9px 11px!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    border:1px solid #dce5e9!important;
    border-radius:13px!important;
    background:#fff!important;
    color:var(--mu-ink)!important;
    box-shadow:none!important;
    text-align:left!important;
    line-height:1.25!important;
    cursor:pointer!important;
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease!important;
}

.myunikat-configurator .myunikat-capacity:hover{
    border-color:#91d8d5!important;
    box-shadow:0 8px 24px rgba(8,187,183,.08)!important;
    transform:translateY(-1px);
}

.myunikat-configurator .myunikat-capacity.is-active{
    border:1.5px solid var(--mu)!important;
    background:linear-gradient(180deg,#fff 0%,#f3fdfc 100%)!important;
    box-shadow:0 9px 24px rgba(8,187,183,.10)!important;
}

.myunikat-capacity__image{
    width:30px;
    height:62px;
    flex:0 0 30px;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}

.myunikat-capacity__copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.myunikat-capacity__copy strong{
    color:var(--mu-ink)!important;
    font-size:15px!important;
    font-weight:750!important;
    line-height:1.1!important;
}

.myunikat-capacity__copy small{
    color:var(--mu-muted)!important;
    font-size:10px!important;
    line-height:1.28!important;
    white-space:normal;
}

.myunikat-radio-mark{
    width:19px;
    height:19px;
    flex:0 0 19px;
    margin-left:auto;
    display:grid;
    place-items:center;
    border:1.5px solid #aebbc5;
    border-radius:50%;
    background:#fff;
}

.myunikat-capacity.is-active .myunikat-radio-mark{border-color:var(--mu);background:var(--mu)}
.myunikat-capacity.is-active .myunikat-radio-mark:after{content:'✓';color:#fff;font-size:10px;font-weight:800}

.myunikat-color-group{align-items:start}
.myunikat-swatches{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:10px 14px;
    align-items:center;
}

.myunikat-color-group .myunikat-option-group__title{
    grid-column:1;
    grid-row:1 / span 2;
    padding-top:10px;
}

.myunikat-color-group .myunikat-swatches{
    grid-column:2;
    grid-row:1;
}

.myunikat-configurator .myunikat-swatch{
    position:relative!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    margin:0!important;
    padding:0!important;
    border:2px solid transparent!important;
    border-radius:50%!important;
    background:transparent!important;
    box-shadow:none!important;
    cursor:pointer!important;
}

.myunikat-swatch > span{
    display:block;
    width:33px;
    height:33px;
    margin:auto;
    border:1px solid rgba(8,23,37,.15);
    border-radius:50%;
    background:var(--myunikat-swatch);
    box-shadow:inset 0 1px 4px rgba(255,255,255,.38),0 3px 8px rgba(10,35,45,.07);
}

.myunikat-configurator .myunikat-swatch.is-active{border-color:var(--mu)!important}

.myunikat-swatch.is-active:after{
    content:'✓';
    position:absolute;
    right:-2px;
    bottom:-2px;
    width:17px;
    height:17px;
    display:grid;
    place-items:center;
    border:2px solid #fff;
    border-radius:50%;
    background:var(--mu);
    color:#fff;
    font-size:8px;
    font-weight:800;
}

.myunikat-configurator .myunikat-swatch.is-disabled{opacity:.2!important;filter:grayscale(1);cursor:not-allowed!important}

.myunikat-selected-color{
    grid-column:2;
    grid-row:2;
    min-height:15px;
    margin:2px 0 0!important;
    color:var(--mu-muted)!important;
    font-size:10.5px!important;
    font-weight:650!important;
}

.myunikat-name-field{
    grid-column:2;
    grid-row:1;
    width:100%;
    max-width:none;
    height:54px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 13px;
    border:1.5px solid var(--mu);
    border-radius:9px;
    background:#fff;
    box-shadow:0 7px 22px rgba(8,187,183,.06);
    transition:border-color .18s ease,box-shadow .18s ease;
}

.myunikat-name-field.is-invalid{border-color:#d64d4d;box-shadow:0 0 0 3px rgba(214,77,77,.08)}

.myunikat-configurator .myunikat-name-input{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#0d1d2a!important;
    font-size:16px!important;
    font-weight:650!important;
    line-height:1!important;
    text-transform:uppercase!important;
}

.myunikat-char-count{flex:0 0 auto;color:#718093;font-size:10.5px;white-space:nowrap}
.myunikat-char-count.is-over{color:#c43f3f;font-weight:750}

.myunikat-name-help,
.myunikat-name-error{
    display:block;
    margin-top:7px;
    font-size:10.5px;
    line-height:1.4;
}
.myunikat-name-help{color:#8994a3}
.myunikat-name-error{min-height:14px;color:#c43f3f;font-weight:650}

.myunikat-name-group .myunikat-option-group__title{
    grid-column:1;
    grid-row:1 / span 3;
    padding-top:16px;
}

.myunikat-name-group .myunikat-name-help{
    grid-column:2;
    grid-row:2;
}

.myunikat-name-group .myunikat-name-error{
    grid-column:2;
    grid-row:3;
}

.myunikat-purchase{
    display:grid;
    grid-template-columns:minmax(150px,.78fr) 116px minmax(205px,1.12fr) minmax(155px,.78fr);
    gap:11px;
    align-items:end;
    padding:19px 10px 5px;
}

.myunikat-price{color:var(--mu-ink)!important;font-size:24px!important;font-weight:800!important;line-height:1.08!important}
.myunikat-price .amount{font-weight:800!important}
.myunikat-price-wrap small{display:block;margin-top:6px;color:#7e8998;font-size:10.5px;line-height:1.4}

.myunikat-quantity-wrap label{display:block;margin:0 0 7px!important;color:#1b2d39!important;font-size:10.5px!important;font-weight:700!important}

.myunikat-quantity{
    height:49px;
    display:grid;
    grid-template-columns:34px 1fr 34px;
    overflow:hidden;
    border:1px solid #dce4e8;
    border-radius:9px;
    background:#fff;
}

.myunikat-configurator .myunikat-quantity button{
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    color:#1b3040!important;
    box-shadow:none!important;
    font-size:17px!important;
    line-height:1!important;
    cursor:pointer!important;
}

.myunikat-configurator .myunikat-qty-input{
    width:100%!important;
    min-width:0!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-right:1px solid #e5eaed!important;
    border-left:1px solid #e5eaed!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    color:#13232f!important;
    text-align:center!important;
    -moz-appearance:textfield;
}

.myunikat-quantity input::-webkit-outer-spin-button,
.myunikat-quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.myunikat-configurator .myunikat-add-button,
.myunikat-configurator .myunikat-buy-button{
    width:100%!important;
    min-width:0!important;
    height:53px!important;
    margin:0!important;
    padding:0 15px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    border-radius:27px!important;
    font-size:12.5px!important;
    font-weight:750!important;
    line-height:1!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important;
}

.myunikat-configurator .myunikat-add-button{border:0!important;background:linear-gradient(100deg,#08aaa6,#08c9c1)!important;color:#fff!important;box-shadow:0 12px 27px rgba(7,189,185,.22)!important}
.myunikat-add-button svg{width:18px;height:18px;flex:0 0 18px}
.myunikat-configurator .myunikat-add-button:hover{transform:translateY(-2px)!important;box-shadow:0 16px 31px rgba(7,189,185,.29)!important}
.myunikat-configurator .myunikat-buy-button{border:1.5px solid var(--mu)!important;background:#fff!important;color:#009e9b!important;box-shadow:none!important}
.myunikat-configurator .myunikat-buy-button:hover{background:#effdfc!important}
.myunikat-configurator .myunikat-add-button:disabled,
.myunikat-configurator .myunikat-buy-button:disabled{opacity:.52!important;transform:none!important;cursor:not-allowed!important}

.myunikat-message{min-height:20px;padding:3px 10px 0;font-size:11px}
.myunikat-message.is-error{color:#c23b3b}
.myunikat-message.is-success{color:#159557}

.myunikat-preview-card{
    position:relative;
    min-height:490px;
    padding:14px 13px 12px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #e7eff2;
    border-radius:19px;
    background:rgba(255,255,255,.88);
}

.myunikat-preview-card:before,
.myunikat-preview-card:after{display:none}

.myunikat-live-badge{display:none!important}

.myunikat-stage{
    position:relative;
    z-index:2;
    flex:1;
    min-height:385px;
    display:grid;
    place-items:center;
}

.myunikat-image-canvas{
    position:relative;
    width:min(100%,320px);
    aspect-ratio:8/9;
    overflow:visible;
}

.myunikat-main-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:50% 50%;
    filter:drop-shadow(0 12px 14px rgba(25,54,61,.08));
}

.myunikat-name-overlay{
    position:absolute;
    z-index:3;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:visible;
    color:#fff;
    font-weight:800;
    letter-spacing:.025em;
    text-align:center;
    white-space:normal;
    pointer-events:none;
}

.myunikat-name-line{display:block;width:100%;white-space:nowrap}
.myunikat-name-overlay.is-two-lines{letter-spacing:.02em}

.myunikat-thumbnails{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin-top:6px;
}

.myunikat-configurator .myunikat-thumb{
    width:100%!important;
    min-width:0!important;
    height:64px!important;
    margin:0!important;
    padding:5px!important;
    overflow:hidden!important;
    border:1px solid transparent!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:none!important;
    cursor:pointer!important;
}
.myunikat-thumb img{width:100%;height:100%;object-fit:contain}
.myunikat-configurator .myunikat-thumb.is-active{padding:4px!important;border:2px solid var(--mu)!important}

.myunikat-single-configurator{clear:both;padding:70px 20px}
.myunikat-shop-button{background:var(--mu,#07bdb9)!important;color:#fff!important}

@media(max-width:1120px){
    .myunikat-configurator{grid-template-columns:minmax(0,1.5fr) minmax(300px,.82fr);gap:14px;padding:14px}
    .myunikat-option-group{grid-template-columns:minmax(155px,175px) minmax(0,1fr);column-gap:14px;padding-inline:15px}
    .myunikat-purchase{grid-template-columns:minmax(140px,.8fr) 108px minmax(190px,1fr) minmax(145px,.75fr);gap:9px}
    .myunikat-image-canvas{width:min(100%,300px)}
}

@media(max-width:980px){
    .myunikat-configurator{max-width:780px;display:flex;flex-direction:column;gap:10px;padding:11px}
    .myunikat-configurator__left{display:contents}
    .myunikat-options{order:1;display:block;border-bottom:0}
    .myunikat-option-group{display:block;padding:13px 14px}
    .myunikat-option-group__title{padding-top:0}
    .myunikat-option-group + .myunikat-option-group{border-top:1px solid var(--mu-line)}
    .myunikat-capacity-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
    .myunikat-configurator .myunikat-capacity{min-height:76px!important;padding:7px 9px!important}
    .myunikat-preview-card{order:2;min-height:405px;padding:11px}
    .myunikat-stage{min-height:310px}
    .myunikat-image-canvas{width:min(100%,260px)}
    .myunikat-configurator .myunikat-thumb{height:58px!important}
    .myunikat-purchase{order:3;grid-template-columns:minmax(145px,.75fr) 105px minmax(200px,1fr) minmax(155px,.8fr);gap:8px;padding:11px 8px 3px;border-top:1px solid var(--mu-line)}
    .myunikat-message{order:4}
}

@media(max-width:700px){
    .myunikat-configurator{max-width:620px;padding:8px;border-radius:18px}
    .myunikat-option-group{padding:10px 9px}
    .myunikat-option-group__title{margin:0 0 9px!important;font-size:14px!important}
    .myunikat-capacity-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
    .myunikat-configurator .myunikat-capacity{min-height:70px!important;padding:6px 7px!important;gap:6px!important}
    .myunikat-capacity__image{width:23px;height:48px;flex-basis:23px}
    .myunikat-capacity__copy strong{font-size:13px!important}
    .myunikat-capacity__copy small{font-size:8.5px!important}
    .myunikat-swatches{gap:7px 10px}
    .myunikat-configurator .myunikat-swatch{width:35px!important;height:35px!important;min-width:35px!important}
    .myunikat-swatch > span{width:29px;height:29px}
    .myunikat-name-field{height:49px;max-width:none}
    .myunikat-configurator .myunikat-name-input{font-size:13.5px!important}
    .myunikat-preview-card{min-height:350px;padding:8px}
    .myunikat-stage{min-height:250px}
    .myunikat-image-canvas{width:min(100%,235px)}
    .myunikat-thumbnails{gap:6px}
    .myunikat-configurator .myunikat-thumb{height:49px!important;padding:3px!important;border-radius:7px!important}
    .myunikat-purchase{grid-template-columns:minmax(0,1fr) 100px;gap:8px;padding:9px 6px 3px}
    .myunikat-price-wrap{grid-column:1}.myunikat-quantity-wrap{grid-column:2}
    .myunikat-configurator .myunikat-add-button,.myunikat-configurator .myunikat-buy-button{height:47px!important;font-size:11.5px!important}
}

@media(max-width:480px){
    .myunikat-configurator{padding:5px;gap:6px;border-radius:15px}
    .myunikat-option-group{padding:8px 6px}
    .myunikat-capacity-group .myunikat-option-group__title,.myunikat-name-group .myunikat-option-group__title{margin-bottom:7px!important;font-size:13px!important}
    .myunikat-capacity-list{gap:5px}
    .myunikat-configurator .myunikat-capacity{min-height:61px!important;padding:5px!important;border-radius:9px!important}
    .myunikat-capacity__image{width:18px;height:40px;flex-basis:18px}
    .myunikat-capacity__copy strong{font-size:12px!important}
    .myunikat-capacity__copy small{display:none}
    .myunikat-radio-mark{width:14px;height:14px;flex-basis:14px}
    .myunikat-color-group{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 10px}
    .myunikat-color-group .myunikat-option-group__title{grid-column:auto;grid-row:auto;margin:0!important;padding-top:0;font-size:13px!important}
    .myunikat-color-group .myunikat-swatches{grid-column:auto;grid-row:auto;flex-wrap:nowrap;justify-content:flex-start;gap:4px;overflow:visible}
    .myunikat-configurator .myunikat-swatch{width:29px!important;height:29px!important;min-width:29px!important}
    .myunikat-swatch > span{width:23px;height:23px}
    .myunikat-swatch.is-active:after{width:14px;height:14px;font-size:7px}
    .myunikat-selected-color{grid-column:1/-1;grid-row:auto;margin-top:1px!important;min-height:12px;font-size:9px!important}
    .myunikat-name-field{height:43px;padding-inline:8px}
    .myunikat-configurator .myunikat-name-input{font-size:13px!important}
    .myunikat-name-help,.myunikat-name-error{margin-top:4px;font-size:8.5px}
    .myunikat-preview-card{min-height:300px;padding:7px 6px 6px;border-radius:12px}
    .myunikat-stage{min-height:225px}
    .myunikat-image-canvas{width:min(100%,200px)}
    .myunikat-configurator .myunikat-thumb{height:43px!important}
    .myunikat-purchase{grid-template-columns:minmax(0,1fr) 92px;padding:8px 5px 2px}
    .myunikat-price{font-size:19px!important}
    .myunikat-price-wrap small{font-size:8px}
    .myunikat-quantity{height:40px;grid-template-columns:26px 1fr 26px}
    .myunikat-configurator .myunikat-add-button,.myunikat-configurator .myunikat-buy-button{grid-column:1/-1;height:43px!important}
}

@media(max-width:360px){
    .myunikat-capacity__copy strong{font-size:11px!important}
    .myunikat-configurator .myunikat-swatch{width:27px!important;height:27px!important;min-width:27px!important}
    .myunikat-swatch > span{width:21px;height:21px}
    .myunikat-stage{min-height:205px}
    .myunikat-image-canvas{width:min(100%,186px)}
    .myunikat-configurator .myunikat-thumb{height:40px!important}
}
