/*-----------------------------------------------------------------------------------
		Template Name: limupa - Digital Products Store ECommerce Bootstrap 4 Template
		Template URI: http://bootexperts.com
		Description: This is digital products store html5 template for eCommerce websites, nice and clean design;
		Author: HasTech
		Author URI: 
		Version: 1.0
-----------------------------------------------------------------------------------
		CSS INDEX
		===================
		01. Default Style
			1.1 Basic
			1.2 Transition
			1.3 Section Title
			1.4 Default Button
			1.5 Text Color
			1.6 Input
			1.8 Background Variation Set
			1.9 Animation
			1.10 All Navigation & Pagination
			1.11 Owl Carousel Box Shadow
			1.12 Li's Mobile Menu Customization 
			1.13 Modal Area
			1.14 Scroll Up
		02. Home Page One
			2.1 Header
			2.2 Slider
			2.3 Li's Static Top
			2.4 Product-area css
			2.5 Li's Banner
			2.6 Li's Laptop Features
			2.7 Li's Static Home Banner
			2.8 Li's Trending Products
				2.9 Footer
		03. Home Page Two
		04. Home Page Three
		05. Home Page Four
		06. Other Pages
			6.1 Li's Shop Page
			6.2 Li's Frequently Asked Question(FAQ)
			6.3 Li's Wishlist Page
			6.4 Li's Checkout Page
			6.5 Li's Login Register
			6.6 Li's Shopping Cart
			6.7 Li's Blog Page
			6.8 Li's Compare Page
			6.9 Li's Contact Pages
			6.10 Li's About Us Page
			6.11 Li's Shop Page
			6.12 Li's Single Product
			6.13 Single Product Carousel Page
			6.14 Single Product Sale Page
			6.15 Single Product Group Page
			6.16 Single Product Normal Page
			6.17 Single Product Affiliate Page
			6.18 Single Product Tab Style Left Page
			6.19 Single Product Tab Style Right Page
			6.20 Single Product Gallery Left Page
			6.21 Error 404 Page


-----------------------------------------------------------------------------------*/

/* Google Fonts------------------
	font-family: 'Poppins', sans-serif;
	font-family: 'Rubik', sans-serif;
*/
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Rubik:300,300i,400,400i,500,500i,700,700i,900,900i');
/*----------------------------------------*/
/*  01. Dfault Style
/*----------------------------------------*/
/*----------------------------------------*/
/*  1.1 Basic
/*----------------------------------------*/
body {
    color: #050505;
    font-family: 'Arial', 'sans-serif';
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    overflow-x: hidden;
}

a {
    color: #a4a4a4;
    transition: 0.3s ease-in-out;
}

    a:hover {
        color: #fed700;
    }

.img {
    max-width: 100%;
    transition: all 0.3s ease-out 0s;
}

.img-full {
    width: 100%;
    overflow: hidden;
    display: block;
    border-radius: 9px;
}

a:focus,
a:hover {
    color: #0278ff;
    text-decoration: none;
}

a,
button,
input {
    outline: medium none;
    color: #040404;
}

    button:focus {
        outline: none;
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    font-weight: 700;
    color: inherit;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 8px;
}

    h1 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a {
        color: inherit
    }

