:root {
    --primary-font: "Roboto", sans-serif;
    --light-black: #363533;
    --black: #292929;
    --white: #fff;
    --yellow: #ffc82e;
    --gray: #afafaf;
    --light-gray: #f5f5f5;
    --bg-brand: #ebebeb;
    --text-gray: #a9a9a9;
    --bg-powered: #3a3a3a;
    --bg-breadcrumb: #f0f0f1;
    --trans: all 0.5s ease-in-out;
}

a, a:hover, a:active{
    text-decoration: none;
}

select:focus-visible, input, textarea{
    outline: none;
}

h1{
    font-size: 25px;
}

*, body{
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 400;
    position: relative;
}

.webkit{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.no-padding{
    padding: 0;
}

img{
    max-width: 100%;
}

#notification{
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 50%;
    transform: translatex(-50%);
    background-color: var(--white);
    padding: 20px;
}

.empty{
    padding: 30px;
}

body:not(.common-home) article{
    background-color: var(--white);
}

header .top{
    background-color: var(--light-black);
    color: var(--gray);
    padding: 8px 0;
}

header .top a{
    color: var(--yellow);
}

header .top .infor span:first-of-type{
    border-right: 1px solid var(--gray);
}

header .top span{
    padding: 0 8px;
}

header .top span, header .top a{
    font-size: 12.5px;
}

header .main{
    background-color: var(--black);
    padding: 40px 0;
}

header .main .row div.col-md-4{
    text-align: center;
}

header .main .row div.col-md-4:first-of-type{
    text-align: left;
}

header .main .row div.col-md-4:last-of-type{
    text-align: right;
}

header .menu{
    background-color: var(--yellow);
}

header.header-fix .menu{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    display: block;
    z-index: 99;
}

.box-search-top{
    position: relative;
}

.box-search-top input{
    width: 100%;
    padding: 7px 15px;
    font-size: 13px;
}

.box-search-top button{
    position: absolute;
    top: 0;
    right: 0;
    background-color: unset;
    border: none;
}

.box-search-top i{
    color: #ebebeb;
    font-size: 20px;
    padding: 7px;
}

#cart {
    color: var(--white);
    position: relative;
}

#cart .content{
    position: absolute;
    background-color: var(--white);
    top: calc(100% + 20px);
    right: 0;
    color: var(--black);
    display: none;
    z-index: 99;
}

#cart .content ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.cart-inner-icon{
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.cart-inner-icon svg{
    fill: var(--gray);
    height: 35px;
    width: auto;
}

.cart-inner-icon .cart-items{
    position: absolute;
    right: -25px;
    top: -10px;
    border-radius: 50%;
    background-color: var(--yellow);
    color: var(--black);
    width: 35px;
    height: 35px;
    display: inline-block;
    text-align: center;
    line-height: 35px;
}

.mini-cart{
    padding: 20px;
}

.mini-cart li{
    align-items: center;
}

.mini-cart li a{
    color: var(--black);
    font-weight: 600;
}

.mini-cart .total{
    color: red;
}

.mini-cart-total{
    background-color: var(--light-gray);
    padding: 20px;
}

.mini-cart-total b{
    color: red;
}

.mini-cart-total ul li:last-of-type{
    display: none;
}

article.check-out{
    padding-top: 0 !important;
}

article.check-out .box-info p{
    margin-bottom: 5px;
    margin-top: 20px;
}

article.check-out .buttons{
    text-align: right;
}

article.check-out .buttons input{
    background-color: var(--yellow);
    border: none;
    padding: 10px 30px;
    margin-top: 30px;
}

article.check-out .pay-info label{
    background-color: var(--light-gray);
    padding: 10px;
    margin-top: 10px;
    display: block;
}

#cart .checkout{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#cart .checkout a{
    padding: 15px;
    width: 50%;
    text-align: center;
}

#cart .checkout a:first-of-type{
    background-color: var(--black);
    color: var(--white);
}

#cart .checkout a:last-of-type{
    background-color: var(--yellow);
    color: var(--black);
}

article.check-out h2{
    margin-top: 50px;
    margin-bottom: 30px;
}

.check-out-wrap table{
    background-color: var(--white);
    padding: 20px;
}

.check-out-wrap table th, .check-out-wrap table td{
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid var(--bg-brand);
}

.check-out-wrap table th{
    font-weight: 600;
}

.check-out-wrap table tr>th:first-of-type{
    text-align: left;
}

.check-out-wrap .mb-cart td:first-of-type{
    padding-top: 30px;
}

