.main {width: 100%;;min-height: 100vh;color: var(--color-text);padding-bottom: 50px;}
.main h2 {font-size: 40px;}
.top-main {width: 100%;padding: 120px 0;}

.order-tool {width: 100%;padding:  20px;max-height: 1200px;color: rgb(98, 100, 107);display: inline-table;}
.filter-by {width: 50%;max-width: 250px;float: left;position: relative;}
.other-filter {width: 50%;max-width: 500px;float: right;position: relative;}
.filter-by label {width: 100%;text-align: left;font-size: 18px;max-width: 175px;}
.filter-by label i {font-size: 14px;margin-left: 5px;}
.sorting {position: absolute;width: 100%;background-color: white;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;padding:10px;
top: 40px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        z-index: 999;}
.opt-s {
    padding: 5px 0;color: rgb(82, 84, 90);text-align: left;transition-duration: 0.1s;
}
.opt-s:hover {color: var(--roy);}
.filter-by:hover .sorting {
    top: 115%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  visibility: visible;
}
.ds-g {display: inline-block;border: 0;background-color: transparent;margin-left: 10px;color: rgb(98, 100, 107);
    font-size: 18px;
}
.ds-g-act , .ds-g:hover {color: var(--color-text); text-shadow: var(--roy) 1px 0 10px;}
.search-ico {float: right; background-color: transparent;border: 0;display: flex;align-items: center;
font-size: 18px;color: rgb(98, 100, 107);
}
.search-ico i {margin-right: 5px;}
.search-ico:hover i {text-shadow: var(--roy) 1px 0 10px;}

.b-pop {width: 100%;height: 100%;position: fixed;top: 0;right: 0;background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;display: none;}
.pop {
    max-width: 600px;position: fixed;width: 95%;top: 30%;
    left: 50%; transform: translateX(-50%) translateY(-50%);
    padding:25px 15px;border-radius: 30px;background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;z-index: 1000;
    max-width: 95vh;
}
.pop h3 {text-align: left;font-size: 19px;}
.pop input {width: 85%;padding: 10px;border-radius: 5px;border:1px solid silver ;
border-right: 0;border-bottom-right-radius: 0;border-top-right-radius: 0;
}
.pop button {padding: 10px;width: 15%;display: inline-table;border-radius: 5px;border:1px solid silver ;float: right;
    border-bottom-left-radius: 0;border-top-left-radius: 0; background-color: var(--roy-opt);color: var(--color-text);}
.pop button:hover {background-color: var(--roy);color: white;}
.dropsearch {width:85%;position: absolute;border-bottom-left-radius: 10px;left: 0;
    border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: white;
    padding: 10px;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;display: none;
}
.searchshow {width: 100%;padding: 8px;color: var(--color-text);}
.searchshow img {width: 35px;height: auto;border-radius: 4px;margin-right: 5px;}
.searchshow:hover {background-color: var(--roy-opt);}
.pop .close {width: 35px;height: 35px;border-radius: 100%;float: right;
     background-color: rgba(255, 255, 255, 0.9);cursor: pointer;position: absolute;top: -15px;right: -15px;border: 1px solid white;}
.pop .close:hover {background-color: white;border: 1px solid silver; }
/* product */
 .display5 , .display-list {display: none;}
