*{ box-sizing: border-box;}
/*Image by <a href="https://www.freepik.com/free-psd/beauty-care-banner-design-template_20674680.htm#query=skin%20care%20banner&position=0&from_view=search&track=ais&uuid=2377679d-e74c-41b9-a896-d2b1df82fa79">Freepik</a>*/

.wporg_quick_edit_field, .wporg_bulk_edit_field {
    width: 100%;
}

.star-rating span {
font-family: star !important;
color:orange;
}
/*.content-area{*/
/*    max-width:80%;*/
/*    margin:auto;*/
/*    padding:20px 5px;*/
/*}*/
/*#sidebar{*/
/*    display:none;*/
/*}*/
#content article{
    max-width:80%;
    margin:auto;
}
.woocommerce-form-login__submit,.woocommerce-form-register__submit{
    background-color:#121212 !important;
    color:#fff !important;
    border:1px solid #121212 !important;
    border-radius:0 !important;
    padding:10px 15px !important;;
}

.woocommerce-form-login__submit:hover{
    background-color:#fff !important;
    color:#121212 !important;
}
.woocommerce-form-register__submit:hover{
    background-color:#fff !important;
    color:#121212 !important;
}
.woocommerce-form-login input{
    padding:10px 15px !important;
    border-radius:0 !important;
}
.cart-icon-container {
    position: relative;
}

.cart-icon {
    display: inline-block;
    text-decoration: none;
    color: #333; /* Change the color as needed */
}
.cart-item-count {
    position: absolute;
    /*top: 0;*/
    /*right: 0;*/
    background-color:#121212; /* Change the background color as needed */
    color: #fff; /* Change the text color as needed */
    border-radius: 50%;
    padding: 2px 4px;
    font-size: 10px;
}


.wc-block-cart .wc-block-cart__submit-container {
   border:1px solid #000;
  
}
.wc-block-cart .wc-block-cart__submit-container a {
    text-decoration:none;
    color:#000;
    background-color:#fff;
}
.wc-block-cart .wc-block-cart__submit-container a:hover {
    color:#fff;
    background-color:#000;
}
.wc-block-checkout__actions_row button{
      border:1px solid #000;
      color:#fff;
    background-color:#000;
    
}
.wc-block-checkout__actions_row button:hover{
    color:#000;
    background-color:#fff;
}
.dsjs-content{
     max-width:80%;
    margin:0 auto 20px;
}



ul.products{
    padding:5px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content:space-between !important;
    
}
li.product {
    background-color:#fff;
    border-radius:5px;
    margin: 1%;
    width: 19%;
     display:flex;
    flex-direction:column;
    margin: 0 5px 20px; /* Adjust margins as needed */
    box-sizing: border-box;
    font-family: 'Trebuchet MS', sans-serif;
    padding:10px;
    background-color:#fff;
    justify-content:space-between;
}
@media screen and (max-width: 767px) {
    li.product {
       width:45% !important;
       margin:5px auto !important;
    }
    #content article{
    max-width:95%;
    margin:auto;
}
        
}

.woocommerce ul.products li.product .button{
    background-color:#fff !important;
    border:1px solid #121212 !important;
    color:#121212 !important;
    border-radius:0 !important;
    text-align:center !important;
}

.woocommerce ul.products li.product .button:hover {
    background-color:#121212 !important;
    color:#fff !important;
}

.woocommerce #review_form #respond .form-submit input{
     background-color:#fff !important;
    border:1px solid #121212 !important;
    color:#121212 !important;
    border-radius:0 !important;
    text-align:center !important;
    width:250px;
}
.woocommerce #review_form #respond .form-submit input:hover{
     background-color:#121212 !important;
    color:#fff !important;
}
/*product grid*/
.product-grid {
    max-width:80%;
    margin:auto;
    padding:5px;
    display: flex;
    flex-wrap: wrap;
}


