/* Stuudiopunkt Premium Cart Recommendations */
.sp-crp-wrap,
.sp-crp-wrap *{
    box-sizing:border-box;
}

.sp-crp-wrap{
    width:100%;
    max-width:100%;
    margin:26px 0 34px;
    padding:0;
    clear:both;
    overflow:visible;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
}

.sp-crp-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin:0 0 18px;
}

.sp-crp-eyebrow{
    display:block;
    margin:0 0 9px;
    color:#7b8797;
    font-size:12px;
    font-weight:800;
    letter-spacing:.16em;
    line-height:1.2;
    text-transform:uppercase;
}

.sp-crp-head h2{
    margin:0;
    color:#1d2535;
    font-size:24px;
    line-height:1.18;
    font-weight:800;
    letter-spacing:-.02em;
}

.sp-crp-head p{
    margin:8px 0 0;
    color:#6c6c6c;
    font-size:14px;
    line-height:1.45;
}

.sp-crp-carousel{
    position:relative;
    width:100%;
    max-width:100%;
}

.sp-crp-viewport{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    /* Väike sisemine vahe jätab tootekaardi ülemise ja alumise borderi nähtavaks ka overflow konteineris. */
    padding:1px 0 3px;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}

.sp-crp-viewport::-webkit-scrollbar{
    display:none;
}

.sp-crp-grid{
    display:flex;
    gap:14px;
    width:100%;
    min-width:100%;
}

.sp-crp-card{
    position:relative;
    display:flex;
    flex:0 0 calc((100% - 28px) / 3);
    flex-direction:column;
    min-width:0;
    min-height:0;
    padding:15px;
    scroll-snap-align:start;
    border:1px solid #eee4d6;
    border-radius:16px;
    background:#fff;
    margin-bottom:1px;
    transition:box-shadow .18s ease,border-color .18s ease;
}

.sp-crp-count-1 .sp-crp-card{
    flex-basis:100%;
}

.sp-crp-count-2 .sp-crp-card{
    flex-basis:calc((100% - 14px) / 2);
}

.sp-crp-card:hover{
    border-color:#b99d5b;
    box-shadow:0 10px 22px rgba(21,29,43,.07);
}

.sp-crp-image{
    display:flex!important;
    align-items:center;
    justify-content:center;
    width:100%;
    height:112px;
    margin:0 0 13px;
    padding:10px;
    border-radius:14px;
    background:#fff;
    border:1px solid #f0e7db;
    overflow:hidden;
    text-decoration:none!important;
}

.sp-crp-image img{
    display:block;
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    max-height:90px!important;
    margin:0!important;
    object-fit:contain;
}

.sp-crp-content{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-width:0;
}

.sp-crp-name{
    display:-webkit-box;
    min-height:42px;
    overflow:hidden;
    color:#9c641f;
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    text-decoration:none!important;
    overflow-wrap:anywhere;
    word-break:normal;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}

.sp-crp-name:hover{
    color:#1d2535;
}

.sp-crp-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:11px 0 13px;
}

.sp-crp-price{
    display:block;
    min-width:0;
    color:#1d2535;
    font-size:15px;
    font-weight:800;
    line-height:1.2;
}

.sp-crp-price del{
    opacity:.5;
    font-weight:600;
}

.sp-crp-price ins{
    text-decoration:none;
}

