.erlan-accessories{
    width:100%;
    margin:14px 0 14px;
    padding-top:13px;
    border-top:1px solid #e5e5e5;
}
.erlan-accessories__heading{
    margin-bottom:8px;
    font-size:14px;
    line-height:1.3;
    font-weight:600;
    text-transform:none;
    letter-spacing:0;
    color:#242424;
}
.erlan-accessories__list{
    display:flex;
    flex-direction:column;
    gap:5px;
}
.erlan-accessory{
    position:relative;
    display:grid;
    grid-template-columns:20px 42px minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    min-height:60px;
    padding:6px 9px;
    border:1px solid #e7e7e7;
    background:#fff;
    transition:border-color .15s ease, background-color .15s ease;
}
.erlan-accessory:hover{border-color:#cbd5df}
.erlan-accessory.is-selected{
    border-color:#c9d7e5;
    background:#f7f9fb;
}
.erlan-accessory.is-disabled{opacity:.72}
.erlan-accessory__select{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    cursor:pointer;
}
.erlan-accessory__check input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.erlan-accessory__fakecheck{
    display:block;
    width:16px;
    height:16px;
    border:1px solid #b9b9b9;
    background:#fff;
    border-radius:2px;
}
.erlan-accessory__check input:checked + .erlan-accessory__fakecheck{
    border-color:#2e5f95;
    background:#2e5f95;
}
.erlan-accessory__check input:checked + .erlan-accessory__fakecheck:after{
    content:"";
    display:block;
    width:4px;
    height:8px;
    margin:2px 0 0 5px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}
.erlan-accessory__check--empty{width:16px;height:16px}
.erlan-accessory__image{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
}
.erlan-accessory__image img{
    display:block;
    max-width:42px;
    max-height:42px;
    width:auto;
    height:auto;
    object-fit:contain;
    margin:0;
}
.erlan-accessory__info{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:1px;
}
.erlan-accessory__name{
    font-size:13px;
    line-height:1.25;
    font-weight:600;
    color:#242424;
}
.erlan-accessory__stock,
.erlan-accessory__choose{
    font-size:11px;
    line-height:1.25;
}
.erlan-accessory__stock.in-stock{color:#6b9638}
.erlan-accessory__stock.out-of-stock{color:#888}
.erlan-accessory__choose{color:#2e5f95;text-decoration:underline}
.erlan-accessory__price{
    padding-left:7px;
    white-space:nowrap;
    font-size:13px;
    font-weight:700;
    color:#242424;
}
.erlan-accessory__price del{
    opacity:.55;
    font-weight:400;
    margin-right:3px;
}
.erlan-accessories__summary{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid #eee;
}
.erlan-accessories__summary-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:2px 2px;
    font-size:13px;
}
.erlan-accessories__grand-row{
    margin-top:2px;
    font-size:15px;
    color:#242424;
}
.erlan-accessories__grand-row strong{
    font-size:17px;
    color:#2e5f95;
}
.erlan-accessories__summary strong{white-space:nowrap}
@media (max-width:480px){
    .erlan-accessory{
        grid-template-columns:18px 38px minmax(0,1fr);
        gap:7px;
        min-height:56px;
    }
    .erlan-accessory__image{width:38px;height:38px}
    .erlan-accessory__image img{max-width:38px;max-height:38px}
    .erlan-accessory__price{
        grid-column:3;
        padding-left:0;
        margin-top:-2px;
    }
}


/* v1.3: scroll only when the list is longer than roughly five rows */
.erlan-accessories__list{
    max-height:335px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding-right:3px;
}
.erlan-accessories__list::-webkit-scrollbar{width:7px}
.erlan-accessories__list::-webkit-scrollbar-track{background:#f3f3f3;border-radius:6px}
.erlan-accessories__list::-webkit-scrollbar-thumb{background:#c8c8c8;border-radius:6px}
.erlan-accessories__count{
    font-weight:400;
    color:#777;
    margin-left:4px;
}
#erlan_accessories_product_data .select2-selection__rendered.erlan-sortable-ready
.select2-selection__choice{cursor:grab}
#erlan_accessories_product_data .select2-selection__rendered.erlan-sortable-ready
.select2-selection__choice:active{cursor:grabbing}


/* v1.3.3 – mobil: all produktinformation och pris ska alltid synas */
@media (max-width: 767px){
    .erlan-accessories,
    .erlan-accessories__list{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }
    .erlan-accessories{overflow:visible}
    .erlan-accessories__list{overflow-x:hidden}

    .erlan-accessory{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        grid-template-columns:18px 42px minmax(0,1fr);
        grid-template-rows:auto auto;
        column-gap:8px;
        row-gap:2px;
        min-height:62px;
        padding:7px 8px;
    }

    .erlan-accessory__select,
    .erlan-accessory__check{
        grid-column:1;
        grid-row:1 / span 2;
        align-self:center;
    }

    .erlan-accessory__image{
        grid-column:2;
        grid-row:1 / span 2;
        width:42px;
        height:42px;
        align-self:center;
    }
    .erlan-accessory__image img{
        max-width:42px;
        max-height:42px;
    }

    .erlan-accessory__info{
        grid-column:3;
        grid-row:1;
        min-width:0;
        width:100%;
    }
    .erlan-accessory__name{
        display:block;
        width:100%;
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
        overflow-wrap:anywhere;
        font-size:12.5px;
        line-height:1.25;
    }
    .erlan-accessory__stock{
        display:block;
        margin-top:2px;
    }

    .erlan-accessory__price{
        grid-column:3 !important;
        grid-row:2;
        justify-self:start;
        align-self:start;
        display:block !important;
        width:auto;
        max-width:100%;
        margin:2px 0 0 !important;
        padding:0 !important;
        white-space:normal;
        overflow:visible;
        font-size:13px;
        line-height:1.2;
        font-weight:700;
    }

    .erlan-accessories__summary,
    .erlan-accessories__summary-row{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }
    .erlan-accessories__summary-row{gap:8px}
    .erlan-accessories__summary-row strong{
        flex:0 0 auto;
        text-align:right;
    }
}

@media (max-width:380px){
    .erlan-accessory{
        grid-template-columns:18px 36px minmax(0,1fr);
        column-gap:7px;
    }
    .erlan-accessory__image{width:36px;height:36px}
    .erlan-accessory__image img{max-width:36px;max-height:36px}
}


/* v1.3.4 – pris och lager på samma rad: + pris → I lager */
.erlan-accessory__meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
    margin-top:2px;
    min-width:0;
}
.erlan-accessory__meta .erlan-accessory__price{
    display:inline !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    white-space:nowrap;
    font-size:12px;
    line-height:1.25;
    font-weight:700;
}
.erlan-accessory__arrow{
    font-size:11px;
    line-height:1;
    color:#888;
}
.erlan-accessory__meta .erlan-accessory__stock{
    display:inline;
    margin:0;
    font-size:11px;
    line-height:1.25;
    white-space:nowrap;
}

/* Override the earlier mobile rule that placed price on its own grid row. */
@media (max-width:767px){
    .erlan-accessory{
        grid-template-rows:auto;
    }
    .erlan-accessory__info{
        grid-column:3;
        grid-row:1;
    }
    .erlan-accessory__meta .erlan-accessory__price{
        grid-column:auto !important;
        grid-row:auto !important;
        justify-self:auto;
        align-self:auto;
    }
    .erlan-accessory__meta{
        flex-wrap:nowrap;
    }
}


/* v1.3.6 – iPhone/mobile scroll fix */
@media (max-width:767px){
    /*
     * Long names make rows taller. Do not force the desktop 335px viewport on
     * mobile; use a larger viewport and scroll padding so rows are not visually
     * clipped at the top/bottom.
     */
    .erlan-accessories__list{
        max-height:430px;
        overflow-y:auto;
        overflow-x:hidden;
        padding-top:2px;
        padding-bottom:2px;
        padding-right:3px;
        scroll-padding-top:8px;
        scroll-padding-bottom:8px;
        -webkit-overflow-scrolling:touch;
    }

    .erlan-accessory{
        height:auto !important;
        min-height:64px;
        overflow:visible;
        align-items:center;
        padding-top:8px;
        padding-bottom:8px;
    }

    .erlan-accessory__info{
        align-self:center;
        overflow:visible;
    }

    .erlan-accessory__name{
        height:auto !important;
        max-height:none !important;
        -webkit-line-clamp:unset !important;
        line-clamp:unset !important;
        white-space:normal !important;
        overflow:visible !important;
    }

    .erlan-accessory__meta{
        display:flex;
        align-items:baseline;
        flex-wrap:wrap;
        gap:0;
        margin-top:4px;
        min-height:17px;
        overflow:visible;
    }

    .erlan-accessory__meta .erlan-accessory__price{
        display:inline-block !important;
        flex:0 0 auto;
        white-space:nowrap !important;
        overflow:visible !important;
        line-height:1.3;
    }

    .erlan-accessory__meta .erlan-accessory__stock{
        display:inline-block !important;
        flex:0 0 auto;
        margin-left:10px !important;
        white-space:nowrap !important;
        overflow:visible !important;
        line-height:1.3;
    }

    /* Visual separator without adding extra markup. */
    .erlan-accessory__meta .erlan-accessory__stock:before{
        content:"|";
        display:inline-block;
        margin-right:10px;
        color:#9a9a9a;
        font-weight:400;
    }

    .erlan-accessory:last-child{
        margin-bottom:0;
    }
}

@media (max-width:390px){
    .erlan-accessories__list{
        max-height:400px;
    }
}


/* v1.3.7 – definitiv mobilfix
   På mobil används sidans vanliga scroll i stället för en scrollbox inuti sidan.
   Det förhindrar att första/sista raden och priset kapas i iOS Safari. */
@media (max-width:767px){
    .erlan-accessories__list{
        max-height:none !important;
        height:auto !important;
        overflow:visible !important;
        padding:0 !important;
        -webkit-overflow-scrolling:auto;
    }

    .erlan-accessory{
        display:grid !important;
        grid-template-columns:18px 42px minmax(0,1fr) !important;
        grid-template-rows:auto !important;
        height:auto !important;
        min-height:68px !important;
        align-items:center !important;
        overflow:visible !important;
        padding:8px !important;
    }

    .erlan-accessory__select,
    .erlan-accessory__check{
        grid-column:1 !important;
        grid-row:1 !important;
        align-self:center !important;
    }

    .erlan-accessory__image{
        grid-column:2 !important;
        grid-row:1 !important;
        align-self:center !important;
    }

    .erlan-accessory__info{
        grid-column:3 !important;
        grid-row:1 !important;
        display:block !important;
        min-width:0 !important;
        width:100% !important;
        height:auto !important;
        overflow:visible !important;
        align-self:center !important;
    }

    .erlan-accessory__name{
        display:block !important;
        position:static !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        margin:0 !important;
        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;
        -webkit-line-clamp:unset !important;
        line-clamp:unset !important;
    }

    .erlan-accessory__meta{
        position:static !important;
        display:flex !important;
        align-items:baseline !important;
        flex-wrap:wrap !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        margin-top:4px !important;
        overflow:visible !important;
    }

    .erlan-accessory__meta .erlan-accessory__price,
    .erlan-accessory__meta .erlan-accessory__stock{
        position:static !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow:visible !important;
    }
}

/* Undo the v1.3.6 narrow-phone scroll height too. */
@media (max-width:390px){
    .erlan-accessories__list{
        max-height:none !important;
    }
}