/****** CSS for KWO Checkout Plugin ******/
.kwo-variation-info {
    margin-bottom: 0.5em;
}

.kwo-variation-info .price {
    font-size: larger;
    color: #555;
    margin-left: 0.5em;
    /*float:right;*/
}

.kwo-variation-down , .kwo-variation-up {       
    font-size: large;
    cursor: pointer;
    clear:both;
    color:#06b480;
    float:right;
}
.kwo-variation-up {
    display: none;
   
}

.kwo-variation-matrix {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    /*max-width:600px;*/
    margin:0 auto;
}

.kwo-variation-row {
    display: block;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    border-radius: 6px;
    background-color: rgb(255, 255, 255);
    border:1px solid #81AA68;
    

}

.kwo-variation-row .quantity {
    font-size:x-small;
} 

 .kwo-variation-row button.single_add_to_cart_button.button.alt {
    font-size:small;
    background-color:#81AA68;
}

.kwo-variation-row .cart {
    display: flex;
}

.kwo-variation-data {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 1rem
}

.kwo-variation-data.open {
    max-height: 500px; /* or auto with JS */
    transition: max-height 1s ease;
}

.kwo-product_descrip 
 {  
    text-align: left;
    padding:10px;
  
}



.kwo-add-to-cart {
    float:left;
}
.kwo-select{
    text-align: center;
    font-size: larger;
    color: #fff;
    background-color: #06b480;
    /*max-width:600px;*/
    margin:10px auto

}

.grid2{
    display: grid;
    grid-template-columns: 120px auto;
    gap: 6px;
}

.grid3{
    display: grid;
    grid-template-columns: 120px auto;
    gap: 6px;
}

/* Row striping: rows 1, 3, 5... */
.grid2 > :nth-child(4n + 1),
.grid2 > :nth-child(4n + 2) {
    background: #f2f2f2;
}
/* Row striping: rows 1, 3, 5... */
.grid3 > :nth-child(4n + 3),
.grid3 > :nth-child(4n + 4) {
    background: #f2f2f2;
}

.hide-mobile {
    display: block;
}

@media (max-width: 850px) {
    .hide-mobile {
        display: none !important;
    }
        .show-mobile {
            display: block !important;
        }   
    
}

.show-mobile {
    display: none;
}

/* Hide the native radio */
.kwo-variation-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Wrapper label must be positioned */
.kwo-variation-row {
    position: relative;
    display: flex;
    align-items: center;
    /*padding: 10px 10px;*/
}

.kwo-variation-title {
    flex: 1; /* takes up remaining space */
    text-align: left;
}

.kwo-right {
    margin-left: auto;
    text-align: right;
    min-width: 80px; /* optional: keeps it tidy */
}

/* Tick box on the right */
/* Hide the native radio */
.kwo-variation-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #333;
    border-radius: 4px;
    margin-left: 10px;
    margin-right: 10px;
    box-sizing: border-box;
    position: relative;
}


.kwo-variation-header {
    font-size: larger;
    font-weight: bold;
    margin: 1em 0;
border-radius: 6px;
    text-align: center;
    width:100%;
    background-color: #07986c;
     color:#fff
}
.kwo-variation-header h3{
 color:#fff;
}

/* Empty tick box on the right */
.kwo-tick {
    width: 20px;
    height: 20px;
    /*border: 2px solid #333;*/
    border-radius: 4px;
    margin-left: 10px;

    display: inline-block;
    box-sizing: border-box;
   
}

/* When selected → show tick */
.kwo-variation-row input:checked ~ .kwo-tick::after {
    content: "✓";
    font-size: 18px;
    font-weight: bold;
    color: #2c7a2c;
    position: relative;
    top: -2px;
    left: 3px;
}

/* Highlight the selected row */
.kwo-variation-row:has(.kwo-variation-radio:checked) {
    border: 2px solid #2c7a2c;
    border-radius: 6px;
    background: #f6fff6;
}

.kwo-additional-info-header {
    font-size: larger;
    font-weight: bold;
    margin: 2em 0 1em 0 ;
border-radius: 6px;
    text-align: center;
    width:100%;
    background-color: #4a5b6e;
    
}
.kwo-additional-info-header H3{
 color:#fff;
}

.kwo-additional-info{
    font-size: smaller;
    color: #555;
    border:#000 1px solid;
    padding: 0.5em;

}
.variation-data{
    display:none;
}

.kwo-sample-request {
    margin-top: 2em;
    text-align: right;
}