h2.section-heading{
    max-width:80%;
    margin:auto;
    padding:20px;
   font-family: 'Trebuchet MS', sans-serif;
   font-weight:500;
   
}

 .product-grid .product-item {
    background-color:#fff;
    border-radius:5px;
    margin:5px auto;
    width: 19%;
     display:flex;
    flex-direction:column;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', sans-serif;
    padding:10px;
    background-color:#fbfbfb;
    justify-content:space-between;
}
 .product-grid .product-item a{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
}

  .product-grid .product-item .latest-product-image-container{
    width:100%;
    margin:0;
    padding:0;
}
 .product-grid .product-item .latest-product-image-container img{
    width:100%;
    height:auto;
}
   .product-grid .product-item a{
    font-weight:700;
    text-decoration: none !important;
    color:#000;
}
 .product-grid .product-item .price-row{
   width:100%;
   margin:0;
  
}
 .product-grid .product-item .price-row >div{
  flex:1;
}
 .product-grid .product-item .price{
   padding:5px;
   font-weight:550;
    
 }


.prod-title{
    display: block;
    display: -webkit-box;
    max-width: 100%;
    height: auto;
    margin: 0;
    -webkit-line-clamp: 2; /* Adjust the number of lines to truncate */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size:14px;
    font-weight:400;
    color:#333;
}

/*product gris in mobile*/
@media screen and (max-width: 767px) {
    #content article .entry-content{
        max-width:98%;
    }
    h2.section-heading{
        max-width:99%;
        background-color:#f9f4f4;
    }
    .product-grid {
        max-width:99%;
        margin:auto;
        padding:5px;
        display: flex;
        flex-wrap: wrap;
    }
    .product-grid .product-item {
       
        width: 50%;
       
    }
    .dsjs-content{
         max-width:100%;
        margin:0 auto 20px;
    }
    
    .dsjs-content .cont-col-2 .left-col{
           display:none;
        }
        .dsjs-content .cont-col-2 .right-col{
            padding:5px;
            }
            .bread-crumb{
                padding-left:5px;
            }
    .dsjs-content .cat-page-banner img{
        height:250px !important;
        }
        .post-8,.post-9{
            max-width:98%;
            margin:auto;
        }

        
}

/* Style for pagination container */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* Style for individual pagination links */
.pagination a {
    display: inline-block;
    padding: 10px 15px;
    background-color: #0073e6;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    margin: 0 5px;
    transition: background-color 0.3s;
}

/* Hover effect for pagination links */
.pagination a:hover {
    background-color: #005ab1;
}
.site-content{
    margin:0;
}
.dsjs-content .cat-page-banner{
    width:100%;
    margin:0;
    position:relative;
    
}
.dsjs-content .cat-page-banner img{
   width:100%;
    height:auto;
    margin:0;
}
.dsjs-content .cat-page-banner h2 {
  
    color:#fff;
    position:absolute;
    left:0;
    right:0;
    bottom:5%;
    text-align: center;
    padding:15px 25px !important;
    background-color:rgba(0,0,0,0.2);
}
.dsjs-content .cont-col-2{
     display: flex;
}
.dsjs-content .cont-col-2 .left-col{
        flex:2;
        padding:2px 10px 2px 0;
       
    }
.dsjs-content .cont-col-2 .right-col{
flex:8;
display:flex;
flex-direction:column;
}
.dsjs-content .cont-col-2 .left-col .side-cat-links {
        padding:5px 10px;
        background-color:#fdfdfd;
        border-radius:5px;
    }
    
    .woocommerce .woocommerce-ordering select {
        padding: 6px 15px !important;
    }
    
    
/*cat links side*/
    .product-categories {
        list-style: none;
        padding: 0;
    }
    
    .category-item {
        position: relative;
        margin-bottom:8px;
        /* Adjust the left padding for children categories */
    }
    
    .category-item a{
        font-size:18px;
        line-height:1.2;
        margin:auto;
        
    }
    .category-link {
        text-decoration: none;
        color:#333;
    }
    
    .toggle-icon {
        position: absolute;
        right: 0;
        top: 2px;
        cursor: pointer;
    }
    
    .child-categories {
        display: none;
    }
    
    .open .child-categories {
        display: block;
    }
    
    
    ul.child-categories {
        padding: 5px;
        list-style-type: none;
    }
/*blog template*/

.dsjs-content .cont-col-2 {
    display: flex;
}

.dsjs-content .cont-col-2 .left-col {
    flex: 2;
    padding: 2px 10px 2px 0;
}

.dsjs-content .cont-col-2 .right-col {
    flex: 8;
    display: flex;
    flex-direction: column;
}

