.lva-wrapper {
    margin-top: 15px;
    width: 100%;
    font-size: 14px;
}


.lva-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #222;
}


/* =====================
   COLOR
===================== */

.lva-colors {
    margin-bottom: 12px;
}


.lva-color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


.lva-color {

    border: 1px solid #ddd;
    background: #fff;
    padding: 4px 8px;

    display: flex;
    align-items: center;
    gap: 5px;

    cursor: pointer;

    transition: all .2s ease;

    border-radius: 3px;

}


.lva-color:hover {

    border-color:#000;

}


.lva-color.active {

    border-color:#000;

}



.lva-color-circle {

    width:18px;
    height:18px;

    border-radius:50%;

    display:block;

    border:1px solid #ddd;

}


.lva-color-name {

    font-size:12px;

}





/* =====================
   SIZE
===================== */


.lva-sizes {

    margin-bottom:15px;

}


.lva-size-list {

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}



.lva-size {


    min-width:38px;

    height:32px;

    padding:0 10px;

    background:#fff;

    border:1px solid #ddd;

    cursor:pointer;

    font-size:13px;

    transition:.2s;


}



.lva-size:hover {


    border-color:#000;


}



.lva-size.active {



    color:#000000;



}




.lva-size.disabled {


    opacity:.35;

    cursor:not-allowed;

    text-decoration:line-through;


}





/* =====================
   ADD CART BUTTON
===================== */


.lva-add-cart {


    width:100%;

    height:40px;

    background:#000;

    color:#fff;

    border:0;

    cursor:pointer;

    font-size:14px;

    transition:.2s;


}



.lva-add-cart:hover {


    opacity:.85;


}



.lva-add-cart:disabled {


    opacity:.4;

    cursor:not-allowed;


}




.lva-add-cart.loading {


    position:relative;

    opacity:.6;


}



.lva-add-cart.loading:after {


    content:"";

    position:absolute;

    width:16px;

    height:16px;

    border:2px solid #fff;

    border-top-color:transparent;

    border-radius:50%;

    right:15px;

    top:50%;

    margin-top:-8px;

    animation:lva-spin .7s linear infinite;


}



@keyframes lva-spin {


    from {

        transform:rotate(0);

    }


    to {

        transform:rotate(360deg);

    }


}





/* =====================
   MESSAGE
===================== */


.lva-message {


    margin-top:8px;

    font-size:13px;


}


.lva-message.success {

    color:green;

}


.lva-message.error {

    color:red;

}







/* =====================
   MOBILE
===================== */


@media(max-width:768px){


    .lva-color-list,
    .lva-size-list {


        gap:6px;


    }



    .lva-color {


        padding:4px 6px;


    }



    .lva-size {


        min-width:34px;


    }


}

.lva-colors .lva-label,
.lva-color-name,
.lva-add-cart {
	display: none !important;
}
.product-small.box .box-text {
	padding: 0 20px;
	position: relative;
}
.product-small.box .box-text .title-wrapper {
	display: flex;
	flex-direction: column;
}
.product-small.box .box-text .lva-wrapper {
	order: -1;
	margin: 0;
	position: relative;
}
.lva-color-list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	max-height: 136px;
	overflow: hidden;
}
.lva-color-list button.lva-color {
    width: 34px;
    height: 42px;
    border: none;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: pointer;
    transition: all .2s ease;
    border-radius: 0;
    margin: 0;
}
.lva-color-list button.lva-color img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.lva-sizes {
	position: absolute;
	width: 100%;
	height: auto;
	bottom: 100%;
	left: 0;
	padding: 12px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), hsla(0, 0%, 100%, 0.4);
	border-radius: 8px;
    opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
}
.product-small.box:hover .lva-sizes {
	opacity: 1;
	visibility: visible;
}
.lva-sizes .lva-size {
    min-width: 38px;
    height: 32px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #ddd;
    cursor: pointer;
    font-size: 13px;
	border-radius: 9px;
    transition: .2s;
	margin: 0;
	text-transform: none;
}
.lva-sizes .lva-size:hover {
	background: #d8d8d8;
}
.lva-label {
    font-size: 16px;
    color: #000000;
	text-align: center;
}