.display3 .product {width: 95%;max-width: 350px
    ;display: inline-table !important;margin: 20px 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.display5 {display: none;}
.display5 .product {width: 95%;max-width: 200px;display: inline-table !important;margin: 20px 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.display-list .product {width: 47%;max-width: 600px;display: inline-table !important;margin: 20px 10px;
     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}

.product .product-top  {width: 100%;position: relative;}
.display-list .product .product-side  {width: 50%;position: relative;display: inline-table;}
.display-list .product .product-side:last-child {float: right;padding: 20px 10px;
    height: 300px;}
.display-list .rate {float: left;}

.display3 .product img {width: 100%;height: 400px !important;object-fit:cover;background-color: rgba(245, 245, 245, 0.6);}
.display5 .product img {width: 100%;height: 250px !important;object-fit:cover;background-color: rgba(245, 245, 245, 0.6);}
.display-list .product img {width: 100%;height: 300px !important;object-fit:cover;background-color: rgba(245, 245, 245, 0.6);}


.prod-color {position: absolute;bottom: 5px;right: 8px;display: inline;max-width: 40px;}

.display-list .prod-color {position: relative;display: inline-table;width: 100% !important;
    max-width: 100% !important;position: absolute;bottom: 10px;}
    
.display-list .prd-cl-cover {display: inline-block;margin: 0 10px;}

.prd-cl-cover {width: 20px;height: 20px;position: relative;border-radius: 100%;
    margin: 8px 10px;transition-duration: 0s; cursor: pointer;
}
.prd-cl {width: 12px;height: 12px;border-radius: 100%;
    position: absolute; top: 50%;
    left: 50%; transform: translateX(-50%) translateY(-50%);
    border: 0.2px solid rgba(0, 0, 0, 0.2);
}
.prd-cl-act {border: 1px solid black;transition-duration: 0;}

.product h3 {font-size: 25px;margin: 5px 0;}
.product h5 {font-size: 20px;color: var(--roy);}

.product p {font-size: 16px;color: rgb(124, 122, 122);text-align: left;word-break: break-all;}
.display-list .product h3 {font-size: 22px;margin: 3px 0;text-align: left;}
.display-list .product h5 {font-size: 17px;color: var(--roy);text-align: left;}


.display5 .product h3 {font-size: 17px;margin: 3px 0;}
.display5 .product h5 {font-size: 15px;color: var(--roy);}


.product h5 s {font-size: 15px ;color: rgb(156, 154, 167);margin: 0 5px;}
.product .sale-dis {position: absolute;top: 5px;right: 4px;max-width: 60px;padding: 1.5px 7px;
background-color: var(--roy-opt);color: var(--roy);font-size: 14px ;border-radius: 20px;
}
.display-list .product .sale-dis {position: absolute;top: 5px;right:auto;max-width: 60px;padding: 1.5px 7px;
    background-color: var(--roy-opt);color: var(--roy);font-size: 14px ;border-radius: 20px;left: 4px;
}
.product-bot {padding: 20px 0;}
.prod-opt {position: absolute;width: 45px;height: 45px;line-height: 45px;background-color: white;
border-radius: 100%;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;left: -10px;cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    visibility: hidden;

}
.display-list .prod-opt  {position: relative;display: inline-table;visibility: visible;opacity: 1;
    left: auto;top: auto;margin:0;width: 35px;height: 35px;line-height: 35px;
    border: 1px solid var(--roy-opt);font-size: 13px;margin-right: 8px;
    float: left;box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 0px 0px;
    border-radius: 20% !important;
}
.display5 .prod-opt {width: 35px;height: 35px;font-size: 14px;line-height: 35px;}
.prod-opt:hover , .act-wish , .act-cart {background-color: var(--roy-opt);color: var(--roy);}
.add-to-cart {top: 10px;  -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
.add-to-wish  {top: 65px;  -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;}
.view-prod  {top: 120px;  -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;}
.display5 .add-to-cart {top: 7px !important;}
.display5 .add-to-wish  {top: 47px !important;}
.display5 .view-prod  {top: 87px !important;}
.display5 .product-bot {text-align: left;padding: 5px;}
.product-top:hover  .add-to-cart{
    top: 10px;
   left: 8px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  visibility: visible;
}
.product-top:hover  .add-to-wish {
    top: 65px;
   left: 8px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  visibility: visible;
}
.product-top:hover  .view-prod {
    top: 120px;
   left: 8px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  visibility: visible;
}

.rate i {display: inline-flex;font-size: 14px ; margin: 0 2px;}
.rate-no-act {color: rgba(180, 180, 190, 0.6);}
.rate-act {color: rgb(255, 196, 0);}





@media only screen and (max-width: 900px ) {
.display-list .product {width: 95%;margin: 20px 0;}

}

@media only screen and (max-width: 700px ) {
  .display3 .product  {display: block;width: 95%;max-width: 400px;margin:20px 0 ;}
}
@media only screen and (max-width: 450px ) {
.order-tool  {padding: 20px 0;}

.display5 .product {width: 47%;max-width: 200px;margin: 20px 0px;}
.main {padding: 50px 0;}
.display5 .product h3 {font-size: 15px;margin: 2px 0;}
.display5 .product h5 {font-size: 13px;}
.display5 .product s {font-size: 11px;}
.display-list .product p {font-size: 13px;}
.display5-list .product h3 {font-size: 16px;margin: 2px 0;}
.display-list .product h5 {font-size: 14px;}
.display-list .prod-color {position: relative;bottom: auto;}
.display-list .prd-cl-cover {margin: 0 5px;}
.search-ico {padding-right: 10px;}
.search-ico span {display: none;}
}
@media only screen and (max-width: 350px ) {
.display5 .product img {height: 200px ;}
}
@media only screen and (max-width: 300px ) {
.display5 .product img {height: 180px ;}
}