/* OTALEX WeShoes product / variant module */

.ws-search-summary{
    margin:4px 0 12px;
    color:var(--muted);
    font-size:10px;
}

.ws-model-results{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:11px;
}

.ws-model-card{
    position:relative;
    display:grid;
    grid-template-columns:
        minmax(0,1fr) auto;
    gap:12px;
    width:100%;
    min-width:0;
    padding:15px;
    padding-bottom:38px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#fff;
    color:var(--ink);
    text-align:start;
}

.ws-model-card:hover{
    border-color:#c6c2ff;
    box-shadow:
        0 7px 22px
        rgba(34,45,78,.05);
}

.ws-model-card-main{
    min-width:0;
}

.ws-model-title{
    font-size:12px;
    line-height:1.45;
    font-weight:850;
}

.ws-model-meta{
    display:flex;
    flex-wrap:wrap;
    gap:5px 9px;
    margin-top:8px;
    color:var(--muted);
    font-size:9px;
}

.ws-model-card-side{
    display:flex;
    min-width:112px;
    flex-direction:column;
    align-items:flex-end;
    gap:5px;
    font-size:9px;
    color:var(--muted);
}

html[dir="rtl"]
.ws-model-card-side{
    align-items:flex-start;
}

.ws-model-card-side strong{
    color:var(--ink);
    font-size:10px;
}

.ws-model-open{
    position:absolute;
    inset-inline-start:15px;
    bottom:13px;
    color:var(--accent);
    font-size:9px;
    font-weight:850;
}

.ws-product-detail{
    margin-top:18px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
}

.ws-product-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:20px;
    border-bottom:1px solid var(--line);
    background:#fafbfe;
}

.ws-product-head h2{
    max-width:820px;
    margin:5px 0 8px;
    font-size:20px;
    line-height:1.3;
    letter-spacing:-.02em;
}

.ws-product-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px 12px;
    color:var(--muted);
    font-size:9px;
}

.ws-product-price{
    flex-shrink:0;
    font-size:22px;
    font-weight:900;
}

.ws-variant-section,
.ws-stock-section,
.ws-history-section{
    padding:18px 20px;
    border-bottom:1px solid #edf0f4;
}

.ws-section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.ws-section-title > div{
    display:flex;
    align-items:center;
    gap:8px;
}

.ws-section-title strong{
    font-size:12px;
}

.ws-section-title span{
    color:var(--muted);
    font-size:9px;
}

.ws-variant-grid{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.ws-variant-btn{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-height:48px;
    padding:8px 11px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
    color:var(--ink);
    text-align:start;
}

.ws-variant-btn:hover{
    border-color:#c5c0ff;
}

.ws-variant-btn.active{
    border-color:var(--accent);
    background:#f3f1ff;
    box-shadow:
        0 0 0 2px
        rgba(101,87,245,.06);
}

.ws-variant-btn strong{
    font-size:10px;
}

.ws-variant-btn span{
    color:var(--muted);
    font-size:8px;
}

.ws-selected-variant{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:14px 20px;
    background:#f8f9fc;
    border-bottom:1px solid var(--line);
}

.ws-selected-variant div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.ws-selected-variant span{
    color:var(--muted);
    font-size:8px;
}

.ws-selected-variant strong{
    font-size:11px;
}

.ws-own-store-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin:18px 20px 0;
    padding:15px 17px;
    border:1px solid #dcd8ff;
    border-radius:15px;
    background:#f7f5ff;
}

.ws-own-store-card > div:first-child{
    min-width:0;
}

.ws-own-store-card span{
    display:block;
    color:var(--muted);
    font-size:9px;
    margin-bottom:4px;
}

.ws-own-store-card strong{
    display:block;
    font-size:12px;
}

.ws-own-store-qty{
    display:grid;
    place-items:center;
    min-width:55px;
    height:55px;
    border-radius:16px;
    font-size:20px;
    font-weight:950;
}

.ws-own-store-qty.positive{
    color:#107056;
    background:#dff5ed;
}

.ws-own-store-qty.zero{
    color:#a54843;
    background:#ffebe9;
}

.ws-stock-list{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:7px;
}

.ws-stock-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-width:0;
    padding:10px 12px;
    border:1px solid #edf0f4;
    border-radius:11px;
}

.ws-stock-store{
    min-width:0;
}