.check-out-wrap .mb-cart td{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.check-out-wrap .mb-cart td div:first-of-type{
    text-align: left;
    font-weight: 600;   
    color: var(--black);   
}

.check-out-wrap .mb-cart tr:nth-child(even){
    background-color: var(--light-gray);    
}

.check-out-wrap .item-pro-cart i{
    color: red;
}

.check-out-wrap .item-pro-cart{
    margin: 0;
    align-items: center;
}

.check-out-wrap .item-pro-cart>div:last-of-type{
    text-align: left;
}

.check-out-wrap .ship-info tr:first-child td, .check-out-wrap tr:nth-child(2) td{
    text-align: left;
}

.check-out-wrap .ship-info ul{
    margin: 0;
    padding: 10px 10px 10px 30px;
}

.check-out-wrap .ship-info a{
    display: block;
    padding: 10px;
    background-color: var(--black);
    color: var(--white);
}

.check-out-wrap .ship-info a:last-child{
    background-color: var(--yellow);
    color: var(--black);
    margin-top: 15px;
}

.check-out-wrap .ship-info tr:first-of-type td:last-of-type{
    text-align: right;
}

.child_cart_detail {
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--bg-breadcrumb);
    padding: 15px 0;
}

.child_cart_detail a{
    color: var(--black);
}

.child_cart_detail:last-of-type{
    border: none;
}

.top-tool{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 5px 0;
}

.slideshow{
    position: relative;
}

.slideshow button{
    color: var(--yellow);
    border: none;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 40px;
    height: 40px;
}

.slick-slider button{
    transition: var(--trans);
    z-index: 99;
}

.slideshow button.prev {
    left: 10px;
}

.slideshow button.next {
    right: 10px;
}

.slideshow i{
    font-size: 25px;
}

.slick-slider>button:hover {
    border: var(--yellow) 1px solid;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

#content_maintop{
    margin-bottom: 50px;
}

article{
    background-color: var(--light-gray);
}

article section{
    margin-bottom: 30px;
}

article #content_mainbottom section:last-of-type{
    margin-bottom: 0;
}

.box-heading{
    border-bottom: #ebebeb 1px solid;
    padding-bottom: 10px;
    position: relative;
}

.box-heading a{
    text-transform: uppercase;
    color: var(--black);
    font-size: 18px;
    font-weight: 600;
    border-bottom: 3px solid var(--yellow);
    padding: 10px 20px 10px 0;
}

.heading{
    background-color: var(--light-black);
    padding: 15px 20px;
    position: relative;
}

.heading a{
    color: var(--yellow);
    text-transform: uppercase;
}

.heading:before{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 25px solid var(--yellow);
    border-left: 25px solid transparent;
}

.special-heading{
    margin-bottom: 40px;
}

.special-heading a{
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--yellow);
    border-bottom: 3px solid var(--white);
    padding-bottom: 10px;
}

ul.main-cate{
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: var(--white);
}

ul.main-cate li{
    border: 1px solid #ebebeb;
    padding: 15px 20px;
    border-top: none;
}

ul.main-cate i{
    padding-right: 10px;
}

ul.main-cate a{
    color: var(--black);
}

.slides button.slick-arrow{
    position: absolute;
    top: -35px;
    border: 1px solid var(--yellow);
    color: var(--yellow);
    background-color: unset;
    font-weight: 500;
}

.slides button.prev{
    right: 30px;
}

.slides button.next{
    right: 0;
}

section.banners button.prev{
    left: 0;
    right: unset;
}

section.banners button.slick-arrow{
    top: 50%;
    transform: translateY(-50%);
}

figure.setting{
    background-color: var(--white);
    border: 1px solid var(--light-gray);
    padding: 25px;
    margin-top: 30px;
    position: relative;
    text-align: center;
}

figure.brand{
    background-color: unset;
    border: unset;
    padding: 0;
}

section.banners{
    background-color: var(--bg-brand);
}

figure.setting.row{
    margin: 0;
    padding: 10px;
}

figure.setting .product-onsale{
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

figure.setting .product-onsale:before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 60px solid var(--yellow);
    border-right: 60px solid transparent;
}

figure.setting .product-onsale span{
    position: relative;
    padding: 8px;
    display: inline-block;
    rotate: -45deg;
    font-size: 13px;
}  

figure.setting img{
    display: inline-block;
}

figure.setting figcaption{
    position: relative;
    margin-top: 30px;
} 

figure.row figcaption{
    margin-top: 0;
} 

.cate-combo{
    padding-bottom: 30px;
}

.cate-combo .slick-list{
    padding-top: 30px;
}

.cate-combo .box-heading{
    margin-top: 30px;
}

figure.setting figcaption h3{
    line-height: 20px;
    -webkit-line-clamp: 2;
    height: 46px;
    margin-bottom: 10px;
}