h1 {
    font-size: 20px;
    font-weight: 500;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 22px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

ul {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none
}

p {
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
    color: #000000;
    margin-bottom: 15px;
}

hr {
    margin: 60px 0;
    padding: 0px;
    border-bottom: 1px solid #eceff8;
    border-top: 0px;
}

    hr.style-2 {
        border-bottom: 1px dashed #f10;
    }

    hr.mp-0 {
        margin: 0;
        border-bottom: 1px solid #eceff8;
    }

    hr.mtb-40 {
        margin: 40px 0;
        border-bottom: 1px solid #eceff8;
        border-top: 0px;
    }

label {
    font-size: 15px;
    font-weight: 400;
    color: #626262;
}

*::-moz-selection {
    background: #4fc1f0;
    color: #fff;
    text-shadow: none;
}

::-moz-selection {
    background: #4fc1f0;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #4fc1f0;
    color: #fff;
    text-shadow: none;
}

.mark,
mark {
    background: #4fc1f0 none repeat scroll 0 0;
    color: #ffffff;
}

span.tooltip-content {
    color: #00a9da;
    cursor: help;
    font-weight: 600;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.fix {
    overflow: hidden;
}

.t-center {
    text-align: center;
}

.t-right {
    text-align: right;
}

.t-left {
    text-align: left;
}

.container {
    width: auto;
    max-width: 100%;
}

.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: #9ad5f5;
}

.nice-select .option:hover {
    color: #ffffff;
}

iframe {
    width: 100%;
    height: 300px;
}
/*----------------------------------------*/
/*  1.2 Transition
/*----------------------------------------*/
a.button::after,
a.button-small::after {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.share ul,
.share:hover ul {
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

a.button-border span,
a.button-border-white span,
input,
select,
textarea {
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}
/*----------------------------------------*/
/*  1.3 Section Title
/*----------------------------------------*/
.section-title > h3,
.section-title-2 > h3,
.section-title-2 > p {
    color: #ffffff;
    font-family: roboto;
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    line-height: 24px;
    margin-bottom: 34px;
    text-align: center;
}

.section-title-2 > h3 {
    color: #222222
}

.section-title > p,
.section-title-2 > p {
    color: #ffffff;
    font-style: italic;
    margin-bottom: 44px;
    text-align: center;
    font-size: 14px;
}

.section-title-2 > p {
    color: inherit;
    font-weight: 400;
}
/*----------------------------------------*/
/*  1.4 Default Button
/*----------------------------------------*/
button.li-btn {
    border: none;
    background: #00d7e7;
    color: #fcfbfb;
    font-size: 20px;
    width: 45px;
    border-radius: 0 2px 2px 0;
    height: 45px;
    line-height: 45px;
    position: absolute;
    right: -1px;
    top: -1px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

    button.li-btn:hover {
        background: #007bff;
        color: #ffffff;
    }

a.links,
a.links-2,
a.review-links {
    background: #00b5ff none repeat scroll 0 0;
    color: #242424;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    height: 50px;
    line-height: 50px;
    position: relative;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out 0s;
    width: 170px;
    text-align: center;
    border-radius: 6px;
}

    a.links:hover,
    a.links-2:hover {
        background: #007bff none repeat scroll 0 0;
        color: #fff;
    }

a.review-links {
    background: #0e73f6;
    color: #ffffff;
    width: 205px;
    height: 40px;
    line-height: 40px;
}

    a.review-links:hover {
        background: #fed700;
    }
/*----------------------------------------*/
/*  1.5 Text Color
/*----------------------------------------*/
.text-blue {
    color: #4FC1F0;
}

.text-white {
    color: #fff;
}

.text-black {
    color: #363636;
}

.text-theme {
    color: #f10;
}

.text-white h1,
.text-white p,
.text-white h2 {
    color: #fff;
}

.text-white {
    color: #fff;
}

.text-black {
    color: #363636;
}

.text-theme {
    color: #f10;
}
/*----------------------------------------*/
/*  1.6 Input
/*----------------------------------------*/
input {
    background: #eceff8;
    border: 2px solid #eceff8;
    height: 45px;
    box-shadow: none;
    padding-left: 10px;
    font-size: 14px;
    color: #626262;
    width: 100%;
}

select {
    width: 100%;
    background: #eceff8;
    border: 2px solid #eceff8;
    height: 45px;
    padding-left: 10px;
    box-shadow: none;
    font-size: 14px;
    color: #626262;
}

option {
    background: #fff;
    border: 0px solid #626262;
    padding-left: 10px;
    font-size: 14px;
}

input:focus {
    background: transparent;
    border: none;
    outline: none;
}

textarea {
    resize: vertical;
    background: #eceff8;
    border: 2px solid #eceff8;
    padding: 10px;
    width: 100%;
    font-size: 14px;
}

    textarea:focus {
        background: transparent;
        border: 2px solid #4FC1F0;
        outline: none;
    }

::-moz-placeholder {
    color: #444;
    font-size: 13px;
}

.input-group.divcenter.input-group .form-control {
    padding-left: 0px
}
/*----------------------------------------*/
/*  1.8 Background Variation Set
/*----------------------------------------*/
/*Home One | Slider Background Image*/
.bg-1, .bg-2, .bg-3 {
    background-image: url(images/slider/1.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 475px;
    width: 100%;
}

.bg-2 {
    background-image: url(images/slider/2.jpg);
}

.bg-3 {
    background-image: url(images/slider/3.jpg);
}
/*Home Two | Slider Background Image*/
.bg-4, .bg-5, .bg-6 {
    background-image: url(images/slider/4.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 475px;
    width: 100%;
}

.bg-5 {
    background-image: url(images/slider/5.jpg);
}

.bg-6 {
    background-image: url(images/slider/6.jpg);
}
/*Home Three | Slider Background Image*/
.bg-7, .bg-8, .bg-9 {
    background-image: url(images/slider/7.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 425px;
    width: 100%;
}

.bg-8 {
    background-image: url(images/slider/8.jpg);
}

.bg-9 {
    background-image: url(images/slider/9.jpg);
}
/*Home Four | Slider Background Image*/
.bg-10, .bg-11, .bg-12 {
    background-image: url(images/slider/10.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 770px;
    width: 100%;
}

.bg-11 {
    background-image: url(images/slider/11.jpg);
}

.bg-12 {
    background-image: url(images/slider/12.jpg);
}
/*----------------------------------------*/
/*  li's Background Variation Set 
/*----------------------------------------*/
.white-bg {
    background: #fff;
}

.white-smoke-bg {
    background: #f8f8f8;
}

.gray-bg {
    background: #e8e8e8;
}

.blue-bg {
    background: #4FC1F0;
}

.default-bg {
    background: #50C1F0;
}

.black-bg {
    background: #000;
}

.transparent-bg {
    background: transparent;
}
/*----------------------------------------*/
/*  1.9 Animation
/*----------------------------------------*/
/* Slider Progress Bar */
.slider-active .owl-item.active .slider-progress {
    -webkit-animation: 5000ms ease-in-out 0s normal none 1 running timebar;
    animation: 10000ms ease-in-out 0s normal none 1 running timebar;
    background: rgba(5, 34, 220, 0.3);
    height: 5px;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    z-index: 4;
}
/* animation-style-01 */
.owl-item.active .animation-style-01 .slider-content h5,
.owl-item.active .animation-style-01 .slider-content-2 h5 {
    -webkit-animation: 800ms ease-in-out 0s normal none 1 running zoomInRight;
    animation: 800ms ease-in-out 0s normal none 1 running zoomInRight;
}

.owl-item.active .animation-style-01 .slider-content h2 {
    -webkit-animation: 1200ms ease-in-out 0s normal none 1 running zoomInRight;
    animation: 1200ms ease-in-out 0s normal none 1 running zoomInRight;
}

.owl-item.active .animation-style-01 .slider-content h3,
.owl-item.active .animation-style-01 .slider-content-2 h3 {
    -webkit-animation: 1600ms ease-in-out 0s normal none 1 running zoomInRight;
    animation: 1600ms ease-in-out 0s normal none 1 running zoomInRight;
}

.owl-item.active .animation-style-01 .slider-content .slide-btn,
.owl-item.active .animation-style-01 .slider-content-2 .slide-btn {
    -webkit-animation: 2000ms ease-in-out 0s normal none 1 running zoomInRight;
    animation: 2000ms ease-in-out 0s normal none 1 running zoomInRight;
}

.owl-item.active .animation-style-01 .slider-content-2 .img-slide {
    -webkit-animation: 1000ms ease-in-out 0s normal none 1 running slideInUp;
    animation: 1000ms ease-in-out 0s normal none 1 running slideInUp;
}

.owl-item.active .animation-style-02 .slider-content-2 .img-slide {
    -webkit-animation: 1000ms ease-in-out 0s normal none 1 running slideInUp;
    animation: 1000ms ease-in-out 0s normal none 1 running slideInUp;
}

/* animation-style-02 */
.owl-item.active .animation-style-02 .slider-content h5,
.owl-item.active .animation-style-02 .slider-content-2 h5 {
    -webkit-animation: 800ms ease-in-out 0s normal none 1 running zoomInUp;
    animation: 800ms ease-in-out 0s normal none 1 running zoomInUp;
}

.owl-item.active .animation-style-02 .slider-content h2 {
    -webkit-animation: 1200ms ease-in-out 0s normal none 1 running zoomInUp;
    animation: 1200ms ease-in-out 0s normal none 1 running zoomInUp;
}

.owl-item.active .animation-style-02 .slider-content h3,
.owl-item.active .animation-style-02 .slider-content-2 h3 {
    -webkit-animation: 1600ms ease-in-out 0s normal none 1 running zoomInUp;
    animation: 1600ms ease-in-out 0s normal none 1 running zoomInUp;
}

.owl-item.active .animation-style-02 .slider-content .slide-btn,
.owl-item.active .animation-style-02 .slider-content-2 .slide-btn {
    -webkit-animation: 2000ms ease-in-out 0s normal none 1 running zoomInUp;
    animation: 2000ms ease-in-out 0s normal none 1 running zoomInUp;
}

@-webkit-keyframes timebar {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes timebar {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes timebar {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}
/*Top Up Keyframes*/
@-webkit-keyframes liSlideInUp {
    0% {
        -webkit-transform: translateY(250px);
        transform: translateY(250px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes liSlideInUp {
    0% {
        -webkit-transform: translateY(250px);
        transform: translateY(250px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
/*----------------------------------------*/
/*  1.10 All Navigation & Pagination
/*----------------------------------------*/
.slider-active .owl-nav div,
.product-active .owl-nav div,
.special-product-active .owl-nav div {
    color: rgba(36, 36, 36, 0.15);
    display: block;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    z-index: 8;
}

    .slider-active .owl-nav div:hover,
    .product-active .owl-nav div:hover {
        color: #0879fa;
    }

.slider-active:hover .owl-nav div, .product-active:hover .owl-nav div {
    opacity: 1;
}

    .slider-active:hover .owl-nav div.owl-prev {
        left: 10px;
    }

    .slider-active:hover .owl-nav div.owl-next, .product-active:hover .owl-nav div.owl-next {
        right: 10px;
    }

.slider-active .owl-nav div.owl-next, .product-active .owl-nav div.owl-next {
    right: 0;
    left: auto;
}

.slider-active .owl-nav > .owl-prev > i,
.product-active .owl-nav > .owl-prev > i,
.slider-active .owl-nav > .owl-next > i,
.product-active .owl-nav > .owl-next > i {
    font-size: 55px;
    font-weight: 700;
}
/*Product Active Nav Direction*/
.product-active .owl-nav div.owl-prev {
    left: -20px;
}

.product-active:hover .owl-nav div.owl-prev {
    top: 55%;
}

.product-active .owl-nav div.owl-next {
    right: -20px;
}

.product-active:hover .owl-nav div.owl-next {
    top: 55%;
    right: -20px;
}

@media only screen and (max-width: 1199px) {
    /*Product Nav Arrow*/
    .product-active .owl-nav {
        display: none;
    }
}
/* Default Pagination */
.owl-dots {
    bottom: 15px;
    margin-top: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 12;
}

.slider-active .owl-dots {
    display: none;
}

.owl-dots .owl-dot {
    background: #fff none repeat scroll 0 0;
    border-radius: 10px;
    cursor: pointer;
    display: inline-block;
    font-size: 0;
    height: 10px;
    margin: 0 4px;
    position: relative;
    text-align: center;
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
    width: 10px;
    z-index: 8;
}

    .owl-dots .owl-dot.active {
        background: #fed700 none repeat scroll 0 0;
        width: 32px;
    }

.testimonials-active .owl-dots .owl-dot {
    background: #000 none repeat scroll 0 0;
    border-radius: 0;
    height: 7px;
    width: 7px;
}

    .testimonials-active .owl-dots .owl-dot.active, .testimonials-active-2 .owl-dots .owl-dot.active {
        background: #fff none repeat scroll 0 0;
    }

.testimonials-active-2 .owl-dots .owl-dot.active {
    background: #ebebeb;
}

.slider-area-2 .owl-dots {
    display: none;
}
/*----------------------------------------*/
/*  1.11 Owl Carousel Box Shadow
/*----------------------------------------*/
/*Product Active Box Shadow*/
.product-active {
    padding: 0 10px;
    overflow: hidden;
}

    .product-active:hover {
        overflow: visible;
    }

.product-area .owl-carousel .owl-item {
    padding: 25px 0;
}

.product-area .owl-carousel .owl-stage-outer {
    margin: 0 0 -100px;
    padding: 0 0 85px;
    position: relative;
}
/*Special Product Active Box Shadow*/
.special-product-active {
    padding: 0;
    overflow: hidden;
}

    .special-product-active:hover {
        overflow: visible;
    }

    .special-product-active .single-product-wrap::before {
        left: 0;
        right: 0;
    }

    .special-product-active .product-image {
        position: relative;
        padding: 0 10px;
    }

    .special-product-active .product_desc {
        margin: 15px 15px 0;
    }

    .special-product-active .add-actions {
        padding: 0 15px;
        transition: all 0.3s ease-in-out;
    }
/*Shop Product Area Box Shadow*/
.shop-product-area .single-product-wrap::before {
    left: 0;
    ;
    right: 0;
}

.shop-product-area .product_desc {
    margin: 15px 15px 0;
}

.shop-product-area .add-actions {
    padding: 0 15px;
}
/*----------------------------------------*/
/* 	1.12 Li's Mobile Menu Customization 
/*----------------------------------------*/
.mobile-menu .mean-nav > ul {
    overflow-y: auto;
    max-height: 400px;
}

.mobile-menu {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 0 100% !important;
    flex: 1 0 100% !important;
}

    .mobile-menu .mean-bar {
        position: relative;
        /*---- Mean Nav ----*/
    }

.mobile-menu-area .mobile-menu .mean-bar .meanmenu-reveal,
.mobile-menu-area-4 .mobile-menu .mean-bar .meanmenu-reveal {
    position: absolute;
    top: -75px;
    left: auto !important;
    right: -12px !important;
}

.mobile-menu-area-4 .mobile-menu .mean-bar .meanmenu-reveal {
    color: #ffffff;
}

    .mobile-menu .mean-bar .meanmenu-reveal span,
    .mobile-menu-area-4 .mobile-menu .mean-bar .meanmenu-reveal span {
        position: relative;
        /*---- Menu Open ----*/
        /*---- Menu Close ----*/
    }

    .mobile-menu-area-4 .mobile-menu .mean-bar .meanmenu-reveal span {
        background: #ffffff;
    }

.mean-container a.meanmenu-reveal span {
    display: block;
    background: #282828;
    height: 3px;
    margin-top: 3px;
}

.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar:before, .mobile-menu .mean-bar .meanmenu-reveal span.menu-bar:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #202020;
}

.mean-container a.meanmenu-reveal {
    color: #282828;
}

.mean-container .mean-bar {
    padding: 0;
    min-height: 0;
}

.mean-container .mean-nav {
    background: transparent;
    margin-top: 0;
}

.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar:before {
    top: -8px;
}

.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar:after {
    bottom: -8px;
}

.mobile-menu .mean-bar .meanmenu-reveal span.menu-close {
    height: 2px;
    width: 26px;
    background-color: transparent;
    display: block;
    margin: 8px 0;
}

    .mobile-menu .mean-bar .meanmenu-reveal span.menu-close:before, .mobile-menu .mean-bar .meanmenu-reveal span.menu-close:after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #202020;
    }

    .mobile-menu .mean-bar .meanmenu-reveal span.menu-close:before {
        top: 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .mobile-menu .mean-bar .meanmenu-reveal span.menu-close:after {
        bottom: 0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

.mobile-menu .mean-bar .mean-nav {
    background-color: #ffffff;
}

    .mobile-menu .mean-bar .mean-nav > ul {
        margin-bottom: 30px;
        border: 1px solid #eeeeee;
        border-top: 0px solid transparent;
        overflow-x: hidden;
    }

@media only screen and (max-width: 767px) {
    .mobile-menu .mean-bar .mean-nav > ul {
        max-height: 180px;
        overflow-y: auto;
    }
}

@media only screen and (max-width: 479px) {
    .mobile-menu .mean-bar .mean-nav > ul {
        max-height: 220px;
        overflow-y: auto;
    }
}

.mobile-menu .mean-bar .mean-nav > ul li {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    /*---- Sub Menu & Mega Menu ----*/
}

    .mobile-menu .mean-bar .mean-nav > ul li a {
        font-size: 13px;
        display: block;
        color: #444444;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 44px;
        position: relative;
        border-top: 1px solid #eeeeee;
        padding: 0 40px 0 20px;
        width: 100%;
    }

        .mobile-menu .mean-bar .mean-nav > ul li a:hover {
            color: #202020;
            padding-left: 25px;
        }

        .mobile-menu .mean-bar .mean-nav > ul li a.mean-expand {
            border: 1px solid #eeeeee;
            position: absolute;
            right: -1px;
            top: 0;
            font-size: 20px !important;
            color: #444444;
            line-height: 44px;
            height: 46px;
            width: 40px;
            text-align: center;
            padding: 0 !important;
            background-color: transparent;
        }

            .mobile-menu .mean-bar .mean-nav > ul li a.mean-expand.mean-clicked {
                line-height: 40px;
            }

    .mobile-menu .mean-bar .mean-nav > ul li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu, .mobile-menu .mean-bar .mean-nav > ul li ul {
        position: static;
        background-color: #fff;
        margin: 0;
        padding: 0 !important;
        width: 100%;
        box-shadow: none;
        display: none;
        float: left;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-transform: perspective(0px) rotateX(0deg);
        transform: perspective(0px) rotateX(0deg);
        -webkit-transition: none;
        transition: none;
    }

        .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li, .mobile-menu .mean-bar .mean-nav > ul li ul li {
            padding: 0;
            margin: 0;
            -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            border-right: 0px solid transparent;
            width: 100%;
            display: block !important;
            float: left;
            width: 100%;
        }

            .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li a {
                font-size: 12px;
            }

                .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li a:before, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li a:before, .mobile-menu .mean-bar .mean-nav > ul li ul li a:before {
                    display: none;
                }

            .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li ul li ul {
                background-color: rgba(0, 0, 0, 0.04);
            }

                .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul li a, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li ul li a {
                    border-top: 1px solid #dddddd;
                }

                    .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li ul li a.mean-expand {
                        border: 1px solid #dddddd;
                    }

                .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu ul, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul ul, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu ul, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul ul, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu ul, .mobile-menu .mean-bar .mean-nav > ul li ul li ul .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li ul li ul ul {
                    background-color: rgba(0, 0, 0, 0.05);
                }

                    .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu ul li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul ul li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu ul li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul ul li a, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu ul li a, .mobile-menu .mean-bar .mean-nav > ul li ul li ul .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li ul ul li a {
                        border-top: 1px solid #eeeeee;
                    }

                        .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li ul .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li ul ul li a.mean-expand {
                            border: 1px solid #eeeeee;
                        }
/*----------------------------------------*/
/* 1.13 Modal Area
/*----------------------------------------*/
.modal-wrapper {
    display: block !important;
}

    .modal-wrapper.modal {
        visibility: hidden;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        z-index: -9;
    }

        .modal-wrapper.modal.show {
            visibility: visible;
            opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            z-index: 1050;
        }

    .modal-wrapper .modal-dialog {
        max-width: 880px;
    }

    .modal-wrapper .close {
        color: #333333;
        font-size: 30px;
        font-weight: 400;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        position: absolute;
        right: 15px;
        top: 5px;
        z-index: 99;
    }

        .modal-wrapper .close:hover {
            color: #fed700;
        }

    .modal-wrapper .slider-thumbs-1 {
        margin-top: 10px;
        margin-right: -10px;
    }

        .modal-wrapper .slider-thumbs-1 .sm-image {
            margin-right: 10px;
        }

.product-details-images .lg-image img,
.product-details-thumbs .sm-image img {
    width: 100%;
}

.product-details-thumbs .sm-image {
    cursor: pointer;
}

.product-details-view-content .product-info h2 {
    font-size: 30px;
    letter-spacing: -.025em;
    line-height: 24px;
    color: #0363cd;
    text-transform: capitalize;
    font-weight: 500;
    margin: 0 0 15px 0;
}

.product-details-ref {
    font-size: 13px;
    color: #7a7a7a;
}

.product-details-view-content .product-info .price-box {
    margin-bottom: 10px;
}

    .product-details-view-content .product-info .price-box .new-price {
        font-weight: 500;
        font-size: 40px;
        line-height: 27px;
        color: #e80f0f;
    }

.product-details-view-content .content-center .product-variants {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.product-variants .produt-variants-size {
    margin-right: 30px;
}

    .product-variants .produt-variants-size label {
        display: block;
        font-size: 14px;
        font-weight: 400;
        color: #626262; 
        margin-bottom: 5px;
    }

    .product-variants .produt-variants-size .form-control-select {
        width: 60px;
        border-radius: 0px;
        border: 1px solid #ddd;
        height: 30px;
    }

.product-variants .produt-variants-color label {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.product-variants .produt-variants-color .color-list li {
    display: inline-block;
    margin-right: 10px;
}

    .product-variants .produt-variants-color .color-list li a {
        border: 2px solid rgba(0, 0, 0, 0);
        display: block;
        height: 28px;
        -webkit-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;
        width: 28px;
    }

        .product-variants .produt-variants-color .color-list li a:hover {
            border: 2px solid #333333;
        }

        .product-variants .produt-variants-color .color-list li a.orange-color {
            background: #f39c11;
        }

            .product-variants .produt-variants-color .color-list li a.orange-color.active {
                border: 2px solid #333333;
            }

        .product-variants .produt-variants-color .color-list li a.paste-color {
            background: #5d9cec;
        }

.cart-quantity {
    margin-top: 25px;
    overflow: hidden;
    float: left;
    width: 100%;
}

    .cart-quantity label {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: #626262; 
        margin-bottom: 5px;
    }

    .cart-quantity .add-to-cart {
        border: none;
        font-size: 18px;
        color: #242424;
        position: relative;
        background: #369df1;
        cursor: pointer;
        font-weight: 500;
        text-transform: capitalize;
        padding: 13px 70px;
        border-radius: 2px;
        transition: all 0.3s ease-in-out;
    }

        .cart-quantity .add-to-cart:hover {
            background: #242424;
            color: #ffffff;
        }

.cart-plus-minus {
    float: left;
    margin-right: 15px;
    position: relative;
    width: 76px;
    text-align: left;
}

    .cart-plus-minus .cart-plus-minus-box {
        border: 1px solid #e1e1e1;
        color: #242424;
        height: 46px;
        text-align: center;
        width: 48px;
        width: 48px;
        width: 3rem;
        background: #fff;
    }

    .cart-plus-minus .dec.qtybutton, .cart-plus-minus .inc.qtybutton {
        border-bottom: 1px solid #e1e1e1;
        border-right: 1px solid #e1e1e1;
        border-top: 1px solid #e1e1e1;
        color: #333333;
        cursor: pointer;
        height: 23px;
        line-height: 20px;
        position: absolute;
        text-align: center;
        -webkit-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;
        width: 28px;
    }

        .cart-plus-minus .dec.qtybutton:hover, .cart-plus-minus .inc.qtybutton:hover {
            background: #ddd;
        }

    .cart-plus-minus .dec.qtybutton {
        bottom: 0;
        right: 0;
    }

    .cart-plus-minus .inc.qtybutton {
        border-bottom: none;
        top: 0;
        right: 0;
    }

.product-details-thumbs .slick-arrow,
.tab-style-right .slick-arrow,
.tab-style-left .slick-arrow {
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 0;
    right: auto;
    background: #242424;
    color: #ffffff;
    border: none;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    z-index: 5;
    visibility: hidden;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.tab-style-right .slick-arrow, .tab-style-left .slick-arrow {
    top: 16px;
    left: 40px;
    right: auto;
}

.product-details-thumbs .slick-arrow:hover {
    background: #0077fe;
    color: #ffffff;
}

.product-details-thumbs .slick-arrow.slick-next,
.tab-style-right .slick-arrow.slick-next {
    right: 10px;
    left: auto;
}

.tab-style-right .slick-arrow.slick-next,
.tab-style-left .slick-arrow.slick-next {
    right: 40px;
    left: auto;
    bottom: 0;
    top: auto;
}

.product-details-thumbs:hover .slick-arrow,
.tab-style-right:hover .slick-arrow,
.tab-style-left:hover .slick-arrow {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    visibility: visible;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.modal-body .product-social-sharing {
    padding-bottom: 43px;
}
/*----------------------------------------*/
/* 1.14 Scroll Up
/*----------------------------------------*/
#scrollUp {
    right: 25px;
    bottom: 25px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    border-radius: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #32b6fd none repeat scroll 0 0;
    border: 1px solid #fff;
    -webkit-animation: liSlideInUp 0.8s ease-in-out 1 both;
    animation: liSlideInUp 0.8s ease-in-out 1 both;
    z-index: 1000 !important;
    overflow: hidden;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

    #scrollUp:hover {
        background: #0055fe none repeat scroll 0 0;
    }

    #scrollUp i {
        color: #ffffff;
        font-size: 20px;
        display: inline-block;
    }

    #scrollUp:hover i {
        animation: liSlideInUp 1s infinite;
    }
/*----------------------------------------*/
/*  02. Home Page One
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.1 Header
/*----------------------------------------*/
/*Header Top*/
.header-top {
    background: rgba(87, 169, 242, 0.78);
    padding: 5px 0;
    border-bottom: 1px solid #9ad5f5;
}

/* -------------------------------------------
   Header Top - Mejoras (Index)
   Cambia únicamente el color de fondo del
   Header Top y añade transición suave de
   color negro -> blanco en todos sus textos
   (enlaces, spans, teléfono, menú superior).
-------------------------------------------- */
.header-top a,
.header-top span {
    color: #000;
    transition: color .3s ease;
}

.header-top a:hover,
.header-top span:hover {
    color: #fff;
}

/* -------------------------------------------------
   Header Top - Hover del contenedor izquierdo
   (.col-lg-3.col-md-4 dentro de .header-top).
   Al pasar el cursor sobre cualquier parte del
   contenedor, TODO su contenido pasa a blanco
   (#fff) con la misma transición del Header Top
   (color .3s ease). Selector limitado a
   .header-top para no afectar a otros
   .col-lg-3.col-md-4 del sitio.
------------------------------------------------- */
.header-top .col-lg-3.col-md-4,
.header-top .col-lg-3.col-md-4 * {
    transition: color .3s ease;
}

.header-top .col-lg-3.col-md-4:hover,
.header-top .col-lg-3.col-md-4:hover * {
    color: #fff;
}

/* -------------------------------------------------
   Header Top - Centrado vertical del contenedor
   izquierdo (.col-lg-3.col-md-4 dentro de
   .header-top): centra su contenido respecto a la
   altura de la fila, igual que el lado derecho.
------------------------------------------------- */
.header-top .col-lg-3.col-md-4 {
    display: flex;
    align-items: center;
}
/*Phone Wrap*/
.phone-wrap > li > span {
    font-size: 14px;
    color: #000;
}

.phone-wrap > li > a {
    font-size: 14px;
    color: #000;
}
/*Header Top Menu*/
.ht-menu {
    display: flex;
    justify-content: flex-end;
    -webkit-display: flex;
    -moz-display: flex;
    -ms--display: flex;
}

    .ht-menu > li {
        list-style: none;
        padding: 0 15px;
        position: relative;
        display: flex;
        align-items: center;
        align-self: stretch;
    }

        .ht-menu > li::after {
            content: "";
            position: absolute;
            background: #2424;
            height: 15px;
            width: 1px;
            right: 0;
            top: 5px;
        }

        .ht-menu > li:last-child::after {
            content: unset;
        }

        .ht-menu > li:last-child {
            padding-right: 0;
        }

        .ht-menu > li span {
            font-size: 12px;
        }
/*Header Top Currency*/
.currency-selector-wrapper, .language-selector-wrapper {
    margin-right: 5px;
}

.ht-menu > li > span i {
    font-size: 10px;
    font-weight: 400;
    color: #a4a4a4;
    display: inline-block;
    position: relative;
}

.ht-setting-trigger, .ht-currency-trigger, .ht-language-trigger {
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}

    .ht-currency-trigger:hover, .ht-language-trigger:hover {
        color: #0d48f9;
    }

        .ht-currency-trigger:hover i, .ht-language-trigger:hover i {
            color: #006afe;
        }

.ht-setting, .ht-currency, .ht-language {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 9;
    display: none;
}

.setting, .currency, .language {
    border-top: 2px solid #00b5ff;
    padding: 20px 20px 10px;
    background: #ffffff;
    text-align: left;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease-in-out;
}

.setting {
    min-width: 150px;
}

.currency, .language {
    min-width: 120px;
}

    .currency li {
        padding: 0 10px;
        color: #636363;
        line-height: 22px;
        font-size: 12px;
    }

.ht-setting-list > li {
    transition: all 0.1s ease-in-out;
}

    .ht-setting-list > li.active {
        background: #00b5ff;
    }

    .ht-setting-list > li:hover {
        background: #00b5ff;
    }

    .ht-setting-list > li > a {
        padding: 0 10px;
        display: block;
        font-size: 12px;
        line-height: 22px;
        margin-bottom: 10px;
    }

    .ht-setting-list > li:hover > a {
        color: #ffffff;
    }

    .ht-setting-list > li.active > a {
        color: #fff;
    }

    .ht-setting-list > li > a > img {
        padding-right: 5px;
    }

/*Header Middle*/
.header-middle {
    background: rgba(0, 89, 255, 1);
    padding: 30px;
}

.hm-searchbox {
    display: flex;
    position: relative;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #e1e1e1;
    min-width: 638px;
    height: 45px;
    float: left;
}

    .hm-searchbox .nice-select.select-search-category {
        width: auto;
        line-height: 43px;
        height: 43px;
        margin: 0;
        border: 0;
        padding: 0 28px 0 25px;
        color: #242424;
        font-size: 13px;
        border-radius: 15px 0 0 15px;
        font-family: 'Rubik',sans-serif;
        font-weight: 400;
        position: relative;
    }

.select-search-category ul.list {
    height: auto;
    overflow-y: auto;
    overscroll-behavior-x: none;
}

.hm-searchbox .current::after {
    content: "";
    position: absolute;
    display: block;
    height: 22px;
    width: 1px;
    background: #e1e1e1;
    top: 10px;
    right: -10px;
    font-size: 13px;
}

.hm-searchbox .nice-select.select-search-category::before {
    right: 30px;
    top: 25px;
    color: #7e7e7e;
}

.hm-searchbox input {
    font-size: 13px;
    color: #a5a5a5;
    height: 45px;
    background: transparent;
    border: none;
    width: 100%;
    padding: 0 60px 0 33px;
}
/*Header Middle Right*/
.header-middle-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/*Header Middle Menu*/
ul.hm-menu {
    display: flex;
    align-items: center;
    min-width: 0;
}
/*Header Middle Wishlist*/
.hm-wishlist {
    float: left;
    margin-right: 25px;
    position: relative;
}

    .hm-wishlist > a {
        border: 1px solid #5db7f4;
        font-size: 20px;
        color: #fcfcfc;
        width: 45px;
        text-align: center;
        height: 45px;
        line-height: 45px;
        display: block;
        transition: all 0.3s ease-in-out;
        border-radius: 0.2rem;
        background-color: #358ae4;
    }

        .hm-wishlist > a:hover {
            border-color: #e2374d;
            color: #e2374d;
        }

.hm-wishlist-icon:hover {
    filter: invert(68%) sepia(1%) saturate(3561%) hue-rotate(331deg) brightness(98%) contrast(83%);
    
}
/*Header Middle Minicart*/
.hm-minicart {
    display: inline-block;
    position: relative;
    min-width: 0;
}

.hm-minicart-trigger {
    border: 1px solid #5db7f4;
    border-radius: 0.2rem;
    background: #358ae4;
    color: #fff;
    height: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    min-width: 0;
    position: relative;
    padding: 0 15px 0 35px;
    
    
}

.fa-cart-shopping::before {
    content: "\f07a";
    position: absolute;
    font-family: "Font Awesome 7 Free";
    left: 10px;
    top: 10px;
    display: block;
    font-size: 26px;
}

.item-text {
    position: relative;
    line-height: 45px;
    font-weight: 500;
        
    
    text-align: center;
}

/* Minicart: caja estable para que ::before no dependa de fragmentos inline ni del float del ::after compartido con currency/language */
.hm-minicart-trigger .item-text {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    min-width: 0;
    max-width: 200px;
    padding-right: 16px;
    padding-left: 10px;
}

    .item-text::before {
        content: "";
        position: absolute;
        left: -0px;
        height: 38px;
        width: 1px;
        background: rgba(255,255,255,.3);
        top: 3px;
    }

.cart-item-count {
    position: absolute;
    top: -25px;
    left: -15px;
    display: block;
    overflow: hidden;
    min-width: 26px;
    line-height: 26px;
    font-size: 12px;
    font-weight: 400;
    color: #242424;
    background: #00d7e7;
    text-align: center;
    border-radius: 100%;
}

.wishlist-item-count {
    top: -15px;
    left: -15px;
}

.minicart {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 9;
    display: none;
    border: 1px solid #e5e5e5;
    padding: 20px;
    width: 290px;
    background: #ffffff;
    text-align: left;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

    .minicart .minicart-product-list {
        padding-left: 0;
        margin-bottom: 0;
    }

        .minicart .minicart-product-list li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            list-style: none;
            border-bottom: 1px solid #e5e5e5;
            padding: 10px 0;
            overflow: hidden;
        }

            .minicart .minicart-product-list li:first-child {
                padding-top: 0;
            }

            .minicart .minicart-product-list li .minicart-product-image {
                display: inline-block;
                border: 1px solid #e5e5e5;
                position: relative;
                width: 50px;
                -webkit-box-flex: 0;
                -ms-flex: 0 0 50px;
                flex: 0 0 50px;
                margin-right: 10px;
                -ms-flex-item-align: start;
                align-self: flex-start;
            }

                .minicart .minicart-product-list li .minicart-product-image:hover {
                    border-color: #fed700;
                }

                .minicart .minicart-product-list li .minicart-product-image span.quantity {
                    background: -webkit-gradient(linear, left top, left bottom, from(#626262), to(#2f2f2f));
                    background: -webkit-linear-gradient(#626262, #2f2f2f);
                    background: -o-linear-gradient(#626262, #2f2f2f);
                    background: linear-gradient(#626262, #2f2f2f);
                    border-radius: 40px;
                    color: #fff;
                    font-family: Carrois Gothic, Arial, Helvetica, sans-serif;
                    font-size: 11px;
                    font-weight: bold;
                    height: 20px;
                    left: -10px;
                    line-height: 20px;
                    overflow: visible;
                    position: absolute;
                    text-align: center;
                    top: -10px;
                    width: 20px;
                    z-index: 1;
                }

            .minicart .minicart-product-list li .minicart-product-details {
                -ms-flex-negative: 100;
                flex-shrink: 100;
                width: 100%;
                margin-right: 10px;
            }

                .minicart .minicart-product-list li .minicart-product-details h6 {
                    color: #333333;
                    font-size: 14px;
                    font-weight: normal;
                    line-height: 20px;
                    margin: 0 0 5px;
                    text-align: left;
                }

                    .minicart .minicart-product-list li .minicart-product-details h6 a {
                        color: #333333;
                    }

                        .minicart .minicart-product-list li .minicart-product-details h6 a:hover {
                            color: #fed700;
                        }

    .minicart > ul > li > a > img {
        width: 100%;
    }

    .minicart .minicart-product-list li button.close {
        -webkit-box-flex: 100;
        -ms-flex-positive: 100;
        flex-grow: 100;
        background: none;
        color: #777777;
        display: block;
        font-size: 14px;
        z-index: 1;
    }

        .minicart .minicart-product-list li button.close:hover {
            color: #00b2fe;
        }

    .minicart .minicart-total {
        border: none;
        color: #555555;
        font-size: 14px;
        line-height: 40px;
        margin: 0 0 15px;
        padding: 0 10px;
        text-transform: uppercase;
        width: 100%;
        font-weight: bold;
        font-family: "Poppins", sans-serif;
        margin-top: 10px;
    }

        .minicart .minicart-total span {
            font-size: 18px;
            float: right;
        }

.li-button {
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    vertical-align: middle;
    text-align: center;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -o-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: #358ae4;
    color: #ffffff;
    line-height: 50px;
    margin-top: 10px;
    height: 50px;
}

    .li-button:hover {
        background: #242424;
        color: #ffffff;
    }

.li-button-fullwidth {
    width: 100%;
    display: block;
}

.li-button-dark {
    background: #00b5ff;
    color: #ffffff;
}

    .li-button-dark:hover {
        background: #358ae4;
        color: #ffffff;
    }
/*Header Bottom Menu*/
.header-bottom {
    background: rgba(87, 169, 242, 0.78);
    margin-bottom: 20px;
}

.dropdown-holder-menu {
    background: rgba(87, 169, 242, 0.78);
    margin-bottom: 30px;
}

.breadcrumb-area-categories{
    padding: 10px 0 10px;
    background: #f8f4f4;
    margin-top: -20px; 
}

.hb-hide-icon-link {
    display: none !important;
}

.hb-menu > nav > ul {
    position: relative;
    display: flex;
    
}

.hb-menu nav > ul > li {
    display: inline-block;
    position: relative;
    padding-right: 40px;
    transition: all 0.3s ease-in-out;
    flex: 0 1 auto !important;        /* CRECE 0 • ENCOGE 1 • BASE auto */
    min-width: 0;                     /* Clave Bootstrap: permite que el texto se comprima */
    white-space: nowrap !important;    
    align-items: center;
}

    .hb-menu nav > ul > li > a {
        display: flex;
        align-items: center;            /* Centra verticalmente texto y chevron \f107 */
        gap: 8px;                       /* Separación constante texto/chevron: evita solapes */
        color: #000;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 35px;
        font-weight: 500;
        padding: 8px 0;
    }

.hb-menu-2 nav > ul > li > a {
    display: flex;
    color: #242424;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 35px;
    font-weight: 500;
    padding: 8px 0;
}

.hb-menu nav > ul > li:hover > a,
.hb-menu nav > ul > li:hover > a::after {
    color: #ffffff;
}

.hb-menu nav > ul > li > a::after {
    content: "\f107";
    display: inline-block;              /* Chevron como ítem flex: queda tras el texto sin solaparse */
    font-family: fontawesome;
    font-size: 18px;
    transition: all 0.3s ease-in-out;
    color: #242424;
}

.hb-menu nav > ul > li > span > a {
    display: flex;
    color: #000;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 35px;
    font-weight: 500;
    padding: 8px 0px;
    cursor: pointer;
}

.hb-menu nav > ul > li:hover > span > a,
.hb-menu nav > ul > li:hover > span > a::after {
    color: #ffffff;
}

.hb-menu nav > ul > li:nth-child(n+5) > a::after {
    content: none;
}

.hb-menu nav > ul > li:hover a::after {
    transform: rotate(180deg);
}

.ht-menu > li .ht-currency-trigger span::after,
.ht-menu > li .ht-language-trigger span::after,
.hm-minicart-trigger .item-text::after {
    content: "\f107";    
    
    font-size: 18px;
    font-family: fontawesome;
    color: #242424;
    transition: all 0.3s ease-in-out;
}

.ht-menu > li:hover .ht-currency-trigger span,
.ht-menu > li:hover .ht-currency-trigger span::after,
.ht-menu > li:hover .ht-language-trigger span,
.ht-menu > li:hover .ht-language-trigger span::after {
    color: #fff;
}

.ht-menu > li .ht-setting-trigger span::after,
.ht-menu > li .ht-currency-trigger span::after,
.ht-menu > li .ht-language-trigger span::after,
.hm-minicart-trigger .item-text::after {
    content: "\f107";
    font-size: 14px;
    color: #000;
    margin-left: 10px;
    font-family: fontawesome;
}

.hm-minicart-trigger .item-text::after {
    color: #fff;
}

/* Misma regla agrupada que currency/language aplica float:right al ::after del minicart; sin esto el ancho del precio mueve la línea y el ::before “salta” */
.ht-menu > li.hm-minicart .hm-minicart-trigger .item-text::after {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

.ht-menu > li .ht-setting-trigger.is-active span::after,
.ht-menu > li .ht-currency-trigger.is-active span::after,
.ht-menu > li .ht-language-trigger.is-active span::after,
.hm-minicart-trigger.is-active .item-text::after {
    transform: rotate(-180deg);
}

.megamenu {
    background: rgba(148, 195, 246, 0.76);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 30px 15px;
    -webkit-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
    z-index: 0;
    position: absolute;
    left: 100%;
    right: auto;
    top: 0;
    -webkit-box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

    .megamenu > li {
        padding: 0 20px;
        min-width: 250px;
        border-right: 1px solid #ebebeb;
    }

        .megamenu > li:first-child {
            padding-left: 5px;
        }

        .megamenu > li:last-child, .megamenu-static-holder .hb-megamenu > li:last-child {
            border-right: none;
        }

        .megamenu > li > a {
            padding: 8px 0 5px;
            display: block;
            margin-bottom: 10px;
            color: #1e1e1e;
            font-weight: 500;
            font-size: 14px;
            transition: all 0.3s ease-in-out;
        }

.megamenu-static-holder ul li ul li.active a,
.dropdown-holder ul li ul li.active a {
    color: #00b5ff;
}

.megamenu-holder .megamenu > li > a:hover,
.megamenu-holder .megamenu li ul li a:hover,
.megamenu-static-holder .megamenu > li > a:hover,
.megamenu-static-holder .megamenu li ul li a:hover {
    color: #fafbfb;
}

.megamenu-holder .megamenu li ul li a, .megamenu-static-holder .megamenu li ul li a {
    color: #050505;
    font-size: 14px;
    padding: 7px 0;
    display: block;
}

.megamenu-holder .megamenu.is-visible, .megamenu-static-holder .megamenu.is-visible {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    visibility: visible;
    z-index: 1;
}

.megamenu-holder:hover > .megamenu, .megamenu-static-holder:hover > .megamenu {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}
/*Header Bottom Megamenu*/
.hb-menu nav > ul > li:nth-child(4) {
    margin-right: -20px;
}

.megamenu-static-holder {
    position: static !important;
}

    .megamenu-static-holder .hb-megamenu, .megamenu-holder .hb-megamenu {
        background-image: url(images/menu/li-bg-menu.png);
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        top: auto;
        left: 0;
        z-index: 99;
        width: 100%;
    }

.megamenu-holder .hb-megamenu {
    width: auto;
    background-size: auto;
    background-position: inherit;
}

.megamenu-static-holder .hb-megamenu > li {
    width: 25%;
    border-right: 1px solid #ebebeb;
    padding: 25px;
}

    .megamenu-static-holder .hb-megamenu > li:first-child {
        padding-left: 10px;
    }

.hb-menu nav > ul > .megamenu-static-holder > a::after {
    position: static;
    margin: -1px 0 0 10px;
}
/*Sticky*/
.header-sticky.sticky {
    background: rgba(0, 165, 254, 0.8);
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
    z-index: 1049;
}

.sticky {
    -webkit-animation: 800ms ease-in-out 0s normal none 1 running slideInDown;
    animation: 800ms ease-in-out 0s normal none 1 running slideInDown;
}
/*Header Bottom Dropdown Menu*/
.hb-menu nav > ul > li > ul.hb-dropdown {
    background: rgba(148, 195, 246, 0.76);
    opacity: 0;
    padding: 20px 0;
    position: absolute;
    top: 100%;
    transform: scaleY(0);
    transform-origin: 0 0 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out 0s;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    width: 220px;
    z-index: 99;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.hb-menu nav ul > li:hover > ul.hb-dropdown {
    opacity: 1;
    transform: scaleY(1);
    visibility: visible;
    top: 100%;
}

.hb-menu nav ul > li > ul.hb-dropdown > li {
    position: relative;
    transition: all 0.3s ease-in-out;
}

    .hb-menu nav ul > li > ul.hb-dropdown > li > a {
        color: #242424;
        display: block;
        padding: 6px 20px;
        transition: all 0.3s ease-in-out 0s;
    }

    .hb-menu nav ul > li > ul.hb-dropdown > li.active > a {
        color: #000;
    }

    .hb-menu nav ul > li > ul.hb-dropdown > li > a:hover {
        color: #f8f9fa;
    }
/*Header Bottom Sub Dropdown Menu*/
.hb-menu nav > ul > li > ul > li > ul.hb-sub-dropdown {
    left: 100%;
    position: absolute;
    background: rgba(148, 195, 246, 0.76);
    width: 250px;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    top: 100%;
    transition: all 0.3s ease-in-out;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.hb-menu nav > ul > li > ul > li:hover > ul.hb-sub-dropdown {
    opacity: 1;
    visibility: visible;
    top: 0;
}

.hb-menu nav ul > li > ul.hb-dropdown > li.sub-dropdown-holder::after {
    content: "\f107";
    font-family: fontawesome;
    position: absolute;
    right: 25px;
    top: 5px;
    transition: all 0.3s ease-in-out;
    color: #242424;
}

.hb-menu nav ul > li > ul.hb-dropdown > li.sub-dropdown-holder:hover::after {
    transform: rotate(-90deg);
    color: #00b5ff;
}

.hb-menu nav ul > li > ul.hb-dropdown > li.sub-dropdown-holder > ul > li > a {
    display: block;
    padding: 6px 20px;
}

.hb-menu nav ul > li > ul.hb-dropdown > li.sub-dropdown-holder:hover > a {
    color: #f5f5f5;
}
/*----------------------------------------*/
/*  2.2 Slider
/*----------------------------------------*/
.single-slide.align-center-left {
    align-items: center;
    display: flex;
    border-radius: 0.5rem;
}

.slider-content {
    position: absolute;
    padding-left: 58px;
}

    .slider-content > h5 {
        font-weight: 400;
        line-height: 18px;
        text-transform: capitalize;
        max-width: 280px;
        margin-bottom: 10px;
    }

        .slider-content > h5 > span {
            color: #e80f0f;
        }

    .slider-content > h2 {
        font-size: 35px;
        font-weight: 400;
        text-transform: capitalize;
        max-width: 310px;
        margin-bottom: 20px;
    }

    .slider-content > h3 {
        font-size: 18px;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 64px;
    }

        .slider-content > h3 > span {
            font-size: 30px;
            color: #e80f0f;
        }
/*----------------------------------------*/
/*  2.3 Li's Static Top
/*----------------------------------------*/
.static-top-content {
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    padding: 20px 0;
    color: #fff;
    background-image: url(images/static-top/1.jpg);
    background-size: cover;
    margin-top: 20px;
}

.static-top .static-top-content span {
    color: #fed700;
    text-transform: uppercase;
}
/*----------------------------------------*/
/*  2.4 Product-area css
/*----------------------------------------*/
.li-product-menu {
    position: relative;
    display: inline-block;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e1e1;
}

    .li-product-menu li {
        display: inline-block;
        position: relative;
        padding-right: 30px;
        z-index: 99;
    }

    .li-product-menu > li > a > span {
        position: relative;
    }

    .li-product-menu > li > a span::before, .li-product-menu > li > a.active span::before {
        content: "";
        position: absolute;
        bottom: -11px;
        opacity: 0;
        left: 0;
        background: #fed700;
        right: 0;
        height: 1px;
        display: block;
    }

    .li-product-menu > li > a.active span::before {
        background: #fed700;
        opacity: 1;
    }

    .li-product-menu > li:hover > a span::before {
        opacity: 1;
        background: #fed700;
    }

    .li-product-menu li span.active::before {
        opacity: 1;
        width: 100%;
    }

    .li-product-menu li span:hover::before {
        opacity: 1;
        width: 100%;
    }

    .li-product-menu li a {
        color: #c8c8c8;
        cursor: pointer;
        display: inline-block;
        font-family: 'Rubik', sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: 18px;
        padding: 0 30px 0 0;
        position: relative;
        text-transform: capitalize;
        transition: all 0.3s ease-in-out;
        letter-spacing: 0.25px;
        border-right: 1px solid #e1e1e1;
    }

    .li-product-menu li:last-child a {
        border-right: 1px solid transparent;
    }

    .li-product-menu > li a.active {
        color: #242424;
    }

    .li-product-menu li a:hover {
        color: #242424;
    }

.single-product-wrap {
    background: #ffffff none repeat scroll 0 0;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 300ms ease-in 0s;
}

    .single-product-wrap:hover {
        margin: 0 0 -75px;
        padding: 0 0 75px;
        z-index: 9;
    }

    .single-product-wrap.mt-40:hover {
        margin: 40px 0 -85px;
    }

    .single-product-wrap::before {
        background: #ffffff none repeat scroll 0 0;
        box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
        border-radius: 4px;
        bottom: -15px;
        content: "";
        left: -10px;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        position: absolute;
        right: -10px;
        top: -15px;
        -webkit-transition: all 300ms ease-in 0s;
        transition: all 300ms ease-in 0s;
        visibility: hidden;
        z-index: 0;
    }

    .single-product-wrap:hover:before {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        visibility: visible;
    }

.product-image > a {
    display: block;
    position: relative;
}

.single-product-wrap:hover .secondary-image {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.product-image > span.sticker {
    background: #0363cd;
    border-radius: 100%;
    color: #fff;
    right: 15px;
    position: absolute;
    top: 20px;
    z-index: 99;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
}

.product-review {
    border-bottom: 1px solid #ebebeb;
}

.manufacturer {
    font-size: 13px;
    font-weight: 400;
    display: inline-block;
    color: #a4a4a4;
    margin-bottom: 11px;
    line-height: 16px;
}

.rating > li {
    display: inline-block;
    margin: 0;
}

.review-item {
    padding-left: 20px;
    position: relative;
}

    .review-item::before {
        content: "\f040";
        position: absolute;
        left: 5px;
        top: 0;
        font-family: fontawesome;
        color: #7a7a7a;
        font-size: 13px;
        transition: all 0.3s ease-in-out;
    }

    .review-item:hover::before {
        color: #fed700;
    }

.rating li i {
    font-size: 12px;
    color: #fed700;
}

.rating li.no-star i {
    color: #e3e3e3;
}

.product_desc {
    margin: 15px 0 0;
}

    .product_desc .product_desc_info .rating-box {
        background: #fff;
        display: block;
        line-height: 1;
        padding-bottom: 15px;
        float: right;
        -webkit-transition: all 300ms ease-in 0s;
        transition: all 300ms ease-in 0s;
        overflow: hidden;
    }

.rating-box.featured-rating-box {
    float: unset !important;
    margin: 10px 0 0;
}

.product_desc .product_desc_info > h4 {
    padding-top: 15px;
    margin: 0px;
}

.product_desc_info {
    position: relative;
}

.product_desc .product_desc_info .product_name {
    color: #0363cd;
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-transform: capitalize;
}

    .product_desc .product_desc_info .product_name:hover {
        text-decoration: underline;
    }

.product_desc .manufacturer a {
    color: #777777;
    font-size: 13px;
    margin-top: 9px;
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

    .product_desc .manufacturer a:hover {
        color: #010101;
    }

.product_desc .product_desc_info .new-price,
.featured-price-box .new-price,
.featured-price-box .new-price-2 {
    color: #2f333a;
    font-size: 14px;
    font-weight: 500;
    padding-right: 10px;
}

.product_desc .product_desc_info .price-box .new-price-2,
.featured-price-box .new-price-2 {
    color: #e80f0f !important;
}

.product_desc .product_desc_info .price-box .discount-percentage,
.featured-price-box .discount-percentage {
    float: right;
    color: #e80f0f;
}

.product_desc .product_desc_info .old-price {
    color: #666;
    font-size: 14px;
    font-weight: 400;
    text-decoration: line-through;
}

.product_desc .product_desc_info .price-box {
    line-height: 1;
    margin-top: 16px;
}

.countersection {
    display: inline-block;
    width: 100%;
    position: relative;
}

.li-countdown .count, .product-sale-countdown .count {
    display: inline-block;
    text-align: center;
    color: #e80f0f;
    border: 2px solid #dbdbdb;
    margin: 20px 2px 0;
    padding: 5px;
    border-radius: 2px
}

    .li-countdown .count span {
        color: #242424;
        display: block;
        position: relative;
    }

.add-actions-link {
    display: inline-block;
    margin-top: 24px;
    padding-top: 20px;
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
    width: 100%;
}

    .add-actions-link li {
        line-height: 1;
        margin: 0 0 0 3px;
        background: #eef0f1;
        display: inline-block;
        border-radius: 4px;
        float: left;
        height: 35px;
        line-height: 35px;
        width: 35px;
    }

        .add-actions-link li.add-cart {
            float: left;
            margin: 0;
            background: #eef0f1;
            border: 1px solid #e1e1e1;
            transition: all 0.3s ease-in-out;
            width: 120px;
        }

        .add-actions-link li:hover {
            background: #3a7df8;
            border-color: #0059ff;
        }

        .add-actions-link li a {
            color: #378cee;
            display: block;
            font-size: 17px;
            font-weight: 400;
            padding: 0;
            position: relative;
            text-align: center;
            -webkit-transition: all 300ms ease-in 0s;
            transition: all 300ms ease-in 0s;
        }

        .add-actions-link li.add-cart.active a {
            color: #242424;
        }

        .add-actions-link li:hover a,
        .add-actions-link li.add-cart:hover a {
            color: #242424;
        }

        .add-actions-link li.add-cart > a {
            color: #a4a4a4;
            font-size: 13px;
            font-weight: 500;
            text-transform: uppercase;
        }

            .add-actions-link li.add-cart > a i {
                font-size: 16px;
                line-height: 22px;
            }

.add-actions {
    bottom: -15px;
    left: 0;
    margin: 0 auto;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    right: 0;
    text-align: center;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.single-product-wrap:hover .add-actions {
    bottom: 0;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.tab-content .tab-pane {
    display: block;
    height: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden;
    width: 100%;
}

    .tab-content .tab-pane.active {
        height: auto;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        visibility: visible;
    }

.product-active .owl-nav button, .product-active-2 .owl-nav button {
    background: #dddddd none repeat scroll 0 0 !important;
    border-radius: 50%;
    font-size: 20px !important;
    height: 50px;
    line-height: 50px !important;
    margin: auto 0;
    position: absolute;
    right: auto;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 50px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .product-active .owl-nav button:hover, .product-active-2 .owl-nav button:hover {
        background: #fed700 !important;
        color: #fff;
    }

.product-active .owl-nav .owl-prev, .product-active-2 .owl-nav .owl-prev {
    left: 0;
}

.product-active .owl-nav .owl-next, .product-active-2 .owl-nav .owl-next {
    right: 0;
}

.product-active:hover .owl-nav button, .product-active-2:hover .owl-nav button {
    visibility: visible;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.section-title-2 {
    margin-bottom: 25px;
    position: relative;
    text-align: center;
}

    .section-title-2 > h2 {
        background: #ffffff none repeat scroll 0 0;
        display: inline-block;
        font-size: 24px;
        line-height: 24px;
        margin: 0;
        padding: 0 20px;
        position: relative;
        text-align: center;
    }

.product-image {
    position: relative;
}

.section-title-3 > h2 {
    background: #ffffff none repeat scroll 0 0;
    display: inline-block;
    font-size: 24px;
    line-height: 18px;
    margin: 0;
    padding: 0 30px 0 0;
    position: relative;
}

.section-title-3 {
    position: relative;
    margin-bottom: 25px;
}

.product-tabs-list-2 .nav {
    background: #ffffff none repeat scroll 0 0;
    padding-right: 50px;
    position: absolute;
    right: 0;
    top: 0;
}

    .product-tabs-list-2 .nav li {
        display: inline-block;
        padding: 0 0 0 20px;
        vertical-align: top;
    }

        .product-tabs-list-2 .nav li a {
            color: #555;
            cursor: pointer;
            display: block;
            font-size: 16px;
            line-height: 25px;
            position: relative;
            text-transform: capitalize;
            -webkit-transition: all 300ms ease-in 0s;
            transition: all 300ms ease-in 0s;
        }

            .product-tabs-list-2 .nav li a.active {
                color: #222;
            }

.product-active-3 .owl-nav button, .pos-product-active .owl-nav button, .latest-blog-active .owl-nav button {
    font-size: 22px !important;
    position: absolute;
    right: 15px;
    top: -55px;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

    .product-active-3 .owl-nav button.owl-prev, .pos-product-active .owl-nav button.owl-prev, .latest-blog-active .owl-nav button.owl-prev {
        right: 35px;
    }

    .product-active-3 .owl-nav button:hover, .pos-product-active .owl-nav button, .latest-blog-active .owl-nav button:hover {
        color: #fed700;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

        .product-active-3 .owl-nav button.owl-next, .pos-product-active .owl-nav button.owl-next, .latest-blog-active .owl-nav button.owl-next {
            background: #ffffff none repeat scroll 0 0;
            padding: 0 0 0 10px !important;
        }

        .product-active-3 .owl-nav button.owl-prev, .pos-product-active .owl-nav button.owl-prev, .latest-blog-active .owl-nav button.owl-prev {
            background: #ffffff none repeat scroll 0 0;
            padding: 0 0 0 15px !important;
        }
/*----------------------------------------*/
/*  2.5 Li's Banner
/*----------------------------------------*/
.li-banner {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}

    .li-banner > a, .single-banner > a, .featured-banner a {
        width: 100%;
        height: 100%;
        display: block;
        overflow: hidden;
        position: relative;
    }

        .li-banner > a::before,
        .single-banner > a::before {
            position: absolute;
            content: "";
            top: 15px;
            right: 15px;
            bottom: 15px;
            left: 15px;
            border: 1.5px solid #fff;
            opacity: 0;
            filter: alpha(opacity=0);
            -webkit-transition: opacity 0.35s,transform 0.35s;
            -moz-transition: opacity 0.35s,transform 0.35s;
            -ms-transition: opacity 0.35s,transform 0.35s;
            -o-transition: opacity 0.35s,transform 0.35s;
            transition: opacity 0.35s,transform 0.35s;
            -webkit-transform: translate3d(-10px,0,0);
            -moz-transform: translate3d(-10px,0,0);
            -ms-transform: translate3d(-10px,0,0);
            -o-transform: translate3d(-10px,0,0);
            transform: translate3d(-10px,0,0);
        }

    .li-banner:hover > a:before, .single-banner:hover > a:before {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .li-banner > a > img, .single-banner > a > img {
        width: 100%;
    }
/*----------------------------------------*/
/*  2.6 Li's Laptop Features
/*----------------------------------------*/
.li-section-title {
    border-bottom: 1px solid #e1e1e1;
    width: 100%;
    display: inline-block;
    position: relative;
}

    .li-section-title > h2 {
        float: left;
        font-size: 20px;
        color: #242424;
        font-weight: 500;
        letter-spacing: -.025em;
        padding: 0;
        line-height: 1;
        padding-bottom: 13px;
        z-index: 0;
    }
/*Li's Sub Category List*/
.li-sub-category-list {
    float: right;
    padding-bottom: 13px;
}

    .li-sub-category-list > li {
        display: inline-block;
    }

        .li-sub-category-list > li > a {
            color: #a4a4a4;
            font-size: 14px;
            margin: 0 20px 0;
            line-height: 20px;
            position: relative;
        }

            .li-sub-category-list > li > a::after, .li-section-title > h2 > span::before {
                content: "";
                position: absolute;
                bottom: -23px;
                background: #fed700;
                height: 1px;
                left: 0;
                right: 0;
                opacity: 0;
            }

.li-section-title > h2 > span {
    display: inline-block;
    position: relative;
}

    .li-section-title > h2 > span::before {
        opacity: 1;
        left: 0;
        right: 0;
        bottom: -22px;
    }

.li-sub-category-list > li:hover > a::after {
    opacity: 1;
}

.li-sub-category-list > li > a:hover {
    color: #242424;
}
/*----------------------------------------*/
/*  2.7 Li's Static Home Banner
/*----------------------------------------*/
.li-static-home-image {
    background-image: url(images/bg-banner/1.jpg);
    background-size: cover;
    height: 400px;
    background-repeat: no-repeat;
    border-radius: 0.5rem;
}

.li-static-home-content {
    padding-left: 75px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

    .li-static-home-content > p {
        margin: 0;
        color: #242424;
        font-size: 14px;
        margin-bottom: 20px;
        font-weight: 400;
        z-index: 99;
    }

        .li-static-home-content > p span {
            color: #e80f0f;
        }

    .li-static-home-content > h2 {
        font-weight: 400;
        font-size: 36px;
        line-height: 30px;
        letter-spacing: -.025em;
    }

    .li-static-home-content > h2 {
        color: #242424;
        font-weight: 400;
        font-size: 36px;
        line-height: 30px;
        letter-spacing: -.025em;
    }

    .li-static-home-content > p.schedule {
        font-size: 14px;
        color: #242424;
        margin-top: 20px;
        margin-bottom: 53px;
    }

        .li-static-home-content > p.schedule span {
            font-size: 24px;
            color: #e80f0f;
            font-weight: 500;
        }
/*----------------------------------------*/
/*  2.8 Li's Trending Products
/*----------------------------------------*/
.li-trending-product-tab {
    width: 100%;
    display: inline-block;
    margin: 0;
    border-bottom: 1px solid #e1e1e1;
}

    .li-trending-product-tab h2 {
        display: inline-block;
        margin: 0;
        text-align: left;
        line-height: 20px;
        font-size: 20px;
        font-weight: 500;
    }

    .li-trending-product-tab > h2 > span {
        position: relative;
        z-index: 999;
    }

        .li-trending-product-tab > h2 > span::before {
            content: "";
            position: absolute;
            background: #fed700;
            height: 1px;
            width: 100%;
            bottom: -10px;
            left: 0;
        }

.li-trending-product-menu {
    text-align: right;
    display: inline-block;
    float: right;
    width: auto;
    border-bottom: none;
}

    .li-trending-product-menu li {
        padding-right: 20px;
    }

        .li-trending-product-menu li:last-child {
            padding-right: 0;
        }

        .li-trending-product-menu li a {
            padding-right: 0px;
            border-right: none;
            font-size: 14px;
            cursor: pointer;
        }

.li-product-menu > li > a span::before,
.li-product-menu > li > a.active span::before {
    bottom: -12px;
}
/*----------------------------------------*/
/*  2.9 Footer
/*----------------------------------------*/
.footer {
    background: #deeaf7;
    border-top: 1px solid #e1e1e1;
}

/*Footer Static Bottom: fondo oscuro (equivalente a rgb(15, 23, 42) / slate-900)
  El proyecto no usa Tailwind, por lo que se define la variable de opacidad
  para conservar el valor solicitado: rgb(15 23 42 / var(--tw-bg-opacity)).*/
.footer-static-bottom {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity));
}

/*Legibilidad del contenido sobre el fondo oscuro (solo color, sin cambios de diseño)*/
.footer-static-bottom .footer-links > ul > li > a {
    color: #f5f5f5;
}

    .footer-static-bottom .footer-links > ul > li > a:hover {
        color: #ffffff;
    }

.footer-static-bottom .copyright a {
    color: #9dd8f7;
}

    .footer-static-bottom .copyright a:hover {
        color: #ffffff;
    }

.footer-static-top-3 {
    background: #fff;
    border-bottom: 1px solid #e1e1e1;
}

.footer-shipping {
    border-bottom: 1px dashed #e1e1e1;
}

.footer-static-top-3 .footer-shipping {
    border-bottom: none;
}
/*Li's Sipping Inner Box*/
.li-shipping-inner-box {
    text-align: center;
    z-index: 99;
}

.footer-static-top-3 .li-shipping-inner-box {
    border-right: 1px solid #e1e1e1;
    padding: 50px 10px 45px;
}

    .footer-static-top-3 .li-shipping-inner-box.last-child {
        border-right: none;
    }

.shipping-icon {
    display: inline-block;
    width: 67px;
    height: 57px;
}

.shipping-text {
    padding-top: 15px;
}

    .shipping-text h2 {
        font-size: 16px;
        font-weight: 500;
        color: #242424;
        padding-bottom: 10px;
    }

    .shipping-text p {
        margin: 0;
        color: #060606;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
    }
/*Footer Middle*/
.footer-logo-wrap {
    border-bottom: 1px dashed #e1e1e1;
}

.footer-static-middle .footer-logo p.info {
    margin: 20px 0 25px;
    font-size: 14px;
    line-height: 24px;
    color: #888;
}

.footer-static-middle .des > li {
    color: #888;
    font-size: 14px;
    margin: 0;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 15px;
}

.footer-static-middle ul.des > li span {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
}
/*Footer Block*/
.footer-block > h3 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    color: #242424;
    margin: 0 0 15px 0;
    cursor: pointer;
    padding-top: 20px;
    text-transform: capitalize;
}

.footer-block > ul > li {
    display: block;
    margin: 0;
    line-height: 32px;
    border: 0;
    padding: 0;
}

    .footer-block > ul > li > a {
        font-size: 14px;
        color: #050505;
        line-height: 32px;
        display: block;
        position: relative;
        transition: all 0.3s ease-in-out;
    }

        .footer-block > ul > li > a:hover {
            color: #242424;
            text-decoration: underline;
            transition: all 0.3s ease-in-out;
        }
/*Social Link*/
.social-link {
    line-height: 30px;
    margin-bottom: 10px;
    margin-top: 25px;
}

    .social-link > li {
        display: inline-block !important;
        transition: all 0.3s ease-in-out;
        float: none;
        margin-right: 12px !important;
        border-radius: 3px;
    }

        .social-link > li > a {
            width: 40px;
            height: 40px;
            line-height: 40px !important;
            text-align: center;
            display: inline-block;
        }

            .social-link > li > a > i {
                font-size: 28px;
                color: #fff;
                line-height: 1;
                vertical-align: middle;
            }

        .social-link > li:hover {
            -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        }
/*Social Link Color Variations*/
.twitter {
    background: #050300;
}

.tiktok {
    background: #050300;
}

.youtube {
    background: #ff0048;
}

.facebook {
    background: #3c5b9b;
}

.whatsapp {
    background: #19d523;
}

.instagram {
    background: #cf0abe;
}
/*Footer Newsletter*/
.footer-newsletter {
    float: left;
    width: 100%;
}

    .footer-newsletter > h4 {
        font-size: 20px;
        line-height: 24px;
        font-weight: 500;
        color: #242424;
        margin: 25px 0 25px 0;
        cursor: pointer;
        text-transform: capitalize;
    }

    .footer-newsletter .form-group {
        position: relative;
        float: left;
        width: 100%;
    }

        .footer-newsletter .form-group input {
            background: transparent;
            border: 1px solid #e1e1e1;
            padding: 0 135px 0 10px;
        }

        .footer-newsletter .form-group .btn {
            position: absolute;
            right: 0;
            background: #1c7cf9;
            border: none;
            color: #f9f8f8;
            height: 45px;
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 500;
            padding: 0 28px;
            display: block;
            line-height: 29px;
            top: 0;
            transition: all 0.5s ease-in-out;
        }

            .footer-newsletter .form-group .btn:hover {
                background: #333333;
                color: #ffffff;
            }
/*Footer Static Bottom*/
.footer-links {
    padding: 0 40px 20px;
}

    .footer-links > ul {
        text-align: center;
    }

        .footer-links > ul > li {
            display: inline-block;
            position: relative;
        }

            .footer-links > ul > li > a {
                color: #040404;
                line-height: 24px;
                letter-spacing: 0.3px;
            }

            .footer-links > ul > li::after {
                content: "/";
                color: #888;
            }

            .footer-links > ul > li > a:hover {
                color: #242424;
                text-decoration: underline;
            }
/*----------------------------------------*/
/*  03. Home Page Two
/*----------------------------------------*/
.li-header-4 {
    background: #9ad5f5;
}

    .li-header-4 .header-top {
        background: transparent;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .li-header-4 .header-top-left > ul > li span,
    .li-header-4 .header-top-left > ul > li a {
        color: #fff;
    }

    .li-header-4 .ht-menu > li span,
    .li-header-4 .ht-menu > li .ht-setting-trigger span::after,
    .li-header-4 .ht-menu > li .ht-currency-trigger span::after,
    .li-header-4 .ht-menu > li .ht-language-trigger span::after {
        color: #fff;
    }

    .li-header-4 .hm-wishlist > a {
        background: #ffffff;
    }

    .li-header-4 .header-bottom {
        background: #9ad5f5;
        border-top: 1px solid rgba(255,255,255,.1);
        color: #ffffff;
    }

    .li-header-4 .hb-menu nav > ul > li > a,
    .li-header-4 .hb-menu nav > ul > li > a:after {
        color: #ffffff;
        transition: all 0.3s ease-in-out;
    }

    .li-header-4 .hb-menu nav > ul > li:hover > a,
    .li-header-4 .hb-menu nav > ul > li:hover > a::after {
        color: #fed700;
    }
/*Header Bottom*/
.hb-info {
    line-height: 50px;
}
/*Category Menu*/
.category-menu {
    position: relative;
}

.category-heading {
    position: relative;
    cursor: pointer;
    background: #fed700;
    height: 55px;
    border-radius: 3px 3px 0 0;
    border-bottom: 3px solid #fed700;
}

    .category-heading > h2 {
        margin: 0;
        color: #242424;
        line-height: 55px;
        padding: 0;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 500;
        position: relative;
    }

.categories-toggle > span {
    padding-left: 10px;
}

.category-heading > h2::before {
    font-size: 20px;
    vertical-align: top;
    content: '\f00a';
    font-family: fontawesome;
    font-weight: normal;
    text-align: center;
    line-height: 55px;
    color: #242424;
    float: left;
    display: block;
    padding-left: 30px;
}

.category-heading > h2::after {
    content: "\f107";
    height: 10px;
    position: absolute;
    top: 0;
    right: 20px;
    font-family: fontawesome;
}

.category-heading > h2 > i {
    float: 0;
    text-align: 0;
    float: right;
    padding-right: 20px;
    font-size: 12px;
}

.category-menu-list {
    position: absolute;
    left: 0;
    top: calc(100% - 1px);
    display: block;
    width: 100%;
    border: 1px solid #e7e7e7;
    z-index: 9;
}

.category-menu-2 .category-menu-list > ul {
    background: #fff;
    border-radius: 0px 0px 4px 4px;
}

.category-menu-list > ul > li {
    list-style: none;
    padding: 3.2px 20px 3.2px 29px;
    position: relative;
    background: #fff;
}

.category-menu-2 .category-menu-list > ul > li {
    padding: 0.5px 20px 0.5px 29px;
}

.header-bottom-area.header-style-3 .category-menu-list > ul > li:first-child {
    border-top: 1px solid #ebebeb;
}

.category-menu-list > ul > li > a,
.cat-dropdown > li > a {
    display: block;
    text-transform: capitalize;
    color: #333;
    height: 40px;
    line-height: 39px;
    overflow: hidden;
    font-size: 13px;
}

    .category-menu-list > ul > li > a:hover,
    .cat-dropdown > li > a:hover {
        color: #007bfe;
    }

        .category-menu-list > ul > li > a:hover:before {
            background: #58b4f6;
            border-color: #0083fe;
        }

.category-menu-list > ul > li:last-child > a:before {
    display: none;
}

.category-menu-list > ul > li.right-menu > a::after {
    content: "\f107";
    font-family: FontAwesome;
    float: right;
    vertical-align: top;
    transition: all 0.3s ease-in-out;
}

.category-menu-list > ul > li.right-menu > a:hover::after {
    transform: rotate(-90deg);
}

.category-menu-list > ul > li.rx-parent > a,
.category-menu-list > ul > li.rx-show a {
    font-size: 14px;
    font-weight: 400;
    color: #242424;
    position: relative;
    padding-left: 20px;
}

.rx-parent {
    cursor: pointer;
    border-top: 1px solid #e1e1e1;
}

    .rx-parent a.rx-default i, .rx-parent a.rx-show i {
        position: absolute;
        left: 0;
        top: 12px;
    }

li.rx-parent a.rx-default::after {
    content: "\f067";
    font-family: fontawesome;
    position: absolute;
    left: 0;
    top: 0;
}

li.rx-parent a.rx-show::after {
    content: "\f068";
    font-family: fontawesome;
    position: absolute;
    left: 0;
    top: 0;
}

.category-menu-list ul > li span.fa {
    float: left;
    padding-top: 13px;
    margin-left: -15px;
    margin-right: 15px;
}

.rx-child, .category-menu-list ul li a.rx-show {
    display: none;
}

.category-menu-list ul li.rx-change a.rx-show {
    display: block;
}

.category-menu-list ul li.rx-change a.rx-default {
    display: none;
}

.cat-dropdown, .cat-mega-menu {
    position: absolute;
    top: 0;
    left: 100%;
    background: #ffffff;
    z-index: 999;
    width: 220px;
    border: 1px solid #e5e5e5;
    box-shadow: none;
    border: 1px solid #ededed;
    box-shadow: 4px 4px 4px -3px #808080;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .cat-dropdown li,
    .cat-mega-menu ul li {
        list-style: none;
    }

    .cat-dropdown > li > a {
        font-size: 14px;
    }

        .cat-dropdown > li > a:hover {
            color: #fed700;
        }

.cat-mega-menu {
    width: 540px;
    padding: 4px 0 10px 0;
    overflow: hidden;
}

li.right-menu .cat-mega-menu > li, li.right-menu .cat-mega-menu-2 > li {
    width: 33.333%;
    float: left;
    padding: 15px 20px 10px 30px;
    list-style: none;
}

li.right-menu .cat-mega-menu-2 > li {
    width: 50%;
}

.cat-mega-menu > li.cat-mega-title > a {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 13px;
    margin-bottom: 15px;
    display: block;
    line-height: 36px;
    position: relative;
}

.cat-mega-menu > li > ul > li > a {
    font-size: 13px;
    display: block;
    line-height: 25px;
}

    .cat-mega-menu > li > ul > li > a:hover {
        color: #fed700;
    }

.category-menu-list > ul > li:hover .cat-dropdown, .category-menu-list > ul > li:hover .cat-mega-menu {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible;
}

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

.search-categories > form {
    position: relative;
    width: 100%;
    float: left;
    height: 50px;
    color: #a9a9a9;
}
/*----------------------------------------*/
/*  04. Home Page Three
/*----------------------------------------*/
/*Li's Featured Product With Banner*/
.featured-pro-with-banner {
    background: #f7f7f7;
    padding: 50px 0 30px;
    margin-top: 50px;
}

.featured-product-img {
    width: 38%;
    float: left;
    padding: 15px;
}

.featured-manufacturer {
    color: #a4a4a4;
    font-size: 13px;
    margin-top: 9px;
    font-weight: 400;
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

.featured-product-active .owl-item {
    padding: 15px;
}

.featured-pro-wrapper {
    display: inline-block;
    width: 100%;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
}

    .featured-pro-wrapper:hover {
        box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
    }

    .featured-pro-wrapper .product-img {
        float: left;
        width: 38%;
        padding: 18.2px;
    }

    .featured-pro-wrapper .featured-pro-content {
        float: right;
        width: 62%;
        padding: 18.2px;
    }

.featured-pro-content h4 a {
    font-size: 14px;
    font-weight: 500;
    color: #0363cd;
}

.featured-pro-content h4:hover {
    text-decoration: underline;
    color: #0363cd;
}

.featured-pro-content .rating-box {
    padding-top: 5px;
}

.featured-pro-wrapper:hover .featured-price-box {
    opacity: 0;
}

.featured-product-action .add-actions-link {
    margin-top: 0;
    padding-top: 0;
}

.featured-product-action {
    position: relative;
    top: 20px;
    transition: all 0.5s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

.featured-pro-wrapper:hover .featured-product-action {
    top: 0;
    opacity: 1;
    visibility: visible;
}

.featured-price-box {
    transition: all 0.5s ease-in-out;
}
/*----------------------------------------*/
/*  05. Home Page Four
/*----------------------------------------*/
.product-img {
    width: 30%;
    float: left;
    padding: 15px;
}

.featured-pro-content {
    width: 70%;
    float: right;
    padding: 15px;
}
/*----------------------------------------*/
/*  6.1 Li's Shop Page
/*----------------------------------------*/
.hb-megamenu > li ul > li.active > a {
    color: #0037fe;
}

.header-bottom-other-page {
    margin-bottom: 0;
}
/*Li's Breadcrumb*/
.breadcrumb-area {
    padding: 10px 0 10px;
    background: #f9f9f9;   
    
}

.breadcrumb-content li {
    color: #a4a4a4;
    display: inline-block;
    font-size: 14px;
    margin-right: 28px;
    position: relative;
    
}

    .breadcrumb-content li a {
        color: #242424;
    }

        .breadcrumb-content li a:hover {
            color: #242424;
        }

    .breadcrumb-content li::before {
        background-color: #aaaaaa;
        content: "";
        height: 2px;
        position: absolute;
        right: -22px;
        top: 10px;
        transform: rotate(-67deg);
        transition: all 0.4s ease 0s;
        width: 12px;
    }

    .breadcrumb-content li:last-child::before {
        display: none;
    }

.product-layout-list {
    border-bottom: 1px solid #e1e1e1;
    margin: 40px auto 0;
}

    .product-layout-list.last-child {
        border-bottom: none;
    }

.category-block {
    box-shadow: none;
    background: transparent;
    padding: 0 15px;
    margin-bottom: 30px;
    background: #f4f4f4;
    border: 1px solid #e1e1e1;
}

.category-widget-top-menu > li > h6 > a {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #242424;
    text-transform: capitalize !important;
    border-bottom: 1px solid #e1e1e1;
    padding: 20px 0;
    margin-bottom: 30px;
    position: relative;
    display: block;
    letter-spacing: -.025em;
}

.shop-add-action {
    opacity: 1;
    top: 0;
    background: #f7f7f7;
    border: 1px solid #e1e1e1;
    padding: 30px 0 30px 30px;
}

    .shop-add-action .add-actions-link {
        margin: 0;
        padding: 0;
    }

        .shop-add-action .add-actions-link li.add-cart {
            margin: 0 0 25px;
            ;
        }

        .shop-add-action .add-actions-link li.wishlist,
        .shop-add-action .add-actions-link li:last-child {
            display: block;
            width: 100%;
            background: transparent;
        }

            .shop-add-action .add-actions-link li.wishlist a,
            .shop-add-action .add-actions-link li:last-child a.quick-view {
                text-align: left;
                background: transparent;
                font-size: 14px;
            }

.product-list-view .shop-add-action ul li a i {
    padding-right: 10px;
}
/*----------------------------------------*/
/* 6.2 Li's Frequently Asked Question(FAQ)
/*----------------------------------------*/
.frequently-desc {
    margin-bottom: 25px;
}

    .frequently-desc h3 {
        color: #242424;
        font-size: 14px;
        font-weight: 400;
        text-transform: capitalize;
    }

    .frequently-desc p {
        margin: 0;
        font-size: 13px;
    }

.frequently-accordion .card.actives {
    border: 1px solid #3792f4;
}

.frequently-accordion .card {
    border-radius: 0;
    margin-bottom: 15px;
}

.frequently-accordion .card-header {
    padding: 0;
    margin-bottom: 0;
    background-color: #f5f5f5;
    border: 0;
}

    .frequently-accordion .card-header a.collapsed:before,
    .frequently-accordion .card-header a:after {
        content: "\f067";
        font-family: fontawesome;
        position: absolute;
        right: 15px;
        top: 15px;
        color: #b9b9b9;
    }

    .frequently-accordion .card-header a:after {
        content: "\f068 ";
    }

    .frequently-accordion .card-header a {
        display: block;
        padding: 15px 10px 15px 25px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        text-transform: capitalize;
    }

        .frequently-accordion .card-header a:hover {
            color: #3792f4 !important;
        }
/*----------------------------------------*/
/* 6.3 Li's Wishlist Page
/*----------------------------------------*/
.table-content table {
    background: #fff none repeat scroll 0 0;
    border-color: #ebebeb;
    border-radius: 0;
    border-style: solid;
    border-width: 1px 0 0 1px;
    text-align: center;
    width: 100%;
    margin-bottom: 0;
}

    .table-content table th,
    .table-content table td {
        border-bottom: 1px solid #ebebeb;
        border-right: 1px solid #ebebeb;
    }

    .table-content table th {
        border-top: medium none;
        font-size: 15px;
        text-transform: capitalize;
        padding: 20px 10px;
        text-align: center;
        font-weight: 500;
        vertical-align: middle;
        white-space: nowrap;
    }

    .table-content table td {
        border-top: medium none;
        padding: 20px 10px;
        vertical-align: middle;
        font-size: 13px;
    }

        .table-content table td.li-product-remove {
            font-size: 20px;
        }

.li-product-remove > a > i {
    font-size: 14px;
    font-weight: normal;
    color: #242424;
    transition: all 0.3s ease-in-out;
}

.li-product-remove > a:hover i {
    color: #56acfd;
}

.li-product-remove > i:hover {
    color: #56acfd;
}

.table-content table td.li-product-name {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}

.table-content table td.li-product-price {
    font-size: 16px;
    font-weight: 700;
}

.table-content table td.li-product-stock-status span.in-stock,
.table-content table td.li-product-stock-status span.out-stock {
    color: #00b5ff;
    font-size: 12px;
    text-transform: capitalize;
}

.table-content table td.li-product-stock-status span.out-stock {
    color: #EB3E32;
}

.table-content table td.li-product-add-cart a {
    font-size: 14px;
    text-transform: uppercase;
    background: #007bff;
    color: #fff;
    padding: 10px 20px;
    font-weight: 700;
    display: inline-block;
}

@media only screen and (max-width: 767px) {
    .table-content table td.li-product-add-cart a {
        font-size: 10px;
        padding: 7px 7px;
    }
}

.table-content table td.li-product-add-cart a:hover {
    background: #00b5ff none repeat scroll 0 0;
    color: #fff;
}
/*----------------------------------------*/
/* 6.4 Li's Checkout Page
/*----------------------------------------*/
.coupon-accordion h3 {
    background-color: #f7f6f7;
    border-top: 3px solid #0059ff;
    color: #515151;
    font-size: 14px;
    font-weight: 400;
    list-style: outside none none;
    margin: 0 0 30px;
    padding: 16px 32px 16px 56px;
    position: relative;
    width: auto;
    text-transform: none;
}

    .coupon-accordion h3::before {
        color: #0059ff;
        content: "\f133";
        display: inline-block;
        font-family: "fontawesome";
        left: 24px;
        position: absolute;
        top: 16px;
    }

.coupon-accordion span {
    color: #6f6f6f;
    cursor: pointer;
    transition: all 0.3s ease-in-out 0s;
    text-transform: none;
}

    .coupon-accordion span:hover {
        color: #0059ff;
    }

.coupon-content {
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;
    display: none;
    padding: 20px;
}

.coupon-info p {
    margin-bottom: 0;
}

    .coupon-info p.form-row-first label,
    .coupon-info p.form-row-last label {
        display: block;
    }

        .coupon-info p.form-row-first label span.required,
        .coupon-info p.form-row-last label span.required {
            color: red;
            font-weight: 700;
            font-size: 14px;
        }

    .coupon-info p.form-row-first input,
    .coupon-info p.form-row-last input {
        border: 1px solid #e5e5e5;
        height: 36px;
        margin: 0 0 14px;
        border-radius: 0;
        max-width: 100%;
        padding: 0 0 0 10px;
        width: 370px;
        background-color: transparent;
    }

    .coupon-info p.form-row input[type="submit"] {
        background: #252525 none repeat scroll 0 0;
        border: medium none;
        border-radius: 0;
        box-shadow: none;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        float: none;
        font-size: 12px;
        height: 40px;
        line-height: 40px;
        margin-right: 15px;
        padding: 0 30px;
        text-shadow: none;
        text-transform: uppercase;
        -webkit-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        white-space: nowrap;
        width: inherit;
    }

        .coupon-info p.form-row input[type="submit"]:hover,
        p.checkout-coupon input[type="submit"]:hover {
            background: #fed700;
        }

.form-row > label {
    margin-top: 7px;
}

.coupon-info p.form-row input[type="checkbox"] {
    height: inherit;
    position: relative;
    top: 2px;
    width: inherit;
}

p.lost-password {
    margin-top: 15px;
}

    p.lost-password a {
        color: #6f6f6f;
    }

        p.lost-password a:hover {
            color: #fed700;
        }

.coupon-checkout-content {
    margin-bottom: 30px;
    display: none;
}

p.checkout-coupon input[type="text"] {
    background-color: transparent;
    border: 1px solid #ddd;
    border-radius: 0;
    height: 36px;
    padding-left: 10px;
    width: 170px;
}

p.checkout-coupon input[type="submit"] {
    background: #333 none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    color: #fff;
    height: 36px;
    cursor: pointer;
    margin-left: 6px;
    padding: 5px 10px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: inherit;
}

    .coupon-info p.form-row input[type="submit"]:hover,
    p.checkout-coupon input[type="submit"]:hover {
        background: #fed700;
    }

.checkbox-form h3 {
    border-bottom: 1px solid #e5e5e5;
    font-size: 25px;
    margin: 0 0 25px;
    padding-bottom: 10px;
    text-transform: uppercase;
    width: 100%;
}

.country-select {
    margin-bottom: 25px;
}

.checkout-form-list {
    margin-bottom: 30px;
}

    .country-select label,
    .checkout-form-list label {
        color: #333;
        margin: 0 0 5px;
        display: block;
    }

        .country-select label span.required,
        .checkout-form-list label span.required {
            color: #0059ff;
            display: inline-block;
            font-size: 24px;
            line-height: 16px;
            position: relative;
            top: 5px;
        }

    .checkout-form-list input[type="text"],
    .checkout-form-list input[type="password"],
    .checkout-form-list input[type="email"] {
        background: #f1f1f1 none repeat scroll 0 0;
        border: 1px solid #e5e5e5;
        border-radius: 0;
        height: 42px;
        width: 100%;
        padding: 0 0 0 10px;
        border-radius: 4px;
    }

    .checkout-form-list input[type="checkbox"] {
        display: inline-block;
        height: inherit;
        margin-right: 10px;
        position: relative;
        top: 2px;
        width: inherit;
    }

.create-acc label {
    color: #333;
    display: inline-block;
}

.ship-different-title h3 label {
    display: inline-block;
    margin-right: 20px;
    font-size: 25px;
    color: #363636;
}

.ship-different-title input {
    height: inherit;
    line-height: normal;
    margin: 4px 0 0;
    position: relative;
    top: 1px;
    width: auto;
}

.order-notes textarea {
    background-color: transparent;
    border: 1px solid #ddd;
    height: 90px;
    padding: 15px;
    width: 100%;
}

.create-account,
#ship-box-info {
    display: none;
}

.your-order {
    background: #f2f2f2 none repeat scroll 0 0;
    padding: 10px 10px 15px;
    border-radius: 4px;
}

    .your-order h3 {
        border-bottom: 1px solid #d8d8d8;
        font-size: 25px;
        margin: 0 0 20px;
        padding-bottom: 10px;
        text-transform: uppercase;
        width: 100%;
    }

.your-order-table table {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    width: 100%;
}

thead {
    background-color: #f6f6f6;
}

.your-order-table table th {
    border-top: medium none;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    width: 250px;
}

.your-order-table table th,
.your-order-table table td {
    border-bottom: 1px solid #d8d8d8;
    border-right: medium none;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    padding: 15px 0;
    text-align: center;
}

.your-order-table table tr.cart_item:hover {
    background: #F9F9F9;
}

.your-order-table table .order-total td {
    border-bottom: medium none;
}

.your-order-table table tr.order-total td span {
    color: #464646;
    font-size: 20px;
}

.your-order-table table .order-total th {
    border-bottom: medium none;
    font-size: 18px;
}

.payment-method {
    margin-top: 40px;
}

.payment-accordion .card {
    border: 0;
    border-radius: 0;
    background: #f2f2f2;
}

.payment-accordion .card-header {
    padding: 0;
    margin-bottom: 0;
    background-color: #f2f2f2;
    border-bottom: 0;
}

.payment-accordion .card-body {
    padding: 0;
}

.payment-accordion .panel.panel-default {
    margin-bottom: 20px;
}

.payment-accordion h5.panel-title {
    color: #444;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
}

    .payment-accordion h5.panel-title > a:hover {
        color: #065bf8 !important;
    }
  
.payment-accordion .card-body > p {
    color: #515151;
}

.order-button-payment input {
    background: #065bf8 none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    height: 50px;
    margin: 20px 0 0;
    padding: 0;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    border: 1px solid transparent;
    cursor: pointer;
    border-radius: 5px;
}

    .order-button-payment input:hover {
        background: #7baee8 none repeat scroll 0 0;
    }
/*----------------------------------------*/
/* 6.5 Li's Login Register
/*----------------------------------------*/
.login-title {
    font-size: 20px;
    line-height: 23px;
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 30px;
}

.login-form {
    background-color: #ffffff;
    padding: 30px;
    -webkit-box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.1);
}

    .login-form label {
        display: block;
        font-size: 14px;
        margin-bottom: 12px;
        font-weight: 500;
        text-transform: capitalize;
    }

    .login-form .nice-select {
        width: 100%;
        background-color: transparent;
        border: 1px solid #999999;
        border-radius: 0;
        line-height: 23px;
        padding: 10px 20px;
        font-size: 14px;
        height: 45px;
        color: #7a7a7a;
        margin-bottom: 15px;
    }

        .login-form .nice-select::after {
            width: 6px;
            height: 6px;
            border-width: 1px;
            right: 20px;
            border-color: #7a7a7a;
        }

        .login-form .nice-select .current {
            color: #7a7a7a;
            display: block;
            line-height: 23px;
        }

        .login-form .nice-select .list {
            width: 100%;
        }

    .login-form input {
        width: 100%;
        background-color: #f7f7f7;
        border: 1px solid #28a745;
        border-radius: 4px;
        line-height: 23px;
        padding: 10px 20px;
        font-size: 14px;
        color: #7a7a7a;
        margin-bottom: 15px;
    }

        .login-form input[type="checkbox"] {
            width: auto;
        }

    .login-form .check-box {
        float: left;
        margin-right: 70px;
    }

        .login-form .check-box:last-child {
            margin-right: 0;
        }

        .login-form .check-box input[type="checkbox"] {
            display: none;
        }

            .login-form .check-box input[type="checkbox"] + label {
                position: relative;
                padding-left: 30px;
                line-height: 20px;
                font-size: 14px;
                font-weight: 400;
                color: #363f4d;
                margin: 0;
            }

                .login-form .check-box input[type="checkbox"] + label::before {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 20px;
                    height: 20px;
                    display: block;
                    border: 2px solid #999999;
                    content: "";
                    -webkit-transition: all 0.3s ease 0s;
                    -o-transition: all 0.3s ease 0s;
                    transition: all 0.3s ease 0s;
                }

                .login-form .check-box input[type="checkbox"] + label::after {
                    position: absolute;
                    left: 0;
                    top: 0;
                    display: block;
                    content: "\f00c";
                    font-family: Fontawesome;
                    font-size: 12px;
                    line-height: 20px;
                    opacity: 0;
                    color: #363f4d;
                    width: 20px;
                    text-align: center;
                    -webkit-transition: all 0.3s ease 0s;
                    -o-transition: all 0.3s ease 0s;
                    transition: all 0.3s ease 0s;
                }

            .login-form .check-box input[type="checkbox"]:checked + label::before {
                border: 2px solid #363f4d;
            }

            .login-form .check-box input[type="checkbox"]:checked + label::after {
                opacity: 1;
            }

/*-- Place Order --*/
.register-button {
    display: block;
    margin-top: 40px;
    width: 140px;
    border-radius: 0;
    height: 36px;
    border: none;
    line-height: 24px;
    padding: 6px 20px;
    float: left;
    font-weight: 400;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #1c81f5;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

    .register-button:hover {
        background: #7baee8;
    }
/*----------------------------------------*/
/* 	6.6 Li's Shopping Cart
/*----------------------------------------*/
.li-product-quantity input {
    border: none;
    color: #222555;
    font-size: 14px;
    font-weight: normal;
    border: 1px solid #ededed;
    height: 40px;
    width: 55px;
}

.li-product-quantity > input {
    width: 80px;
    border-radius: 3px;
}

    .li-product-quantity > input:focus {
        background: #eceff8;
    }

.table-content table td.product-subtotal {
    font-size: 16px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: #414141;
}

.table-content table td .cart-plus-minus {
    float: none;
    margin: 0 auto;
}

.coupon-all {
    margin-top: 30px;
}

.coupon {
    float: left;
}

    .coupon input {
        background-color: transparent;
        border: 1px solid #ddd;
        color: #333;
        font-size: 13px;
        border-radius: 0;
        height: 42px;
        width: 120px;
    }

.coupon-all input.button {
    background-color: #065bf8;
    border: 0 none;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    height: 42px;
    letter-spacing: 1px;
    line-height: 42px;
    padding: 0 25px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    width: inherit;
}

    .coupon-all input.button:hover {
        background: #45b8f7;
    }

.coupon2 {
    float: right;
}

.cart-page-total {
    padding-top: 30px;
}

    .cart-page-total > h2 {
        font-size: 25px;
        font-weight: 700;
        margin-bottom: 20px;
        text-transform: capitalize;
    }

    .cart-page-total > ul {
        border: 1px solid #ddd;
    }

        .cart-page-total > ul > li {
            list-style: none;
            font-size: 15px;
            color: #252525;
            padding: 10px 30px;
            border-bottom: 1px solid #ebebeb;
            font-weight: 700;
            font-family: 'Montserrat', sans-serif;
        }

    .cart-page-total ul > li > span {
        float: right;
    }

    .cart-page-total li:last-child {
        border-bottom: 0;
    }

    .cart-page-total > a {
        background-color: #065bf8;
        border: 1px solid #ffffff;
        border-radius: 5px;
        color: #ffffff;
        display: inline-block;
        margin-top: 30px;
        padding: 10px 20px;
        text-transform: capitalize;
        -webkit-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }

        .cart-page-total > a:hover {
            background: #45b8f7;
            border-color: #065bf8;
        }
/*----------------------------------------*/
/* 6.7 Li's Blog Page
/*----------------------------------------*/
.li-sidebar-search-form .li-search-field {
    width: calc(100% - 50px);
    border: 1px solid #ccc;
    padding: 0 10px;
    color: #666666;
    font-size: 14px;
    height: 50px;
    float: left;
    text-transform: capitalize;
}

.li-sidebar-search-form .li-search-field {
    width: calc(100% - 50px);
    border: 1px solid #e1e1e1;
    padding: 0 10px;
    color: #242424;
    font-size: 14px;
    height: 50px;
    float: left;
    text-transform: capitalize;
    background: #ffffff;
}

.li-sidebar-search-form .li-search-btn {
    width: 50px;
    height: 50px;
    margin-left: -4px;
    text-align: center;
    cursor: pointer;
    background-color: #f8f8f8;
    border: 1px solid #e1e1e1;
}

    .li-sidebar-search-form .li-search-btn i {
        font-size: 20px;
        line-height: 50px;
        color: #242424;
        transition: all 0.3s ease-in-out;
    }

    .li-sidebar-search-form .li-search-btn:hover i {
        color: #fed700;
    }

.li-blog-sidebar .li-blog-sidebar-title {
    color: #242424;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 52px;
    font-family: Poppins;
}

    .li-blog-sidebar .li-blog-sidebar-title::before {
        width: 55px;
        height: 2px;
        bottom: -25px;
        left: 0;
        background-color: #fed700;
        content: "";
        position: absolute;
    }

.li-blog-sidebar .li-blog-archive li {
    margin-bottom: 20px;
}

.li-blog-sidebar .li-recent-post {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

    .li-blog-sidebar .li-recent-post .li-recent-post-thumb {
        width: 65px;
        border: 1px solid #e1e1e1;
    }

    .li-blog-sidebar .li-recent-post .li-recent-post-des {
        padding-left: 10px;
    }

        .li-blog-sidebar .li-recent-post .li-recent-post-des span {
            display: block;
            font-size: 13px;
            font-weight: 600;
            padding: 10px 0;
            text-transform: capitalize;
        }

            .li-blog-sidebar .li-recent-post .li-recent-post-des span a {
                color: #242424;
                font-weight: 400;
            }

                .li-blog-sidebar .li-recent-post .li-recent-post-des span a:hover {
                    color: #fed700;
                }

            .li-blog-sidebar .li-recent-post .li-recent-post-des span.li-post-date {
                color: #242424;
                font-size: 13px;
                font-weight: 400;
            }

.li-blog-sidebar .li-blog-tags li {
    display: inline-block;
    margin-bottom: 15px;
}

    .li-blog-sidebar .li-blog-tags li a {
        color: #242424;
        font-size: 13px;
        border: 1px solid #e1e1e1;
        padding: 5px 15px;
        display: inline-block;
        text-transform: uppercase;
    }

        .li-blog-sidebar .li-blog-tags li a:hover {
            color: #ffffff;
            background-color: #fed700;
            border-color: #fed700;
        }

.li-blog-single-item .li-blog-content .li-blog-details h3 {
    color: #242424;
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
    text-transform: capitalize;
    font-family: Poppins;
    padding-bottom: 15px;
    margin: 0;
}

.li-blog-single-item .li-blog-content .li-blog-details .li-blog-meta {
    padding: 5px 0 22px;
}

.li-blog-content p {
    margin-bottom: 20px;
}

.li-blog-single-item .li-blog-content .li-blog-details .li-blog-meta a {
    color: #a4a4a4;
    font-size: 12px;
    text-transform: uppercase;
    position: relative;
    margin-right: 10px;
    transition: all 0.3s ease-in-out;
}

    .li-blog-single-item .li-blog-content .li-blog-details .li-blog-meta a:hover {
        color: #fed700;
    }

    .li-blog-single-item .li-blog-content .li-blog-details .li-blog-meta a i {
        font-size: 16px;
        vertical-align: middle;
        margin-right: 5px;
    }

.li-blog-single-item .li-blog-content .li-blog-details .li-blog-meta p {
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
    color: #898989;
    margin-bottom: 10px;
}

.slick-dot-style ul.slick-dots {
    bottom: 20px;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

    .slick-dot-style ul.slick-dots li {
        display: inline-block;
        margin: 0 5px;
    }

        .slick-dot-style ul.slick-dots li button {
            width: 12px;
            height: 12px;
            line-height: 12px;
            padding: 0;
            background-color: #fed700;
            border: none;
            border-radius: 50%;
            display: block;
            text-indent: -5000px;
            cursor: pointer;
            -webkit-transition: all 0.4s ease-out;
            -moz-transition: all 0.4s ease-out;
            -o-transition: all 0.4s ease-out;
            transition: all 0.4s ease-out;
        }

        .slick-dot-style ul.slick-dots li.slick-active button {
            background-color: #fed700;
            width: 30px;
            border-radius: 10px;
        }

.li-paginatoin-area {
    border-top: 1px solid #e1e1e1;
}

    .li-paginatoin-area .li-pagination-box li {
        display: inline-block;
    }

        .li-paginatoin-area .li-pagination-box li a {
            color: #242424;
            padding: 10px;
        }

        .li-paginatoin-area .li-pagination-box li.active a {
            color: #fed700;
        }

        .li-paginatoin-area .li-pagination-box li a:hover {
            color: #fed700;
        }
/*BLog Details*/
.li-blog-blockquote blockquote {
    border: 1px solid #e1e1e1;
    padding: 40px;
    position: relative;
    margin: 25px 0;
    font-style: italic;
    background: #f7f7f7;
}

.li-blog-blockquote {
    padding: 0 0 0 40px;
}

    .li-blog-blockquote blockquote > p::before {
        content: "";
        background: #fed700;
        position: absolute;
        width: 5px;
        height: 100%;
        top: 0;
        left: 0;
    }

.li-tag-line {
    padding: 25px 0 18px;
    margin-top: 20px;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}

    .li-tag-line h4 {
        color: #242424;
        font-size: 14px;
        font-weight: 600;
        text-transform: capitalize;
        display: inline-block;
        padding-right: 5px;
    }

    .li-tag-line a {
        font-style: italic;
        text-transform: capitalize;
        color: #242424;
        transition: all 0.3s ease-in-out;
    }

        .li-tag-line a:hover {
            color: #fed700;
        }

.li-blog-sharing h4 {
    color: #242424;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    display: block;
    padding-bottom: 26px;
    margin-bottom: 0;
}

.li-blog-sharing a {
    color: #292825;
    font-size: 16px;
    height: 36px;
    width: 36px;
    text-align: center;
    line-height: 36px;
    display: inline-block;
    margin-right: 5px;
    background-color: #e1e1e1;
    border: 1px solid #e1e1e1;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

    .li-blog-sharing a:hover {
        color: #ffffff;
        background-color: #fed700;
        border-color: #fed700;
    }

.li-comment-section h3 {
    color: #242424;
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 25px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.li-comment-section ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px 20px;
    margin-bottom: 30px;
    border: 1px solid #e1e1e1;
}

    .li-comment-section ul li .author-avatar {
        -ms-flex-preferred-size: 70px;
        flex-basis: 70px;
    }

    .li-comment-section ul li .comment-body {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

        .li-comment-section ul li .comment-body h5 {
            color: #242424;
            font-size: 14px;
            font-weight: 600;
            padding-bottom: 5px;
            text-transform: capitalize;
        }

        .li-comment-section ul li .comment-body .comment-post-date {
            color: #888888;
            padding-bottom: 10px;
        }

        .li-comment-section ul li .comment-body .reply-btn {
            float: right;
        }

            .li-comment-section ul li .comment-body .reply-btn a {
                color: #fed700;
                font-size: 12px;
                display: inline-block;
                padding: 3px 15px;
                -webkit-border-radius: 20px;
                -moz-border-radius: 20px;
                border-radius: 20px;
                text-transform: capitalize;
                border: 1px solid #fed700;
            }

                .li-comment-section ul li .comment-body .reply-btn a:hover {
                    color: #ffffff;
                    background-color: #fed700;
                }

    .li-comment-section ul li.comment-children {
        margin-left: 40px;
    }

.li-blog-comment-wrapper h3 {
    color: #242424;
    font-size: 18px;
    font-weight: 600;
    padding: 0 0 26px;
    text-transform: uppercase;
    border-bottom: 1px solid #e1e1e1;
    margin-bottom: 0;
}

.li-blog-comment-wrapper p {
    padding: 25px 0 3px;
}

.li-blog-comment-wrapper .comment-post-box label {
    color: #242424;
    font-weight: 600;
    margin-bottom: 25px;
    display: block;
    text-transform: capitalize;
}

.li-blog-comment-wrapper .comment-post-box textarea {
    height: 130px;
    margin-bottom: 20px;
    padding: 10px;
    width: 100%;
    background: #f8f8f8;
    border: none;
}

.li-blog-comment-wrapper .comment-post-box .coment-field {
    background: #f8f8f8;
    border: none;
    color: #666666;
    padding: 8px 10px;
    width: 100%;
}

.li-btn-2 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    line-height: 40px;
    border: none;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fed700;
    padding: 0 20px;
    text-transform: uppercase;
    display: inline-block;
}

    .li-btn-2:focus {
        background-color: #fed700;
    }

    .li-btn-2:hover {
        color: #ffffff;
        background-color: #242424;
    }

.li-blog-banner-big {
    position: relative; /* Para posicionar el texto absolutamente dentro del banner */
    display: flex; /* Usamos flexbox para controlar la alineación del texto */
    align-items: center; /* Centra verticalmente el texto */
    width: 100%;
    height: 200px; /* Ajusta la altura según sea necesario */
    background-image: url("images/blog-banner/bg-banner-large-1.jpg"); /* URL de la imagen de fondo */
    background-size: cover; /* La imagen cubre todo el banner */
    background-position: center; /* Centra la imagen */
    border: 2px solid #ccc; /* Un borde sutil para el cuadro */
    box-sizing: border-box; /* Incluye el padding y el borde en el ancho y alto */
    padding: 100px; /* Espacio alrededor del texto */
    display: flex;
    flex-direction: column; /* Cambio clave: apilar elementos verticalmente */
    justify-content: center; /* Centrar verticalmente en el contenedor */
    align-items: flex-start; /* Alinea el texto a la izquierda */
    border: 2px solid #ccc;
}

    .li-blog-banner-big::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0); /* Adjust the last value (0.5) for the desired transparency */
    }

    .li-blog-banner-big .banner-text {
        position: relative; /* Asegura que el texto esté encima de la capa semi-transparente */
        z-index: 2; /* Coloca el texto encima de la imagen de fondo y la capa semi-transparente */
        color: white; /* Color del texto */
        font-size: 50px; /* Tamaño del texto */
        text-align: left; /* Alinea el texto a la izquierda */
        font-weight: bold; /* Hace el texto más resaltado */
        /*text-shadow: 2px 2px 4px #F9F6F6;*/ /* Agrega sombra para mejorar la legibilidad */
        /* Text properties */
        font-family: Raleway, sans-serif; /* Default font */
        margin: 0px; /* Add some margin for spacing from the border */
        /* Multi-line setup */
        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
        overflow: visible;
        text-overflow: unset;
        word-break: break-word;
        line-height: 1.2; /* Ajustar el espaciado entre líneas */
    }

        .li-blog-banner-big .banner-text:first-child {
            margin-bottom: 5px; /* Espacio entre la primera y la segunda línea */
        }



/* Ajusta el tamaño de la fuente para pantallas más pequeñas */
@media (max-width: 768px) {
    .li-blog-banner-big .banner-text {
        font-size: 18px;
    }
}


/* Estilos generales para el banner del blog */
.ing-blog-banner {
    width: 100%; /* El banner ocupa todo el ancho disponible */
    margin-bottom: 20px; /* Espacio debajo del banner */
    display: block; /* Asegura que el banner se comporte como un bloque */
}

    /* Estilos para la imagen dentro del banner */
    .ing-blog-banner img {
        width: 100%; /* La imagen ocupa todo el ancho del banner */
        height: auto; /* La altura se ajusta automáticamente para mantener la proporción */
        max-height: 230px; /* Altura máxima del banner, ajustada al 90% (450px * 0.9) */
        object-fit: cover; /* La imagen cubre todo el espacio, recortando si es necesario */
        display: block; /* Elimina espacios innecesarios debajo de la imagen */
    }

/* Opcional: Estilos para pantallas medianas (tablets) */
@media (max-width: 991px) {
    .ing-blog-banner img {
        max-height: 315px; /* Altura máxima para tablets, ajustada al 90% (350px * 0.9) */
    }
}

/* Opcional: Estilos para pantallas pequeñas (móviles) */
@media (max-width: 767px) {
    .ing-blog-banner img {
        max-height: 225px; /* Altura máxima para móviles, ajustada al 90% (250px * 0.9) */
    }
}

/*----------------------------------------*/
/* 6.8 Li's Compare Page
/*----------------------------------------*/
.compare-table .table td,
.compare-table .table th {
    vertical-align: middle;
    text-align: center
}

.compare-table .table thead th {
    border-width: 1px;
    padding: 15px 10px;
}

.compare-table .table-hover tbody tr {
    transition: all 0.3s ease-in-out;
}

    .compare-table .table-hover tbody tr:hover {
        background-color: rgba(0, 0, 0, .02)
    }

.compare-table .table tbody th {
    min-width: 200px;
}

.compare-table .table tbody td {
    min-width: 250px;
}

.compare-pdoduct-image {
    max-width: 200px;
    display: inline-block;
    padding: 20px 0;
}

    .compare-pdoduct-image a {
        display: inline-block;
    }

    .compare-pdoduct-image .ho-button {
        margin-top: 25px;
    }

h5.compare-product-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
    color: #555;
}

    h5.compare-product-name a {
        color: #555;
        -webkit-transition-property: color;
        -o-transition-property: color;
        transition-property: color;
    }

        h5.compare-product-name a:hover {
            color: #fed700;
        }
/*----------------------------------------*/
/* 6.9 Li's Contact Page
/*----------------------------------------*/
#google-map {
    height: 400px;
}

h3.contact-page-title {
    font-size: 32px;
    line-height: 32px;
    color: #363f4d;
    font-weight: 500;
    margin-bottom: 20px;
}

.single-contact-block {
    padding-bottom: 8px;
    margin-bottom: 27px;
    border-bottom: 1px solid #e1e1e1;
}

    .single-contact-block > h4 {
        margin-bottom: 23px;
    }

    .single-contact-block.last-child {
        border-bottom: none;
    }

span.required {
    color: #ff0000;
}
/*----------  contact form  ----------*/
.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    font-size: 15px;
    line-height: 29px;
    font-weight: 400;
    color: #888888;
    margin-bottom: 20px;
}

.contact-form input {
    background-color: #ffffff;
    width: 100%;
    height: 50px;
    line-height: 50px;
    outline: none;
    border: 1px solid #e0e0e0;
    padding-left: 20px;
}

.contact-form textarea {
    background-color: #ffffff;
    width: 100%;
    outline: none;
    border: 1px solid #e0e0e0;
    padding-left: 20px;
    line-height: 50px;
    height: 200px;
}

.contact-form .li-btn-3 {
    background: #f2f2f2;
    line-height: 12px;
    display: inline-block;
    padding: 16px 30px;
    border-radius: 3px;
    color: #363f4d;
    font-weight: 500;
    font-size: 12px;
    background-color: #242424;
    border: 1px solid #242424;
    color: #ffffff;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}

    .contact-form .li-btn-3:hover {
        background-color: #00B2FD;
        color: #ffffff;
        background-color: #00B2FD;
        border-color: #00B2FD;
    }

.contact-page-side-content {
    background-color: #9ad5f5;
    padding: 25px 30px 19px;
    border-radius: 8px;
}
/*----------------------------------------*/
/* 6.10 Li's About Us Page
/*----------------------------------------*/
.about-text-wrap {
    font-size: 16px;
    line-height: 28px;
}

    .about-text-wrap h2 {
        color: #292825;
        font-size: 48px;
        line-height: 48px;
        font-weight: 600;
        margin-bottom: 15px;
        margin-top: -6px;
    }

        .about-text-wrap h2 span {
            display: block;
            font-weight: 400;
            font-size: 30px;
            margin-bottom: 12px;
        }

.about-image-wrap {
    position: relative;
    padding-left: 30px;
    padding-top: 30px;
    margin-bottom: 50px;
}

    .about-image-wrap::after {
        border: 5px solid #00b5ff;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: calc(100% - 30px);
        width: calc(100% - 30px);
        z-index: -1;
    }
/*------- end About Page Wrapper --------*/
/*------- Start facts area --------*/
/*Limupa Counter*/
.limupa-counter {
    padding-bottom: 90px;
    padding-top: 90px;
    text-align: center;
    width: 100%;
}

.counter-img {
    display: inline-block;
    margin-right: 20px;
    vertical-align: middle;
}

.counter-info {
    color: #444;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.team-member {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

    .team-member .team-thumb img {
        width: 100%;
    }

    .team-member .team-content {
        padding: 15px;
        border: 1px solid #eeeeee;
    }

        .team-member .team-content h3 {
            color: #292825;
            font-size: 20px;
            line-height: 28px;
            text-transform: capitalize;
        }

        .team-member .team-content p {
            color: #666666;
            line-height: 20px;
        }

        .team-member .team-content a {
            color: #666666;
            line-height: 20px;
        }

            .team-member .team-content a:hover {
                color: #fed700;
            }

        .team-member .team-content .team-social {
            margin-top: 15px;
        }

            .team-member .team-content .team-social a {
                color: #292825;
                width: 34px;
                height: 34px;
                display: inline-block;
                text-align: center;
                line-height: 34px;
                border: 1px solid #292825;
                border-radius: 50%;
                margin-right: 5px;
            }

                .team-member .team-content .team-social a:hover {
                    color: #ffffff;
                    background-color: #fed700;
                    border-color: #fed700;
                }

    .team-member:hover {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }
/*----------------------------------------*/
/* 6.11 Li's Shop Page
/*----------------------------------------*/
.sidebar-categores-box {
    background: #f4f4f4;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    box-shadow: none;
    margin-bottom: 30px;
    padding: 22.1px 15px 28px;
}

.sidebar-title {
    border-bottom: 1px solid #e1e1e1;
}

    .sidebar-title h2 {
        color: #242424;
        display: block;
        font-size: 14px;
        font-weight: 500;
        line-height: 30px;
        position: relative;
        text-transform: uppercase;
        margin-bottom: 21px;
    }

.btn-clear-all {
    background: #dddddd none repeat scroll 0 0;
    border-color: rgba(0, 0, 0, 0);
    box-shadow: 0.0625rem 0.0625rem 0.0625rem 0 rgba(0, 0, 0, 0.1);
    color: #333333;
    cursor: pointer;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 15px;
    padding: 5px;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    margin-top: 30px;
}

    .btn-clear-all::before {
        content: "\f00d";
        font-family: "fontawesome";
        margin-right: 15px;
    }

    .btn-clear-all:hover {
        background: #242424 none repeat scroll 0 0;
        color: #fff;
    }

.category-sub-menu ul li ul {
    display: none;
    margin-top: 10px;
}

.category-sub-menu ul li {
    padding-top: 10px;
    transition: all 0.3s ease-in-out;
}

    .category-sub-menu ul li:hover a {
        color: #03b0fa;
    }

    .category-sub-menu ul li:first-child {
        padding-top: 16px;
    }

.category-sub-menu li.has-sub > a {
    color: #242424;
    cursor: pointer;
    display: block;
    line-height: 20px;
    position: relative;
}

.category-sub-menu li.has-sub li a {
    border: 0 none;
    display: block;
    font-size: 14px;
    padding: 0 10px;
    color: #333;
}

    .category-sub-menu li.has-sub li a:hover {
        color: #03b0fa;
    }

.category-sub-menu li.has-sub > a::after {
    color: #242424;
    content: "\f067";
    font-family: fontawesome;
    font-size: 16px;
    position: absolute;
    right: 5px;
}

.category-sub-menu li.has-sub.open > a::after {
    content: "\f068";
}

.sidebar-categores-box .filter-sub-area h5 {
    color: #2f333a;
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    margin: 30px 0 10px;
    padding: 0 0 10px;
    position: relative;
    text-transform: uppercase;
}

.price-checkbox li, .size-checkbox li, .color-categoriy ul li, .categori-checkbox ul li {
    margin: 8px 0;
}

    .price-checkbox li a, .size-checkbox li a, .color-categoriy ul li a, .categori-checkbox ul li a {
        color: #363f4d;
        font-size: 16px;
        margin-left: 15px;
        margin-top: 0;
    }

.price-checkbox input, .size-checkbox input, .categori-checkbox input {
    width: auto !important;
    height: auto !important;
}

.price-checkbox li a:hover {
    color: #EB3E32;
}

.color-categoriy ul li span {
    box-shadow: -1px 1px 8px 0 rgba(0, 0, 0, 0.2);
    display: block;
    height: 15px;
    margin-top: 5px;
    width: 15px;
}

    .color-categoriy ul li span.white {
        background: #ffffff;
    }

    .color-categoriy ul li span.black {
        background: #333;
    }

    .color-categoriy ul li span.Orange {
        background: #F39C11;
    }

    .color-categoriy ul li span.Blue {
        background: #5D9CEC;
    }

.color-categoriy li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.shop-top-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.shop-bar-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

@media only screen and (max-width: 479px) {
    .shop-bar-inner {
        margin-bottom: 10px;
    }

    .product-short .nice-select {
        margin-bottom: 5px;
    }
}

.shop-item-filter-list li a {
    color: #aaa;
    font-size: 20px;
    padding-right: 15px;
}

    .shop-item-filter-list li a.active, .shop-item-filter-list li a:hover {
        color: #242424;
    }

    .shop-item-filter-list li a.active {
        color: #242424;
    }

.toolbar-amount {
    font-size: 14px;
    margin-left: 30px;
    margin-top: 5px;
}

.product-short {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

    .product-short > p {
        font-size: 14px;
        margin: 5px 10px 0 0;
    }

.single-banner img {
    width: 100%;
    border-radius: 0.5rem;
}

.product-short .nice-select {
    border-radius: 0;
    color: #242424;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    width: 220px;
    z-index: 999;
}

@media only screen and (max-width: 767px) {
    .product-short .nice-select {
        width: 180px;
    }
}

.product-short .nice-select .list {
    border-radius: 0px;
    width: 100%;
    z-index: 99;
}

.shop-top-bar {
    padding: 15px;
    border: 1px solid #ededed;
}

@media only screen and (max-width: 767px) {
    .shop-top-bar {
        display: flex;
        flex-wrap: wrap;
    }
}

.product-short .nice-select .option {
    line-height: 30px;
    min-height: 30px;
}

.product-image > a img {
    width: 100%;
}

.shop-products-wrapper .tab-content .tab-pane.active {
    display: block;
}

.shop-products-wrapper .tab-content .tab-pane {
    display: none;
    height: auto;
}

.category-tags > ul > li {
    background: #fff;
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid #ebebeb;
    transition: all 0.3s ease-in-out;
    margin: 0 2px 5px;
}

    .category-tags > ul > li:first-child {
        margin-top: 30px;
    }

    .category-tags > ul > li:hover {
        background: #242424;
    }

        .category-tags > ul > li:hover a {
            color: #ffffff;
        }
/*----- paginatoin-area  css -----*/
.paginatoin-area {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #ededed;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 400;
    margin: 100px 0 0;
    padding: 9px;
}

    .paginatoin-area p {
        margin: 0;
    }

.pagination-box {
    text-align: right;
}

    .pagination-box > li {
        display: inline-block;
    }

        .pagination-box > li.active a {
            color: #fed700;
        }

        .pagination-box > li a.active {
            color: #fed700;
        }

        .pagination-box > li a {
            color: #333333;
            display: block;
            padding: 0 10px;
        }

            .pagination-box > li a:hover {
                color: #fed700;
            }


.product-layout-list .product_desc .product_desc_info .rating-box {
    border-bottom: medium none;
    padding-bottom: 0;
    text-align: left;
}
/*----------------------------------------*/
/* 6.12 Li's Single Product
/*----------------------------------------*/
.product-details-view-content .product-desc {
    border-bottom: 1px solid #e1e1e1;
    margin-bottom: 10px;
}

    .product-details-view-content .product-desc p {
        margin-bottom: 5px;
    }

.single-add-to-cart {
    float: left;
    width: 100%;
}

.product-additional-info {
    float: left;
    width: 100%;
}

    .product-additional-info .wishlist-btn i {
        padding-right: 10px;
    }

.product-social-sharing > ul > li {
    display: inline-block;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
    width: 85px;
    height: 25px;
    line-height: 25px;
    text-align: center;
}

@media only screen and (max-width: 479px) {
    .product-social-sharing > ul > li {
        line-height: 18px;
        margin-bottom: 15px;
    }
}

.product-social-sharing > ul > li:hover {
    background: #00b5ff;
}

.product-social-sharing > ul > li > a {
    color: #ffffff;
    font-size: 12px;
    display: block;
}

    .product-social-sharing > ul > li > a > i {
        margin-right: 5px;
    }

    
/* --- INICIO: Distribución Horizontal Reassurance --- */
/* --- DISEÑO TABLA 2x2 (Grid) PARA POLÍTICAS --- */

.block-reassurance {
    width: 100%;
    max-width: 1200px; /* <--- CAMBIO: Limita el ancho máximo (ajústalo a tu gusto, ej: 800px) */
    margin: 30px auto; /* <--- CAMBIO: "auto" a los lados centra el bloque */
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    overflow: hidden;
}

.block-reassurance > ul {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea */
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Configuración de cada celda (4 en total) */
.block-reassurance > ul > li {
    flex: 0 0 50%; /* Fuerza el ancho al 50% para crear 2 columnas */
    max-width: 50%;
    list-style: none;
    box-sizing: border-box; /* Asegura que el borde no rompa el ancho */
    border-bottom: 1px solid #e1e1e1; /* Línea horizontal interna */
    border-right: 1px solid #e1e1e1; /* Línea vertical interna */
}

/* Lógica para los bordes internos (Evitar bordes dobles) */

/* 1. Quitar borde derecho a los elementos de la columna derecha (pares) */
.block-reassurance > ul > li:nth-child(2n) {
    border-right: none;
}

/* 2. Quitar borde inferior a los dos últimos elementos (fila de abajo) */
.block-reassurance > ul > li:nth-last-child(-n+2) {
    border-bottom: none;
}

/* Diseño interno de cada celda */
.reassurance-item {
    display: flex; /* Alinea Icono a la izq y Texto a la derecha */
    align-items: center; /* Centra verticalmente */
    padding: 15px;
    height: 100%; /* Para que todas las celdas tengan la misma altura visual */
}

/* Icono */
.reassurance-icon {
    flex: 0 0 auto; /* No estirar */
    margin-right: 15px;
    color: #000; /* Color amarillo */
    font-size: 24px;
}

/* Texto Agrupado */
.reassurance-text {
    display: flex;
    flex-direction: column; /* Pone el título arriba y la descripción abajo */
    justify-content: center;
    text-align: left;
    line-height: 1.3;
}

/* Si quieres que el título y la descripción estén en la misma línea, usa esto en su lugar:
.reassurance-text {
    display: block;
}
*/

.reassurance-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    display: block; /* O inline-block si los quieres pegados */
    margin-bottom: 2px;
}

.reassurance-desc {
    font-size: 12px;
    color: #666;
}

/* Responsive: En celulares muy pequeños (<480px) pasar a 1 sola columna */
@media (max-width: 480px) {
    .block-reassurance > ul > li {
        flex: 0 0 100%;
        max-width: 100%;
        border-right: none; /* Quitar división vertical en móvil */
        border-bottom: 1px solid #e1e1e1;
    }
    /* Quitar borde al último ítem en móvil */
    .block-reassurance > ul > li:last-child {
        border-bottom: none;
    }
}
/* --- FIN: Distribución Horizontal Reassurance --- */


.product-description, .product-details-manufacturer, .product-reviews {
    padding: 25px 0;
}

    .product-details-manufacturer a img {
        padding: .25rem;
        background-color: #fff;
        border: 1px solid #e1e1e1;
        border-radius: 0;
        transition: all .2s ease-in-out;
        margin-bottom: 20px;
    }

    .product-details-manufacturer p {
        margin: 0;
    }

        .product-details-manufacturer p span {
            color: #232323;
            font-weight: 700;
        }

.product-details-comment-block .comment-review span {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #6c6c6c;
}

.comment-author-infos span {
    color: #333;
    font-weight: 600;
}

.product-details-comment-block .comment-review .rating {
    display: inline-block;
    padding-left: 10px;
    font-size: 18px;
}

.comment-author-infos em {
    display: block;
    color: #adadad;
}

.comment-details {
    overflow: hidden;
    margin-top: 25px;
}

    .comment-details h4 {
        font-weight: 600;
        text-transform: capitalize;
        font-size: 14px;
        color: #6c6c6c;
    }
/*Review Content*/
.review-content {
    position: relative;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}

.review-body {
    position: relative;
    padding: 15px;
}

#li-comment-wrap {
    overflow: hidden;
    color: #333;
    text-align: left;
}

.review-page-title {
    padding: 10px;
    font-size: 13px;
    color: #ffffff;
    text-transform: uppercase;
    background: #333;
}

.li-review-product {
    padding: 15px;
}

    .li-review-product img {
        border: 1px solid #ebebeb;
    }

.li-review-product-desc {
    line-height: 18px;
    color: #6f6f6f;
}

.li-product-name {
    padding: 10px 0 5px;
    font-size: 13px;
    color: #000;
}

.feedback-area .br-theme-fontawesome-stars .br-widget a {
    font-size: 14px;
}

    .feedback-area .br-theme-fontawesome-stars .br-widget a.br-active:after {
        color: #fed700;
    }

    .feedback-area .br-theme-fontawesome-stars .br-widget a.br-selected::after {
        color: #fed700;
    }

.feedback-area textarea, .feedback-area input {
    background: #fff;
    border: 1px solid #ebebeb;
    font-size: 14px;
}

.feedback-btn {
    position: relative;
}

    .feedback-btn .close,
    .feedback-btn a {
        background: #242424;
        color: #fff !important;
        width: 80px;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        left: 110px;
        right: auto;
        top: 0;
        display: block;
        transition: all 0.3s ease-in-out;
    }

        .feedback-btn .close:hover,
        .feedback-btn a:hover {
            background: #fed700;
        }
/*----------------------------------------*/
/* 6.13 Single Product Carousel Page
/*----------------------------------------*/
.sp-carousel-page .single-product {
    border: 1px solid #e1e1e1;
}

.sp-carousel-content {
    text-align: center;
}

    .sp-carousel-content .single-add-to-cart {
        width: 100%;
    }

    .sp-carousel-content .quantity {
        display: inline-block;
    }

    .sp-carousel-content .cart-quantity label {
        display: inline-block;
        margin-right: 10px;
    }

    .sp-carousel-content .cart-plus-minus {
        float: unset;
        display: inline-block;
    }

    .sp-carousel-content .cart-quantity {
        margin-top: 5px;
    }

    .sp-carousel-content .product-social-sharing {
        padding-top: 30px;
    }
/*----------------------------------------*/
/* 6.14 Single Product Sale Page
/*----------------------------------------*/
.sp-sale-content .product-info .price-box {
    margin: 0 0 5px;
}

.sp-sale-content .product-desc p {
    margin-top: 25px;
    margin-bottom: 25px;
}
/*----------------------------------------*/
/* 6.15 Single Product Group Page
/*----------------------------------------*/
.sp-group-content .product-quantity label {
    padding: 13px 0 0;
    margin: 0;
}

.sp-group-content .product-desc {
    border-bottom: none;
}

.sp-group-content .product-variants {
    padding-top: 10px;
}
/*----------------------------------------*/
/* 6.16 Single Product Normal Page
/*----------------------------------------*/
.sp-normal-content .cart-quantity {
    margin-top: 0;
}

.sp-normal-content .product-additional-info {
    padding-top: 28px;
}
/*----------------------------------------*/
/* 6.17 Single Product Affiliate Page
/*----------------------------------------*/
.sp-affiliate-content .product-desc p {
    margin-bottom: 23px;
}

.sp-affiliate-content .cart-quantity {
    margin-top: 3px;
    overflow: hidden;
    float: left;
    width: 100%;
}
/*----------------------------------------*/
/* 6.18 Single Product Tab Style Left Page
/*----------------------------------------*/
.sp-tab-style-left-page .product-details-images {
    float: right;
    width: calc(100% - 110px);
    padding-left: 10px;
}

.sp-tab-style-left-page .tab-style-left {
    float: left;
    width: 110px;
}

.tab-style-left .slick-slide img,
.tab-style-right .slick-slide img {
    width: 100%;
}

.sp-tab-style-left-page .tab-style-left .slick-slide,
.tab-style-right .slick-slide {
    border: 1px solid transparent;
    padding: 5px;
    transition: all 0.3s ease-in-out;
}

    .sp-tab-style-left-page .tab-style-left .slick-slide:hover,
    .tab-style-right .slick-slide:hover {
        border-color: #fed700;
    }
/*----------------------------------------*/
/* 6.19 Single Product Tab Style Right Page
/*----------------------------------------*/
.sp-tab-style-right-page .product-details-images {
    float: left;
    width: calc(100% - 110px);
    padding-left: 10px;
}

.sp-tab-style-left-page .tab-style-left {
    padding-top: 40px;
}

.sp-tab-style-right-page .tab-style-right {
    float: right;
    width: 110px;
    padding-top: 40px;
}
/*----------------------------------------*/
/* 6.20 Single Product Gallery Left Page
/*----------------------------------------*/
.sp-gallery-left .lg-image {
    outline: 1px solid #e1e1e1;
    transition: all 0.3s ease-in-out;
    padding: 5px;
}

    .sp-gallery-left .lg-image:hover {
        outline: 1px solid #fed700;
    }
/*----------------------------------------*/
/* 6.21 Error 404 Page
/*----------------------------------------*/
.error-text h1 {
    color: #0080ff;
    font-size: 200px;
    font-weight: 900;
    letter-spacing: 10px;
    line-height: 200px;
    margin-bottom: 30px;
}

.error-text h2 {
    color: #242424;
    font-size: 35px;
    font-weight: 700;
    line-height: 35px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.error-text > p {
    color: #242424;
    font-size: 24px;
    font-weight: 300;
    line-height: 25px;
    margin-bottom: 30px;
}

#search-form {
    position: relative;
    width: 450px;
    text-align: center;
    display: inline-block;
}

    #search-form input {
        background: #e1e1e1 none repeat scroll 0 0;
        border: 1px solid #e1e1e1;
        border-radius: 30px;
        color: #242424;
        float: left;
        font-size: 14px;
        height: 45px;
        padding-left: 20px;
        padding-right: 55px;
        width: 100%;
    }

    #search-form button {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        border: medium none;
        color: #4f4f4f;
        font-size: 18px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        transition: all 0.3s ease 0s;
        width: 50px;
    }

        #search-form button:hover {
            color: #fed700;
        }

.error-button a {
    background: #0080ff none repeat scroll 0 0;
    border-radius: 35px;
    color: #ffffff;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 40px;
    margin-top: 53px;
    padding: 0 30px;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}

    .error-button a:hover {
        background: #242424;
        color: #fff;
    }

.small-version {
    display: none;
}

/*----------------------------------------*/
/* 6.22 BANNER COOKIES
/*----------------------------------------*/


.cookie-container {
    position: fixed;
    bottom: -100%;
    left: 15px;
    right: 15px;
    margin: 0 auto;
    max-width: 900px;
    background: rgba(148, 195, 246, 0.76);
    color: #1c2b39;
    padding: 16px 160px 16px 28px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: 400ms;
    text-align: left;
    z-index: 1049;
}

    .cookie-container.active {
        bottom: 15px;
    }

    .cookie-container p {
        margin: 0;
    }

    .cookie-container a {
        color: #0051a8;
    }

.cookie-text {
    color: #000000;
}

.cookie-btn {
    background: #007bff;
    border: 0;
    color: #f5f6fa;
    padding: 8px 22px;
    font-size: 18px;
    border-radius: 8px;
    cursor: pointer;
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

@media (max-width: 767px) {
    .cookie-container {
        left: 10px;
        right: 10px;
        padding: 14px 18px;
        border-radius: 16px;
    }

        .cookie-container .cookie-btn {
            position: static;
            margin-left: 0;
            margin-top: 12px;
            width: 100%;
        }
}

/*footer terminos checkbox*/
/* .terminos {
	position: relative;
  }
   
  .terminos input {
	  height: 20px;
	  left: 17px;
	  position: absolute;
	  top: 0;
	  width: 20px;
	  margin-top: 1.5rem
  } */

/*========================================
   6.3 Estilos para el div .footer-newsletter
========================================*/

.footer-newsletter {
    background-color: #f8f8f8; /* Un color de fondo suave */
    padding: 40px 20px; /* Espaciado interno */
    margin-top: 40px; /* Espacio superior para separarlo del contenido anterior */
    border-radius: 10px; /* Bordes redondeados */
    text-align: center; /* Centra el contenido */
    border: 1px solid #e0e0e0; /* Borde sutil */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Sombra suave para dar profundidad */
}

    .footer-newsletter h4 {
        color: #333; /* Color oscuro para el encabezado */
        font-size: 1.8em; /* Tamaño de fuente más grande para el título */
        margin-bottom: 20px; /* Espacio debajo del encabezado */
        font-weight: 700; /* Fuente en negrita */
        letter-spacing: 0.5px; /* Ligero espaciado entre letras */
    }

    .footer-newsletter .subscribe-form {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */
        gap: 15px; /* Espacio entre los elementos del formulario */
        margin-bottom: 25px; /* Más espacio debajo del formulario */
    }

        .footer-newsletter .subscribe-form input[type="email"] {
            padding: 14px 18px; /* Relleno más generoso */
            border: 1px solid #dcdcdc; /* Borde ligeramente más oscuro */
            border-radius: 5px; /* Bordes un poco más redondeados */
            font-size: 1em;
            flex-grow: 1; /* Permite que el campo ocupe el espacio disponible */
            max-width: 350px; /* Ancho máximo para el campo de email */
            box-sizing: border-box; /* Asegura que el padding y borde se incluyan en el width */
            transition: border-color 0.3s ease; /* Transición suave al cambiar el borde */
        }

            .footer-newsletter .subscribe-form input[type="email"]:focus {
                border-color: #4CAF50; /* Color verde al enfocar */
                outline: none; /* Elimina el outline por defecto */
            }

        .footer-newsletter .subscribe-form button {
            padding: 14px 30px; /* Relleno del botón */
            background-color: #4CAF50; /* Color verde principal */
            color: white; /* Texto blanco */
            border: none; /* Sin borde */
            border-radius: 5px; /* Bordes redondeados */
            cursor: pointer; /* Cursor de mano */
            font-size: 1em;
            font-weight: 500; /* Fuente semi-negrita */
            transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
        }

            .footer-newsletter .subscribe-form button:hover {
                background-color: #45a049; /* Verde más oscuro al pasar el ratón */
                transform: translateY(-1px); /* Ligero efecto de elevación */
            }

/* Estilos para el verificador de términos y el label */
.terminos {
    display: flex; /* Usa Flexbox para alinear checkbox y label */
    align-items: center; /* Centra los elementos verticalmente */
    margin-top: 15px; /* Espacio superior */
    width: 100%; /* Asegura que ocupe el ancho del contenedor padre */
    justify-content: center; /* Centra el contenido horizontalmente */
}

    .terminos input[type="checkbox"] {
        margin-right: 2px; /* Espacio entre el checkbox y el label */
        width: 18px; /* Tamaño del checkbox */
        height: 18px;
        cursor: pointer; /* Indica que es clickeable */
        accent-color: #4c72af; /* Cambia el color del check del checkbox */
        /* Alineación vertical para que el check quede centrado con el texto */
        position: relative;
        top: 1px; /* Ajuste fino para la alineación vertical */
    }

    .terminos label {
        display: inline-flex; /* Usa flex para alinear el texto y el enlace */
        align-items: center; /* Centra verticalmente el texto y el enlace */
        font-size: 0.9em; /* Tamaño de fuente legible */
        color: #555; /* Color de texto suave */
        cursor: pointer; /* Indica que el label completo es clickeable */
        margin-left: 0; /* Elimina margen izquierdo si lo hubiera por defecto */
    }

        .terminos label a {
            color: #007BA7; /* Color azul para el enlace de términos */
            text-decoration: none; /* Quita el subrayado por defecto */
            margin-left: 5px; /* Pequeño espacio entre el texto y el enlace */
            font-weight: 500; /* Fuente semi-negrita para el enlace */
        }

            .terminos label a:hover {
                text-decoration: underline; /* Agrega subrayado al pasar el ratón para indicar interactividad */
            }

/* Media query para adaptar a pantallas más pequeñas */
@media (max-width: 767px) {
    .footer-newsletter {
        padding: 30px 15px; /* Ajusta el padding para móviles */
    }

        .footer-newsletter h4 {
            font-size: 1.6em; /* Ajusta el tamaño del título */
        }

        .footer-newsletter .subscribe-form {
            flex-direction: column; /* Apila los elementos verticalmente */
            align-items: stretch; /* Permite que los elementos ocupen todo el ancho */
            gap: 10px; /* Reduce el espacio entre elementos */
        }

            .footer-newsletter .subscribe-form input[type="email"],
            .footer-newsletter .subscribe-form button {
                max-width: 100%; /* Asegura que ocupen todo el ancho disponible */
                width: 100%;
                padding: 12px 15px; /* Ajusta el padding para consistencia */
            }

    .terminos {
        flex-direction: row; /* Mantiene la alineación en fila */
        justify-content: flex-start; /* Alinea a la izquierda */
        /* Si quieres centrar el contenedor de 'terminos' en móviles, descomenta las siguientes líneas */
        /* margin-left: auto; */
        /* margin-right: auto; */
    }

        .terminos label {
            font-size: 0.85em; /* Reduce el tamaño de fuente en móviles */
        }

        .terminos input[type="checkbox"] {
            margin-right: 8px; /* Ajusta el margen del checkbox */
            width: 16px; /* Ajusta el tamaño del checkbox */
            height: 16px;
        }
}


/*----------------------------------------*/
/* 6.23 Banner FECHA TOP
/*----------------------------------------*/

.ht-setting-trigger2 {
    transition: all 0.3s ease-in-out;
    position: relative;
    left: auto;
    content: "\f107";
    font-size: 14px;
    color: #000;
    margin-left: 5px;
    margin-right: 100px;
}

/*----------------------------------------*/
/* 6.24 Filtrar Checkbox
/*----------------------------------------*/


.showItem {
    display: list-item;
}

.hideItem {
    display: none;
}

/*----------------------------------------*/
/* 6.25 Efecto Cambio de color en COMO COMPRAR .HTML
/*----------------------------------------*/

.imagen-efecto {
    /* Aplica el filtro de blanco y negro por defecto */
    filter: grayscale(100%);
    /* Añade una transición para que el efecto sea suave */
    transition: filter 0.3s ease-in-out;
    cursor: pointer; /* Cambia el cursor para indicar que es clickable */
}

    .imagen-efecto.active {
        filter: grayscale(0%); /* Elimina el filtro cuando está activo */
    }

.container-comprar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%; /* Aumenté el ancho para mejor responsividad */
    max-width: 1200px; /* Ancho máximo para pantallas grandes */
    margin: 20px auto; /* Centrado y margen superior/inferior */
}

.image-container {
    display: flex;
    flex-wrap: wrap; /* Permite que las imágenes pasen a la siguiente línea */
    justify-content: center; /* Centra las imágenes */
    align-items: center; /* Alinea verticalmente */
    width: 100%;
    margin-bottom: 20px;
    gap: 10px; /* Espacio entre las imágenes */
}

    .image-container img {
        width: calc(50% - 15px); /* Dos imágenes por línea en pantallas pequeñas */
        max-width: 200px; /* Ancho máximo de la imagen */
        height: auto;
        border: 1px solid #ccc;
        padding: 5px;
        box-sizing: border-box; /* Evita que el padding aumente el tamaño total */
    }

.slider-container {
    width: 100%;
    overflow: hidden;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.nav-button {
    /* Estilos para los botones */
}

/* Media query para pantallas más grandes */
@media (min-width: 768px) {
    .image-container {
        flex-wrap: nowrap; /* Evita que las imágenes pasen a la siguiente línea */
    }

        .image-container img {
            width: 200px; /* Vuelve al ancho original */
        }
}






/*========================================
   6.3 Estilos para el div .phone-input
========================================*/


/* Estilos para el selector de departamento (ejemplo) */


.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="tel"] {
    padding: 8px;
    border: 1px solid #28a745;
    border-radius: 4px;
    box-sizing: border-box;
}

.btn {
    background-color: #00B5FF;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-left: 5px; /* Add the 5px spacing */
}

    .btn:hover {
        background-color: #029AD9;
    }

/* Styles for phone input */
.phone-input {
    display: flex;
    align-items: center;
    /* flex-wrap: wrap; Removed to keep items on the same line */
}

.departamento-select {
    position: relative;
    width: auto;
    flex-grow: 0; /* Do not allow it to grow */
    margin-right: 10px;
    margin-bottom: 0; /* Remove bottom margin */
}

.selected-departamento {
    display: flex;
    align-items: center;
    padding: 8px;
    border: 1px solid #28a745;
    border-radius: 4px;
    cursor: pointer;
    justify-content: space-between;
    width: auto;
}

    .selected-departamento img {
        width: auto; /* Adjusted to allow dynamic width based on image */
        height: 20px; /* Fixed height for consistency */
        margin-right: 10px;
    }

.departamento-list {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px; /* Ensure it's at least a certain width */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: none;
    overflow-y: auto; /* Añade la barra deslizante */
    max-height: 200px; /* Altura para mostrar hasta 4 items */
    box-sizing: border-box;
    white-space: nowrap; /* Prevent text from wrapping */
}

    .departamento-list.show {
        display: block;
    }

    .departamento-list div {
        padding: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

        .departamento-list div:hover {
            background-color: #f0f0f0;
        }

        .departamento-list div img {
            width: 30px;
            margin-right: 5px;
        }

/* Media query for responsiveness */
@media (max-width: 600px) {
    .phone-input {
        flex-direction: column; /* Stack on small screens */
        align-items: stretch; /* Stretch to full width */
    }

    .departamento-select {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    input[type="tel"] {
        width: 100%;
    }

    .btn {
        width: 100%; /* Full width on small screens */
        margin-top: 10px; /* Add some spacing */
        margin-left: 0; /* Remove left margin on small screens */
    }
}

/* Alert message */
.alert {
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
}

.alert-info {
    background-color: #d9edf7;
    color: #31708f;
    border: 1px solid #bce8f1;
}

.alert-danger {
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
}

.alert-success {
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
}

/* Make the input next to selected-departamento have some margin */
input[type="tel"] {
    margin-left: 10px;
    flex-grow: 1; /* Allow the input to take up remaining space */
}

/* Ancho del select-departamento */
.phone-input .departamento-select {
    width: auto;
}

/* Ancho del input de teléfono */
.phone-input input[type="tel"] {
    width: 50%;
}


/* ============================================= */
/* Estilos para Dimensiones clasificadas por subcategoría PRODUCTO.PHP*/
/* ============================================= */

/* Contenedor de dimensiones */
.product-dimensions-container {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.product-dimensions-container .produt-variants-size {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-dimensions-container .produt-variants-size label {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.product-dimensions-container .nice-select {
    min-width: 120px;
    width: auto;
    max-width: 120px;
    display:inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 35px 10px 15px;
    background-color: #fff;
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.product-dimensions-container .nice-select .list {
    width: auto;
    min-width: 100%;       /* Al menos tan ancho como el selector */
    max-width: 350px;      /* Máximo para opciones largas */
    white-space: nowrap;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 999;
}

/* Opción individual - sin truncar texto */
.product-dimensions-container .nice-select .option{

    padding: 10px 15px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: visible;
}

.product-dimensions-container .nice-select.open .list {
    min-width: max-content; /* Ancho basado en el contenido más largo */
}

/* Texto seleccionado - mostrar completo */
.product-dimensions-container .nice-select .current {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 25px;   /* Espacio para la flecha */
}


.product-dimensions-container .nice-select:hover {
    border-color: #4287f5;
}

/* Cuando está abierto - ajustar ancho al contenido más ancho */
.product-dimensions-container .nice-select:focus,
.product-dimensions-container .nice-select.open {
    min-width: auto;
    border-color: #4287f5;
    box-shadow: 0 0 5px rgba(254, 215, 0, 0.3);
    outline: none;
}

/* Contenedor de stock - Separación aumentada del contenedor de dimensiones */
.product-stock-container {
    margin-top: 30px;  /* Separación superior aumentada */
    margin-bottom: 20px;
    padding-top: 20px;
    border-top: 1px dashed #e5e5e5;
}

/* Estilos para el stock disponible */
.product-stock-container .stock-available {
    color: #27ae60 !important;
    font-weight: 500;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background-color: rgba(39, 174, 96, 0.08);
    border-radius: 6px;
    border-left: 4px solid #27ae60;
}

.product-stock-container .stock-available i {
    font-size: 18px;
}

/* Estilos para producto agotado */
.product-stock-container .stock-unavailable {
    color: #e74c3c !important;
    font-weight: 500;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background-color: rgba(231, 76, 60, 0.08);
    border-radius: 6px;
    border-left: 4px solid #e74c3c;
}

.product-stock-container .stock-unavailable i {
    font-size: 18px;
}

/* Responsive para móviles */
@media (max-width: 767px) {
    .product-dimensions-container {
        margin-bottom: 15px;
        padding-bottom: 12px;
    }
    
    .product-dimensions-container .nice-select {
        width: 100%;
        max-width: 100%;
    }
    
    .product-stock-container {
        margin-top: 25px;
        padding-top: 15px;
    }
    
    .product-stock-container .stock-available,
    .product-stock-container .stock-unavailable {
        font-size: 13px;
        padding: 8px 14px;
        width: 100%;
        justify-content: center;
    }
    .product-dimensions-container .nice-select .list {
        max-width: 100%;
        width: 100%;
    }
    
    .product-dimensions-container .nice-select .option {
        white-space: normal;
        word-wrap: break-word;
    }
}

       /* REDISEñO DE METODOS DE PAGO */
        

        .checkout-wrapper {
            max-width: 960px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 24px;
            align-items: start;
        }

        @media (max-width: 768px) {
            .checkout-wrapper { grid-template-columns: 1fr; }
        }

        /* ============ PAYMENT METHOD ============ */
        .custom-payment-section {
            background: #fff;
            padding: 28px;
            border-radius: 16px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        }

        .payment-header {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
        }
        .step-number {
            background-color: #1d4ed8;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 15px;
            font-size: 16px;
            flex-shrink: 0;
        }

        .payment-options {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .payment-label {
            display: block;
            margin: 0;
            cursor: pointer;
        }
        .payment-label input[type="radio"] {
            display: none;
        }

        .payment-card {
            display: flex;
            align-items: center;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            padding: 18px 20px;
            background-color: #ffffff;
            transition: all 0.2s ease-in-out;
        }
        .payment-card:hover {
            border-color: #93c5fd;
            background-color: #f8faff;
        }

        .radio-indicator {
            width: 22px;
            height: 22px;
            border: 2px solid #cbd5e1;
            border-radius: 50%;
            margin-right: 15px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: border-color 0.2s;
        }

        .payment-info { flex-grow: 1; }
        .payment-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 4px;
        }
        .title-text {
            font-weight: 700;
            color: #111827;
            font-size: 16px;
        }
        .badge-popular {
            background-color: #dcfce7;
            color: #166534;
            font-size: 12px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 12px;
        }
        .payment-subtitle {
            color: #6b7280;
            font-size: 13px;
        }

        .payment-logos {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: 15px;
        }
        .logo-box {
            font-size: 10px;
            font-weight: bold;
            padding: 3px 7px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background: #fff;
        }
        .logo-visa  { color: #1a1f71; }
        .logo-mc    { background-color: #eb001b; color: white; border: none; }
        .logo-amex  { color: #2a7cbd; }
        .logo-mp    { background-color: #e0f2fe; color: #0ea5e9; padding: 4px 10px; border-radius: 6px; font-weight: bold; font-size: 12px; }

        /* Seleccionado */
        .payment-label input[type="radio"]:checked + .payment-card {
            border-color: #2563eb;
            background-color: #f0f6ff;
        }
        .payment-label input[type="radio"]:checked + .payment-card .radio-indicator {
            border-color: #2563eb;
        }
        .payment-label input[type="radio"]:checked + .payment-card .radio-indicator::after {
            content: "";
            width: 12px;
            height: 12px;
            background-color: #2563eb;
            border-radius: 50%;
            position: absolute;
        }

        /* ============ BOTÓN DE PAGO ============ */
        .order-button-payment {
            margin-top: 22px;
        }

        .btn-pay-now {
            width: 100%;
            border: none;
            border-radius: 10px;
            padding: 16px 20px;
            font-size: 17px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: background-color 0.3s, color 0.3s, transform 0.15s;
            letter-spacing: 0.3px;
        }

        /* Estado INACTIVO */
        .btn-pay-now.btn-inactive {
            background-color: #d1d5db;
            color: #9ca3af;
            cursor: not-allowed;
            pointer-events: none;
        }
        .btn-pay-now.btn-inactive i { color: #9ca3af; }

        /* Estado ACTIVO */
        .btn-pay-now.btn-active {
            background-color: #1d4ed8;
            color: #ffffff;
            cursor: pointer;
            pointer-events: auto;
        }
        .btn-pay-now.btn-active:hover {
            background-color: #1e3a8a;
            transform: translateY(-1px);
        }
        .btn-pay-now.btn-active:active {
            transform: translateY(0);
        }

        .btn-pay-now .btn-chevron {
            margin-left: 4px;
            font-size: 12px;
            opacity: 0.8;
        }

        /* ============ ORDER SUMMARY (derecha) ============ */
        .order-summary {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            padding: 24px;
        }
        .order-summary h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 18px;
            color: #111827;
        }
        .order-summary table {
            width: 100%;
            border-collapse: collapse;
        }
        .order-summary table tr td {
            padding: 8px 0;
            font-size: 14px;
            color: #374151;
            border-bottom: 1px solid #f3f4f6;
        }
        .order-summary table tr td:last-child {
            text-align: right;
            font-weight: 500;
        }
        .order-total td {
            border-bottom: none !important;
            border-top: 2px solid #e5e7eb;
            padding-top: 14px !important;
            font-size: 17px !important;
            font-weight: 700 !important;
            color: #111827 !important;
        }
        .secure-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 18px;
            font-size: 13px;
            color: #6b7280;
            justify-content: center;
        }
        .secure-badge i { color: #22c55e; }
   
  
/* ============================================= */
/* FIN: Estilos para Dimensiones y Stock        */
/* ============================================= */


/*----------------------------------------*/
/* 6.26 Footer: compactación + iconos sociales Glassmorphism
/*----------------------------------------*/

/* A. Espaciado compacto de las líneas de contenido del Footer.
   Solo afecta las listas de enlaces de las columnas ATENCIÓN AL CLIENTE / EMPRESA
   (la lista .social-link y la lista .des se tratan por separado).
   No se modifica el margen de los títulos .footer-block-title. */
.footer-static-middle .footer-block > ul:not(.social-link) > li {
    line-height: 28px;
}

    .footer-static-middle .footer-block > ul:not(.social-link) > li > a {
        line-height: 28px;
    }

.footer-static-middle .des > li {
    line-height: 22px;
    margin-bottom: 12px;
}

/* C. Newsletter: marco más compacto y visualmente más arriba.
   No se alteran formulario, input, botón, texto ni funcionalidad. */
.footer .footer-newsletter {
    margin-top: 15px;
    padding: 20px 20px;
}

    .footer .footer-newsletter .subscribe-form {
        margin-bottom: 10px;
    }

    /* Párrafo descriptivo bajo "Suscríbete al Boletín" */
    .footer .footer-newsletter > p {
        color: #555555;
        font-size: 0.95em;
        line-height: 1.6;
        margin: 0 0 18px;
    }

@media (max-width: 767px) {
    .footer .footer-newsletter {
        padding: 18px 15px;
    }

        .footer .footer-newsletter > p {
            font-size: 0.9em;
        }
}

/*----------------------------------------------------------------------------------------------------*/
/*

/* 6.28 Otras redes sociales: mismo glassmorphism que Facebook (X, Instagram, TikTok, WhatsApp, YouTube).
   Target: .footer-static-middle .social-link > li.twitter|.tiktok|.youtube|.whatsapp|.instagram
   Mismos valores de vidrio que 6.27; el logotipo es un <img> limpio, plano y centrado. */
.footer-static-middle .social-link > li.twitter,
.footer-static-middle .social-link > li.tiktok,
.footer-static-middle .social-link > li.youtube,
.footer-static-middle .social-link > li.facebook,
.footer-static-middle .social-link > li.whatsapp,
.footer-static-middle .social-link > li.instagram {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(148, 195, 246, 0.76);
    border-radius: 28%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

    /* Nucleo: el enlace llena el boton y centra el logotipo */
    .footer-static-middle .social-link > li.twitter > a,
    .footer-static-middle .social-link > li.tiktok > a,
    .footer-static-middle .social-link > li.youtube > a,
    .footer-static-middle .social-link > li.facebook > a,
    .footer-static-middle .social-link > li.whatsapp > a,
    .footer-static-middle .social-link > li.instagram > a {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border: none;
        border-radius: inherit;
        transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* Logotipo: mismo tamano visual que el glifo FA (28px), centrado, sin deformar */
    .footer-static-middle .social-link > li.twitter > a > img.social-icon,
    .footer-static-middle .social-link > li.tiktok > a > img.social-icon,
    .footer-static-middle .social-link > li.youtube > a > img.social-icon,
    .footer-static-middle .social-link > li.facebook > a > img.social-icon,
    .footer-static-middle .social-link > li.whatsapp > a > img.social-icon,
    .footer-static-middle .social-link > li.instagram > a > img.social-icon {
        display: block;
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    /* Hover: elevacion sutil + sombra mas profunda, borde mas luminoso */
    .footer-static-middle .social-link > li.twitter:hover,
    .footer-static-middle .social-link > li.tiktok:hover,
    .footer-static-middle .social-link > li.youtube:hover,
    .footer-static-middle .social-link > li.facebook:hover,
    .footer-static-middle .social-link > li.whatsapp:hover,
    .footer-static-middle .social-link > li.instagram:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
        border-color: rgba(148, 195, 246, 0.95);
    }

    /* Active: compresion fisica, sombra aplanada */
    .footer-static-middle .social-link > li.twitter:active,
    .footer-static-middle .social-link > li.tiktok:active,
    .footer-static-middle .social-link > li.youtube:active,
    .footer-static-middle .social-link > li.facebook:active,
    .footer-static-middle .social-link > li.whatsapp:active,
    .footer-static-middle .social-link > li.instagram:active {
        transform: translateY(1px) scale(0.97);
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
    }

    /* Focus visible: halo azul sutil (accesibilidad) */
    .footer-static-middle .social-link > li.twitter > a:focus-visible,
    .footer-static-middle .social-link > li.tiktok > a:focus-visible,
    .footer-static-middle .social-link > li.youtube > a:focus-visible,
    .footer-static-middle .social-link > li.facebook > a:focus-visible,
    .footer-static-middle .social-link > li.whatsapp > a:focus-visible,
    .footer-static-middle .social-link > li.instagram > a:focus-visible {
        outline: 3px solid rgba(24, 119, 242, 0.35);
        outline-offset: 4px;
    }

/* 6.29 Social link layout: fila uniforme centrada.
   Causa: el <ul> era block y los <li> inline-block; los espacios en blanco entre
   <li> + el margin-right 12px dejaban el grupo con ~66px por boton y el ultimo
   (Instagram) saltaba de linea en escritorio. Se pasa el contenedor a flex:
   los botones quedan en una misma fila, centrados y alineados verticalmente.
   El gap (12px) reproduce la separacion original sin el hueco de los espacios.
   En >= 1200px se fuerza nowrap (caben 6 x 50px + 5 x 12px = 360px en la columna).
   Por debajo se permite wrap controlado y uniforme para no desbordar. */
.footer-static-middle .footer-block > ul.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

    .footer-static-middle .footer-block > ul.social-link > li {
        flex: 0 0 auto;
        margin-right: 0 !important;
    }

@media (min-width: 1200px) {
    .footer-static-middle .footer-block > ul.social-link {
        flex-wrap: nowrap;
    }
}

/* 6.30 Prevenir desborde horizontal del documento.
   En 1200px algunas filas (margenes negativos de Bootstrap) se salen ~8px.
   body tenia overflow-x:hidden: ocultaba la barra pero aun permitia scroll
   horizontal programatico. overflow-x:clip en html corta ese desborde de
   raiz y NO crea contenedor de scroll, asi que position:fixed/sticky no se
   ven afectados. El scroll vertical sigue funcionando normal. */
html {
    overflow-x: clip;
}

/*------------------------------------------> The End <-----------------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/