.dsjs-content .cont-col-2 .left-col .side-cat-links {
    padding: 5px 10px;
    background-color: #fdfdfd;
    border-radius: 5px;
}
.post-grid {
width:100%;
margin:0;
padding:5px;
display: flex;
flex-wrap: wrap;
}

.post-grid article{
border:1px solid #f9f9f9;
padding:15px;
margin-top:0;
margin-bottom:40px;
background-color: #fff;
}
.post-grid article h2 a{
color:#333 !important;
text-decoration:none;
}
.post-container{
width:100%;
display:flex;
}
.post-col-1{
flex:2;
}
.post-col-1 img{
max-width:100%;
height:auto;
}
.post-col-2{
flex:5;
padding:0 20px;
font-family: Tahoma, Verdana, sans-serif;
font-size:16px !important;
color:#333 !important;
line-height:1.5;
}
.post-col-2 a{
color:#333!important;
text-decoration:none;
}

@media only screen and (max-width: 768px) {
    
    .dsjs-content .cat-page-banner img{
   object-fit:cover;
}
    .post-container{
    flex-direction:column;
    } 
    .post-grid article{ 
        padding:0;
        
    }
    .dsjs-content .cat-page-banner h2{
        text-align:center;
    }
}

.post-categories {
list-style: none;
padding: 0;
}

.category-item {
margin-left: 0; /* Remove default list item margin */
position: relative;
}

.toggle-icon {
position: absolute;
right: 0;
}

.child-categories {
display: none;
}

.category-item:hover .child-categories {
display: block;
}


.single-post-container{
max-width:60%;
margin:20px auto;
padding:18px;
}
.single-post-container article h2{
font-size:24px;
}
.single-post-container article .single-post-img{
width:100%;
}
.single-post-container article .single-post-img img{
width:100%;
height:auto;
}
.single-post-container article .entry-content{
width:100% !important;
margin:0 !important;
font-size:20px;
}
@media only screen and (max-width: 768px) {
.single-post-container{
max-width:100%;
margin:0 auto;
padding:18px;
}
.single-post-container article h2{
font-size:20px;
}
}
#content{
   min-height:100vh; 
}
.buying-basics-col{
   padding-right:60px !important;
   font-family:Helvetica, sans-serif !important; ;
}

@media only screen and (max-width: 768px) {
    .vendor-dashboard{
         max-width:95%;
         margin:auto;
         display:flex;
         flex-direction:column;
         justify-content:space-between;
     }
     .vendor-dashboard .navbar ul {
         width:100% !important;
            display:flex;
            flex-wrap:wrap;
     }
     .row-col-2{
         flex-direction:column;
     }
     .row-col-r{
        padding: 1px !important;
        margin: 5px !important;
        width: 100%;
     }
     .row-col-r form{
        display:flex;
         flex-direction:column;
     }
     .row-col-r form >input {
            padding: 5px;
        }
        #vendor-product-list {
            width: 100%;
        }
        
        .ceyl-th-1{
            width:25%;
        }
         .ceyl-th-2{
            width:50%;
        }
         .ceyl-th-3{
            width:25%;
        }
       .row-col-l {
            width: 100% !important;
            margin: 0 !important;
        }
      
         
     
    
}

 .refund-images{
        display:flex;
        flex-flow: row wrap;
        width:100%;
    }
      .refund-images>img{
          width:25%;
      }

.vendor-dashboard .navbar ul li a{
    text-decoration:none;
    color:#121212;
}
.vendor-dashboard .navbar ul li a:hover{
    color:rgb(0, 172, 191);
    
}

.icon-select-wrapper {
    display: flex;
    gap: 15px; /* Adds space between icons */
}

.icon-select-label {
    cursor: pointer;
}

.icon-select-icon {
    font-size: 24px;
    display: inline-block;
    padding: 10px; /* Adds padding around icons */
    border: 2px solid transparent; /* Default border is transparent */
    border-radius: 4px; /* Optional: adds rounded corners */
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.icon-select-icon.selected {
    border-color: #0073aa; /* Highlight color for selected icon */
    background-color: #f1f1f1; /* Background color for selected icon */
}

.icon-select-icon:hover {
    border-color: #0073aa; /* Hover state border color */
}