figure.new figcaption{
    text-align: justify;
}

figure.new figcaption .excerpt{
    -webkit-line-clamp: 4;
}

figure.new figcaption p.date{
    color: var(--gray);
    font-size: 12px;
}

figure.new figcaption h3 a{
    font-weight: 600;
}

figure.setting figcaption h3 a{
    color: var(--black);
    font-size: 15px; 
}

figure.setting.row figcaption h3 a{
    font-size: 14px;
}

.price span{
    color: red;
    font-size: 17px;
    padding-right: 10px;
}

.price del{
    color: var(--gray);
}

figure.setting.row figcaption span{
    font-size: 15px;
}

figure.setting .cart{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    transition: .5s;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    transform: scaleY(0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

figure.setting:hover .cart{
    opacity: 1;
    transform: scaleY(1);
}

figure.setting .cart button{
    border: none;
    padding: 6px 10px;
    margin: 5px;
}

figure.setting .cart button:first-of-type{
    background-color: var(--yellow);
}

figure.setting .cart button:last-of-type{
    background-color: var(--white);
}

#column-left .slick-slider button, #column-right .slick-slider button{
    margin-right: 10px;
}

#content_mainbottom .latest-product{
    text-align: center;
    padding: 100px 0;
}

.read-more{
    font-style: italic;
    color: var(--gray);
    font-size: 12px;
    margin-top: 10px;
    display: block;
}

footer{
    background-color: var(--black);
    color: var(--white);
}

footer .row div{
    margin-top: 40px;
}

footer .row div:last-of-type{
    margin-bottom: 40px;
}

footer h3{
    margin-bottom: 30px;
}

footer h3 span{
    border-bottom: 2px solid var(--white);
    padding-bottom: 10px;
    display: inline-block;
    font-size: 17px;
    font-weight: 400;
    text-transform: uppercase;
}

footer p{
    margin-top: 30px;
    font-size: 13px;
    color: var(--text-gray);
}

footer ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

footer li{
    padding-bottom: 10px;
}

#powered{
    background-color: var(--bg-powered);
    color: var(--text-gray);
}

#powered .row{
    align-items: center;
}

#powered .row div{
    padding-top: 10px;
    padding-bottom: 10px;
}

#powered a{
    color: var(--text-gray);
    font-weight: 600;
}

#powered svg{
    width: 40px;
    height: auto;
}

footer li a{
    color: var(--text-gray);
}