.ws-stock-store strong{
    display:block;
    overflow:hidden;
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ws-stock-store span{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:8px;
}

.ws-stock-qty{
    flex-shrink:0;
    min-width:31px;
    text-align:end;
    font-size:12px;
    font-weight:900;
}

.ws-stock-qty.positive{
    color:var(--green);
}

.ws-stock-qty.zero{
    color:var(--muted);
}

.ws-data-note{
    margin-top:10px;
    color:var(--muted);
    font-size:8px;
    line-height:1.45;
}

.ws-movement-list{
    display:flex;
    flex-direction:column;
}

.ws-movement-row{
    display:grid;
    grid-template-columns:
        minmax(0,1fr) auto 55px;
    gap:12px;
    align-items:center;
    padding:9px 0;
    border-bottom:1px solid #edf0f4;
    font-size:9px;
}

.ws-movement-row:last-child{
    border-bottom:0;
}

.ws-movement-row > div:first-child{
    min-width:0;
}

.ws-movement-row strong{
    display:block;
    overflow:hidden;
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ws-movement-row span{
    color:var(--muted);
    font-size:8px;
}

.ws-movement-row b{
    text-align:end;
    font-size:10px;
}

.ws-movement-row b.down{
    color:var(--red);
}

.ws-movement-row b.up{
    color:var(--green);
}


@media(max-width:820px){

    .ws-model-results{
        grid-template-columns:1fr;
    }

    .ws-stock-list{
        grid-template-columns:1fr;
    }
}


@media(max-width:620px){

    .ws-product-head{
        display:block;
        padding:16px;
    }

    .ws-product-head h2{
        font-size:17px;
    }

    .ws-product-price{
        margin-top:13px;
        font-size:20px;
    }

    .ws-variant-section,
    .ws-stock-section,
    .ws-history-section{
        padding:15px 16px;
    }

    .ws-selected-variant{
        grid-template-columns:1fr;
        padding:12px 16px;
    }

    .ws-own-store-card{
        margin:
            14px
            16px
            0;
    }

    .ws-variant-btn{
        flex:
            1
            1
            calc(50% - 7px);
    }

    .ws-movement-row{
        grid-template-columns:
            minmax(0,1fr)
            auto;
    }

    .ws-movement-row > div:nth-child(2){
        display:none;
    }
}

/* WeShoes media v1 */

.ws-model-card.has-image{
    grid-template-columns:
        74px
        minmax(0,1fr)
        auto;
}

.ws-model-image{
    display:flex;
    align-items:center;
    justify-content:center;
    width:74px;
    height:74px;
    overflow:hidden;
    border:1px solid #edf0f4;
    border-radius:12px;
    background:#fff;
}

.ws-model-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.ws-product-image{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 150px;
    width:150px;
    min-height:170px;
    overflow:hidden;
    border:1px solid #edf0f4;
    border-radius:14px;
    background:#fff;
}

.ws-product-image img{
    display:block;
    width:100%;
    height:170px;
    object-fit:contain;
}


@media(max-width:620px){

    .ws-model-card.has-image{
        grid-template-columns:
            64px
            minmax(0,1fr);
    }

    .ws-model-card.has-image
    .ws-model-card-side{
        grid-column:2;
    }

    .ws-model-image{
        width:64px;
        height:64px;
    }

    .ws-product-head{
        display:grid;
        grid-template-columns:
            92px
            minmax(0,1fr);
        gap:12px;
    }

    .ws-product-image{
        width:92px;
        min-height:110px;
        height:110px;
    }

    .ws-product-image img{
        height:108px;
    }

    .ws-product-price{
        grid-column:
            1 / -1;
    }
}

/* WeShoes configurable product image sizing v2 */

.ws-model-card.has-image{
    grid-template-columns:
        var(--ws-search-thumb-width,84px)
        minmax(0,1fr)
        auto;
}

.ws-model-image{
    width:
        var(--ws-search-thumb-width,84px);
    height:
        var(--ws-search-thumb-width,84px);
}

.ws-product-image{
    flex:
        0 0
        var(--ws-detail-image-width,240px);

    width:
        var(--ws-detail-image-width,240px);

    height:auto;
    min-height:0;

    aspect-ratio:
        1875 / 2452;
}

.ws-product-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}


@media(max-width:620px){

    .ws-model-card.has-image{
        grid-template-columns:
            var(
                --ws-mobile-search-thumb-width,
                64px
            )
            minmax(0,1fr);
    }

    .ws-model-image{
        width:
            var(
                --ws-mobile-search-thumb-width,
                64px
            );

        height:
            var(
                --ws-mobile-search-thumb-width,
                64px
            );
    }

    .ws-product-head{
        grid-template-columns:
            var(
                --ws-mobile-detail-image-width,
                130px
            )
            minmax(0,1fr);
    }

    .ws-product-image{
        flex:
            0 0
            var(
                --ws-mobile-detail-image-width,
                130px
            );

        width:
            var(
                --ws-mobile-detail-image-width,
                130px
            );

        height:auto;
        min-height:0;

        aspect-ratio:
            1875 / 2452;
    }

    .ws-product-image img{
        height:100%;
    }
}

/* WeShoes mobile product hero v3 */

@media(max-width:620px){

    .ws-product-detail{
        overflow:hidden;
    }

    .ws-product-head{
        display:flex;
        flex-direction:column;
        gap:0;
        padding:0;
        background:#fff;
    }

    .ws-product-image{
        order:1;

        display:flex;
        align-items:center;
        justify-content:center;

        width:100%;
        max-width:none;

        height:
            var(
                --ws-mobile-detail-image-height,
                280px
            );

        min-height:
            var(
                --ws-mobile-detail-image-height,
                280px
            );

        aspect-ratio:auto;

        border:0;
        border-bottom:
            1px solid #edf0f4;

        border-radius:0;

        padding:12px 16px;

        background:#fff;
    }

    .ws-product-image img{
        display:block;
        width:100%;
        height:100%;
        object-fit:contain;
    }

    .ws-product-head > div:not(
        .ws-product-image
    ){
        order:2;
        width:100%;
        padding:15px 16px 8px;
    }

    .ws-product-head h2{
        margin:
            2px
            0
            9px;

        font-size:17px;
        line-height:1.35;
    }

    .ws-product-meta{
        gap:5px 10px;
    }

    .ws-product-price{
        order:3;
        width:100%;
        margin:0;
        padding:
            4px
            16px
            15px;

        font-size:22px;
        text-align:start;
    }

    .ws-variant-section{
        padding:
            15px
            16px;
    }
}

:root{
    --ws-mobile-detail-image-height:280px;
}