.sp-crp-badge{
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    border-radius:999px;
    padding:4px 8px;
    background:#f2eadc;
    color:#9c7c3e;
    font-size:10px;
    font-weight:800;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.sp-crp-button,
.sp-crp-button.button,
.woocommerce .sp-crp-button.button{
    display:flex!important;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:40px;
    margin:auto 0 0!important;
    padding:10px 12px!important;
    border:1px solid #b99d5b!important;
    border-radius:0!important;
    background:#fff!important;
    color:#b08a42!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1.2!important;
    letter-spacing:.055em;
    text-align:center;
    text-transform:uppercase;
    text-decoration:none!important;
    white-space:normal;
    transition:background .18s ease,color .18s ease,border-color .18s ease;
}

.sp-crp-button:hover,
.sp-crp-button.loading,
.woocommerce .sp-crp-button.button:hover{
    background:#b99d5b!important;
    color:#fff!important;
    border-color:#b99d5b!important;
}

.sp-crp-button.added{
    background:#1d2535!important;
    color:#fff!important;
    border-color:#1d2535!important;
}

.sp-crp-button:before,
.sp-crp-button:after{
    display:none!important;
    content:none!important;
}

.sp-crp-button.loading{
    opacity:.85;
    pointer-events:none;
}

.sp-crp-arrow{
    position:absolute;
    top:50%;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:44px;
    margin:0;
    padding:0;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#111827!important;
    font-size:42px;
    font-weight:900;
    line-height:1;
    cursor:pointer;
    box-shadow:none!important;
    transform:translateY(-50%);
    transition:opacity .18s ease,transform .18s ease,color .18s ease;
}

.sp-crp-arrow:hover{
    background:transparent!important;
    color:#000!important;
    transform:translateY(-50%) scale(1.06);
}

.sp-crp-arrow:focus{
    outline:0;
}

.sp-crp-arrow:focus-visible{
    outline:2px solid #b99d5b;
    outline-offset:3px;
}

.sp-crp-arrow:disabled{
    opacity:.18;
    cursor:default;
    pointer-events:none;
}

@media (min-width:761px){
    .sp-crp-arrow:disabled{display:none;}
}

.sp-crp-arrow-prev{
    left:-24px;
}

.sp-crp-arrow-next{
    right:-24px;
}

.sp-crp-has-arrows .sp-crp-viewport{
    padding:1px 0 3px;
}

.sp-crp-has-arrows .sp-crp-grid{
    width:100%;
}

@media (max-width:1180px){
    .sp-crp-wrap{padding:0;}
    .sp-crp-grid{gap:12px;}
    .sp-crp-card{padding:13px;flex-basis:calc((100% - 24px) / 3);}
    .sp-crp-count-2 .sp-crp-card{flex-basis:calc((100% - 12px) / 2);}
    .sp-crp-image{height:104px;}
    .sp-crp-name{font-size:13.5px;}
}

@media (max-width:760px){
    .sp-crp-head{display:block;}
    .sp-crp-grid{gap:12px;}
    .sp-crp-has-arrows .sp-crp-viewport{padding:1px 0 4px;}
    .sp-crp-arrow{
        display:flex;
        width:22px;
        height:40px;
        font-size:38px;
        color:#111827!important;
        opacity:1;
        text-shadow:0 1px 2px rgba(255,255,255,.85);
    }
    .sp-crp-arrow-prev{left:2px;}
    .sp-crp-arrow-next{right:2px;}
    .sp-crp-card,
    .sp-crp-count-2 .sp-crp-card,
    .sp-crp-count-3 .sp-crp-card{
        flex:0 0 calc((100% - 12px) / 2);
        display:flex;
        flex-direction:column;
        padding:12px;
    }
    .sp-crp-image{
        width:100%;
        height:94px;
        margin:0 0 12px;
    }
    .sp-crp-image img{
        max-height:74px!important;
    }
    .sp-crp-name{
        min-height:54px;
        font-size:13px;
        -webkit-line-clamp:3;
    }
    .sp-crp-meta{display:block;margin:9px 0 12px;}
    .sp-crp-badge{margin-top:6px;}
    .sp-crp-button{min-height:40px;padding:9px 8px!important;font-size:11px!important;}
}

@media (max-width:480px){
    .sp-crp-wrap{
        margin:20px 0 28px;
        padding:0;
        border-radius:0;
    }
    .sp-crp-head h2{font-size:21px;}
    .sp-crp-grid{gap:10px;}
    .sp-crp-has-arrows .sp-crp-viewport{padding:1px 0 4px;}
    .sp-crp-arrow{width:20px;height:38px;font-size:36px;}
    .sp-crp-arrow-prev{left:2px;}
    .sp-crp-arrow-next{right:2px;}
    .sp-crp-card,
    .sp-crp-count-2 .sp-crp-card,
    .sp-crp-count-3 .sp-crp-card{
        flex-basis:calc((100% - 10px) / 2);
        padding:10px;
    }
    .sp-crp-image{height:82px;}
    .sp-crp-image img{max-height:64px!important;}
}