.scroll-head{
    position: fixed;
    right: 2rem;
    bottom: 1rem;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.scroll-head.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-head i{
    color: var(--yellow);
    font-size: 35px;
}

article.products>.container>.row>div.col-12{
    margin-top: 30px;
}

article.products .slick-prev:before, article.products .slick-next:before, .modal-content .slick-prev:before, .modal-content .slick-next:before{
    color: var(--yellow);
    font-size: 30px;
}

.slider-nav>button:hover{
    border: unset;
}

article.products .slick-slide{
    text-align: center;
}

.slider-nav img {
    display: inline-block;
    text-align: center;
    padding: 20px 10px;
}

.slider-nav{
    padding: 0 30px;
}

.slider-nav button{
    width: 30px;
    height: 30px;
}

.slider-nav button.slick-prev{
    left: 0;
}

.slider-nav button.slick-next{
    right: 0;
}

button.btn-close{
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: unset;
    border: unset;
}

.breadcrumb{
    background-color: var(--bg-breadcrumb);
    margin: 0;
    padding: 20px 0;
}

.breadcrumb a{
    padding: 0 10px;
    color: var(--black);
}

.breadcrumb a:first-of-type{
    padding-left: 0;
}

.top-row select{
    padding: 4px 25px 4px 5px;
    height: auto;
    border-radius: 0;
    font-size: 90%;
    background-color: transparent;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    cursor: pointer;
}

.posted_in a{
    color: var(--gray);
    text-decoration: underline;
}

.star{
    margin-bottom: 10px;
}

.star:before{
    content: '\f005 \f005 \f005 \f005 \f005';
    font-family: 'Font Awesome 6 Free';
    color: var(--yellow);
}

.product-cnt .price span{
    font-size: 20px;
    font-weight: 600;
}

.spinners-added{
    position: relative;
}

.spinners-added button{
    position: absolute;
    border: none;
    background: unset;
    z-index: 99;
    top: 50%;
    transform: translateY(-50%);
}

.spinners-added button.plus{
    right: 15px;
}

.spinners-added button.minus{
    left: 15px;
}

.spinners-added input{
    width: 100%;
    text-align: center;
    padding: 10px;
    border: 1px solid #e5e5e5;
}

article.check-out .spinners-added input{
    width: 120px;
}

button.btn-v{
    background-color: var(--yellow);
    color: var(--black);
    border: none;
    padding: 10px;
    width: 100%;
}

article.check-out .info a{
    color: var(--black);
    font-weight: 700;
}

article.check-out .price-cart{
    color: red;
}

.short-desc{
    margin-top: 15px;
    margin-bottom: 30px;
}

.btn-cart .row div{
    margin-bottom: 20px;
}

bdi, .social-share{
    margin-bottom: 5px;
    display: block;
}

bdi a, .social-share a{
    color: var(--gray);
}

.desc-back ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.desc-back strong{
    font-weight: 500;
}

.pay{
    background-color: var(--light-gray);
    text-align: center;
    padding: 5px;
    margin-top: 20px;
}

.pay svg{
    width: 60px;
    padding: 5px;
}

.desc{
    margin-top: 30px;
}

.desc .box-heading{
    margin-bottom: 30px;
}

body:not(.common-home) article{
    padding-top: 40px;
}

article.news .content-mid{
    padding: 50px;
    box-shadow: 2px 2px 15px 2px #e9e9e9;
    text-align: justify;
}

.box-quick-view .modal .modal-dialog{
    max-width: 1000px;
}

.pagenumber .links{
    padding: 0;
}

ul.pagination{
    margin-bottom: 0;
}

ul.pagination li{
    padding: 10px 20px;
    margin-right: 10px;
    background-color: var(--yellow);
    margin-top: 20px;
}

ul.pagination a{
    color: var(--black);
}

section.new-wrap figure.setting{
    padding: 0;
}

section.new-wrap figure.setting figcaption{
    padding: 20px;
}

.new-wrap .results{
    margin-top: 20px;
}

.iframe-map, .iframe-map iframe{
    width: 100%;
    height: 100%;
}

article.contact form{
    background-color: var(--light-gray);
    padding: 30px;
}

article.contact form input, article.contact form textarea{
    border: 1px solid #e7e7e7;
    width: 100%;
    padding: 10px;
}

article.contact form p{
    margin-top: 20px;
    margin-bottom: 5px;
}

.contact-heading a{
    font-size: 25px;
    font-weight: 400;
    color: var(--black);
}

article.contact form .over-btn input{
    background-color: var(--yellow);
    margin-top: 20px;
}

.contact-cnt{
    display: flex;
    margin-top: 50px;
}

.contact-cnt div{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 50%;
    padding: 30px;
}

.contact-cnt div:nth-child(even){
    background-color: #f2f2f2;
}

.contact-cnt div:nth-child(odd){
    background-color: #f6f6f8;
}

.contact-cnt i{
    margin-right: 20px;
    font-size: 16px;
    border: 1px solid var(--yellow);
    color: var(--yellow);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}

.contact-cnt span{
    width: calc(100% - 70px);
}

.contact-cnt a{
    color: var(--black);
}

body:not(.common-home) footer{
    margin-top: 40px;
}

.success .desc a{
    color: var(--black);
    font-weight: 600;
}

.success .buttons{
    margin-top: 30px;
}

.success .buttons a{
    background-color: var(--yellow);
    color: var(--black);
    padding: 10px 30px;
}

.quick-info {
    text-align: left;
}

.box-quick-view .quick-slide, .box-quick-view figcaption{
    padding-top: 20px;
    padding-bottom: 20px;
}

@media (min-width: 577px){
    #column-left{
        padding-right: 20px;
    }

    #column-right{
        padding-left: 20px;
    }

    footer .row div{
        padding: 0 20px;
    }

    .product-cnt{
        padding-left: 60px;
    }

    section.product-wrap figure.setting, section.new-wrap figure.setting{
        margin-top: 0;
        margin-bottom: 0;
    }

    .contact-cnt div{
        width: 25%;
    }

    .check-out-wrap .ship-info{
        padding-left: 30px;
    }

    .your-order{
        padding-left: 50px;
    }
}

@media (max-width: 576px){
    #menu .sub-menu{
        position: relative;
        width: 100%;
    }

    .box-search-top button{
        position: relative;
        padding: 0;
    }

    .box-search-top i{
        font-size: 17px;
    }

    .cart-inner-icon svg{
        height: 25px;
    }

    .cart-inner-icon .cart-items{
        border: none;
        width: 19px;
        height: 19px;
        line-height: 19px;
        top: -2px;
        right: -12px;
        font-size: 9px;
    }

    header .main a.logo{
        display: block;
        text-align: center;
    }

    .check-out-wrap .ship-info tr {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .check-out-wrap .ship-info tr:first-of-type td{
        width: 50%;
    }

    .check-out-wrap .ship-info tr:last-of-type td{
        width: 100%;
    }
}