#ajax-cart > a,
#btn-installments {
    text-decoration: none !important;
}

.header-container,
.header-wrapper,
.site-header,
header {
    background-color: rgba(0, 0, 0, .4) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, .3);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.header-container *,
.header-nav-list .header-nav-link:hover,
.header-wrapper *,
.site-header * {
    background-color: transparent !important;
}

.site-header.is-fixed,
header.is-fixed {
    background-color: rgba(0, 0, 0, .8) !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}

.site-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
    animation: 4s ease-in-out infinite liquidGlowDark;
    pointer-events: none;
}

@keyframes liquidGlowDark {
    0%, 100% {
        opacity: .2;
        transform: scaleX(.8);
    }
    50% {
        opacity: .6;
        transform: scaleX(1);
    }
}

.site-header .nav-item,
.site-header a,
.site-header i,
.site-header nav a {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

.site-header svg,
.site-header svg path {
    fill: #fff !important;
}

.header-logo img,
.nav-brand img,
[class*=logo] img {
    min-width: 180px !important;
    max-height: 100px !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (min-width: 992px) {
    .header-container,
    .site-header,
    header {
        height: 140px !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background-color: rgba(0, 0, 0, .3) !important;
    }

    .header-row,
    .header-row > div {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between;
        background: 0 0 !important;
    }

    .nav-actions,
    .nav-brand,
    .nav-list {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
    }

    .nav-list {
        margin-left: 30px !important;
    }

    .nav-actions {
        margin-right: 30px !important;
    }

    .header-nav > li:nth-child(n+2),
    .nav-list > li:nth-child(n+2),
    ul[data-store=navigation] > li:nth-child(n+2) {
        position: relative !important;
        margin-left: 25px !important;
    }

    .header-nav > li:nth-child(n+2)::before,
    .nav-list > li:nth-child(n+2)::before,
    ul[data-store=navigation] > li:nth-child(n+2)::before {
        content: "" !important;
        position: absolute !important;
        left: -12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        height: 20px !important;
        width: 1px !important;
        background-color: rgba(255, 255, 255, .8) !important;
        display: block !important;
    }

    .js-home-main-slider,
    .section-slider,
    div[data-store=slider-home] {
        margin-top: -140px !important;
        padding-top: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .js-body-padding-top,
    body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .nav-item > a,
    .nav-list > li > a,
    ul[data-store=navigation] > li > a {
        position: relative !important;
        border-radius: 50px !important;
        padding: 8px 25px !important;
        margin: 0 4px !important;
        transition: color .3s !important;
        border: none !important;
        display: inline-block !important;
        text-decoration: none !important;
        color: #fff !important;
        background-color: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        animation: none !important;
    }

    .nav-item > a:hover,
    .nav-list > li > a:hover,
    ul[data-store=navigation] > li > a:hover {
        background-color: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        color: #ccc !important;
        transform: none !important;
        animation: none !important;
    }
}

#ajax-cart a span:nth-last-of-type(2),
#btn-installments span,
#modal-cart .divider,
#modal-cart .js-visible-on-cart-filled.divider,
#single-product .js-product-payments-container .js-max-installments-container,
.breadcrumbs,
.cart-summary a span:nth-last-of-type(2),
.filters-sidebar,
.js-accordion-toggle,
.js-added-to-cart-product-message,
.js-modal-open[data-component=menu-button] .utilities-text,
.js-offer-label,
.js-product-payments-container .js-max-installments-container,
.js-product-payments-container .js-product-discount-container,
.js-product-payments-container .mb-2,
.js-product-thumb:nth-child(n+5),
.js-products-featured-container::after,
.js-products-featured-container::before,
.js-shipping-label-private,
.search-input-submit svg,
.search-suggest .btn-search,
.search-suggest .icon-search,
.search-suggest svg,
.section-featured-home::after,
.section-featured-home::before,
a[data-toggle="#nav-hamburger"] .utilities-text,
body.template-category .form-group-small {
    display: none !important;
}

.search-suggest .form-control,
input[type=search] {
    border-radius: 50px !important;
    background-color: rgba(255, 255, 255, .2) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, .5) !important;
    color: #fff !important;
    padding: 0 20px !important;
    height: 40px !important;
}

.search-suggest input::placeholder {
    color: rgba(255, 255, 255, .8) !important;
}

.js-home-main-slider,
.section-slider,
.section-slider .js-home-main-slider {
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.js-home-main-slider .swiper-container,
.js-home-main-slider .swiper-slide,
.js-home-main-slider .swiper-wrapper {
    height: 100% !important;
    max-height: 100vh !important;
}

.js-home-main-slider img,
.section-slider img,
.swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

.js-swiper-next,
.js-swiper-prev,
.slider-controls-next,
.slider-controls-prev,
.swiper-button-next,
.swiper-button-prev {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.section-banners-home .textbanner,
[data-store=banner-home-categories] .textbanner {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    transition: .3s !important;
}

.section-banners-home .textbanner::after,
[data-store=banner-home-categories] .textbanner::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5) !important;
    backdrop-filter: blur(4px) !important;
    opacity: 0 !important;
    transition: opacity .4s !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.section-banners-home .textbanner::before,
[data-store=banner-home-categories] .textbanner::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(.9) !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border: none !important;
    padding: 12px 25px !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: 95% !important;
    opacity: 0 !important;
    transition: .4s !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: 0 0 !important;
    display: inline-block !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8) !important;
}

.section-banners-home .textbanner:hover::after,
[data-store=banner-home-categories] .textbanner:hover::after {
    opacity: 1 !important;
}

.section-banners-home .textbanner:hover::before,
[data-store=banner-home-categories] .textbanner:hover::before {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.section-banners-home .row > div:first-child .textbanner::before,
[data-store=banner-home-categories] .row > div:first-child .textbanner::before {
    content: "JABONES" !important;
}

.section-banners-home .row > div:nth-child(2) .textbanner::before,
[data-store=banner-home-categories] .row > div:nth-child(2) .textbanner::before {
    content: "COLECCIONES" !important;
}

.section-banners-home .row > div:nth-child(3) .textbanner::before,
[data-store=banner-home-categories] .row > div:nth-child(3) .textbanner::before {
    content: "COMBOS" !important;
}

.section-banners-home .row > div:nth-child(4) .textbanner::before,
[data-store=banner-home-categories] .row > div:nth-child(4) .textbanner::before {
    content: "REGALOS" !important;
}



#ajax-cart > a,
#btn-installments {
    text-decoration: none !important;
}

.header-container,
.header-wrapper,
.site-header,
header {
    background-color: rgba(0, 0, 0, .4) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, .3);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.header-container *,
.header-nav-list .header-nav-link:hover,
.header-wrapper *,
.site-header * {
    background-color: transparent !important;
}

.site-header.is-fixed,
header.is-fixed {
    background-color: rgba(0, 0, 0, .8) !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}

.site-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
    animation: 4s ease-in-out infinite liquidGlowDark;
    pointer-events: none;
}

@keyframes liquidGlowDark {
    0%, 100% {
        opacity: .2;
        transform: scaleX(.8);
    }
    50% {
        opacity: .6;
        transform: scaleX(1);
    }
}

.site-header .nav-item,
.site-header a,
.site-header i,
.site-header nav a {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

.site-header svg,
.site-header svg path {
    fill: #fff !important;
}

.header-logo img,
.nav-brand img,
[class*=logo] img {
    min-width: 180px !important;
    max-height: 100px !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (min-width: 992px) {
    .header-container,
    .site-header,
    header {
        height: 140px !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background-color: rgba(0, 0, 0, .3) !important;
    }

    .header-row,
    .header-row > div {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between;
        background: 0 0 !important;
    }

    .nav-actions,
    .nav-brand,
    .nav-list {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
    }

    .nav-list {
        margin-left: 30px !important;
    }

    .nav-actions {
        margin-right: 30px !important;
    }

    .header-nav > li:nth-child(n+2),
    .nav-list > li:nth-child(n+2),
    ul[data-store=navigation] > li:nth-child(n+2) {
        position: relative !important;
        margin-left: 25px !important;
    }

    .header-nav > li:nth-child(n+2)::before,
    .nav-list > li:nth-child(n+2)::before,
    ul[data-store=navigation] > li:nth-child(n+2)::before {
        content: "" !important;
        position: absolute !important;
        left: -12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        height: 20px !important;
        width: 1px !important;
        background-color: rgba(255, 255, 255, .8) !important;
        display: block !important;
    }

    .js-home-main-slider,
    .section-slider,
    div[data-store=slider-home] {
        margin-top: -140px !important;
        padding-top: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .js-body-padding-top,
    body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .nav-item > a,
    .nav-list > li > a,
    ul[data-store=navigation] > li > a {
        position: relative !important;
        border-radius: 50px !important;
        padding: 8px 25px !important;
        margin: 0 4px !important;
        transition: color .3s !important;
        border: none !important;
        display: inline-block !important;
        text-decoration: none !important;
        color: #fff !important;
        background-color: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        animation: none !important;
    }

    .nav-item > a:hover,
    .nav-list > li > a:hover,
    ul[data-store=navigation] > li > a:hover {
        background-color: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        color: #ccc !important;
        transform: none !important;
        animation: none !important;
    }
}

#ajax-cart a span:nth-last-of-type(2),
#btn-installments span,
#modal-cart .divider,
#modal-cart .js-visible-on-cart-filled.divider,
#single-product .js-product-payments-container .js-max-installments-container,
.breadcrumbs,
.cart-summary a span:nth-last-of-type(2),
.filters-sidebar,
.js-accordion-toggle,
.js-added-to-cart-product-message,
.js-modal-open[data-component=menu-button] .utilities-text,
.js-offer-label,
.js-product-payments-container .js-max-installments-container,
.js-product-payments-container .js-product-discount-container,
.js-product-payments-container .mb-2,
.js-product-thumb:nth-child(n+5),
.js-products-featured-container::after,
.js-products-featured-container::before,
.js-shipping-label-private,
.search-input-submit svg,
.search-suggest .btn-search,
.search-suggest .icon-search,
.search-suggest svg,
.section-featured-home::after,
.section-featured-home::before,
a[data-toggle="#nav-hamburger"] .utilities-text,
body.template-category .form-group-small {
    display: none !important;
}

.search-suggest .form-control,
input[type=search] {
    border-radius: 50px !important;
    background-color: rgba(255, 255, 255, .2) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, .5) !important;
    color: #fff !important;
    padding: 0 20px !important;
    height: 40px !important;
}

.search-suggest input::placeholder {
    color: rgba(255, 255, 255, .8) !important;
}

.js-home-main-slider,
.section-slider,
.section-slider .js-home-main-slider {
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.js-home-main-slider .swiper-container,
.js-home-main-slider .swiper-slide,
.js-home-main-slider .swiper-wrapper {
    height: 100% !important;
    max-height: 100vh !important;
}

.js-home-main-slider img,
.section-slider img,
.swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

.js-swiper-next,
.js-swiper-prev,
.slider-controls-next,
.slider-controls-prev,
.swiper-button-next,
.swiper-button-prev {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.section-banners-home .textbanner,
[data-store=banner-home-categories] .textbanner {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    transition: .3s !important;
}

.section-banners-home .textbanner::after,
[data-store=banner-home-categories] .textbanner::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5) !important;
    backdrop-filter: blur(4px) !important;
    opacity: 0 !important;
    transition: opacity .4s !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.section-banners-home .textbanner::before,
[data-store=banner-home-categories] .textbanner::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(.9) !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border: none !important;
    padding: 12px 25px !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: 95% !important;
    opacity: 0 !important;
    transition: .4s !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: 0 0 !important;
    display: inline-block !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8) !important;
}

.section-banners-home .textbanner:hover::after,
[data-store=banner-home-categories] .textbanner:hover::after {
    opacity: 1 !important;
}

.section-banners-home .textbanner:hover::before,
[data-store=banner-home-categories] .textbanner:hover::before {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.section-banners-home .row > div:first-child .textbanner::before,
[data-store=banner-home-categories] .row > div:first-child .textbanner::before {
    content: "JABONES" !important;
}

.section-banners-home .row > div:nth-child(2) .textbanner::before,
[data-store=banner-home-categories] .row > div:nth-child(2) .textbanner::before {
    content: "COLECCIONES" !important;
}

.section-banners-home .row > div:nth-child(3) .textbanner::before,
[data-store=banner-home-categories] .row > div:nth-child(3) .textbanner::before {
    content: "COMBOS" !important;
}

.section-banners-home .row > div:nth-child(4) .textbanner::before,
[data-store=banner-home-categories] .row > div:nth-child(4) .textbanner::before {
    content: "REGALOS" !important;
}

@keyframes aestheticBounce {
    0%, 70% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-4px) scale(1.02);
    }
    100% {
        transform: translateY(-2px) scale(1);
    }
}

#newsletter input[type=email],
.newsletter .form-control,
div[data-store=newsletter] input[type=email] {
    border-radius: 50px !important;
    background-color: rgba(255, 255, 255, .2) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, .5) !important;
    color: #fff !important;
    height: 45px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-shadow: none !important;
    text-align: center !important;
}

#newsletter input[type=email]::placeholder,
.newsletter .form-control::placeholder {
    color: rgba(255, 255, 255, .8) !important;
}

#newsletter button[type=submit],
.newsletter .btn,
div[data-store=newsletter] button {
    background-color: transparent !important;
    border: none !important;
    color: #fff !important;
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 40px !important;
    width: 40px !important;
    padding: 0 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.newsletter .form-group {
    position: relative !important;
    max-width: 500px !important;
    margin: 0 auto !important;
}

.newsletter form .btn,
.newsletter form .btn-append,
.newsletter form .js-newsletter-btn,
.newsletter form button,
.newsletter form i,
.newsletter form svg,
div[data-store=newsletter] button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    pointer-events: none !important;
}

.newsletter form::before,
div[data-store=newsletter] form::before {
    content: "ENTERATE DE TODAS LAS NOVEDADES" !important;
    display: block !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    width: 100% !important;
}

.nav-dropdown-content li a::after,
.nav-dropdown-content li a::before,
body.template-category .row::after,
body.template-category div::after,
body.template-category section::after {
    content: none !important;
    display: none !important;
}

body.template-category #main-container,
body.template-category .container,
body.template-category .js-main-content,
body.template-category .row,
body.template-category section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    background: 0 0 !important;
    border: none !important;
    box-shadow: none !important;
}

#ajax-cart > a::before,
.utilities-container > a[href*=login] {
    width: 42px !important;
    height: 42px !important;
    background-repeat: no-repeat !important;
    background-size: 22px 22px !important;
}

body.template-category .category-header {
    padding-top: 20px !important;
    margin-bottom: 10px !important;
    text-align: left;
}

body.template-category .grid-item img {
    filter: none !important;
    transform: none !important;
}

svg.utilities-icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

#ajax-cart span,
.utilities-container span {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#ajax-cart > a::before,
.utilities-container > a[href*=login] {
    background-color: rgba(255, 255, 255, .15) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1) !important;
    border-radius: 50% !important;
    transition: .3s !important;
}

.utilities-container > a[href*=login] {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin-right: 9px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
    background-position: center center !important;
}

#ajax-cart > a {
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
}

#ajax-cart > a::before {
    content: "" !important;
    display: block !important;
    min-width: 42px !important;
    margin-right: 15px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
    background-position: calc(50% - 1px) center !important;
}

#ajax-cart > a:hover::before,
.utilities-container > a[href*=login]:hover {
    background-color: rgba(255, 255, 255, .3) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .2) !important;
}

section[data-store=home-image-text-module] {
    margin-bottom: 100px !important;
    margin-top: 40px !important;
    background: 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
}

section[data-store=home-image-text-module] .textbanner .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .1) 0, rgba(20, 20, 20, .4) 100%) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    box-shadow: inset 0 0 30px rgba(255, 255, 255, .03) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    min-height: 300px !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

section[data-store=home-image-text-module] .textbanner .row:hover {
    border-color: rgba(255, 255, 255, .3) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .15) 0, rgba(20, 20, 20, .5) 100%) !important;
    transform: none !important;
}

section[data-store=home-image-text-module] .textbanner-image {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    background: 0 0 !important;
    min-height: 100% !important;
    border-right: 1px solid rgba(255, 255, 255, .05) !important;
}

section[data-store=home-image-text-module] .textbanner-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    filter: none !important;
}

section[data-store=home-image-text-module] .textbanner-text {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    background: 0 0 !important;
}

section[data-store=home-image-text-module] h2,
section[data-store=home-image-text-module] h3 {
    font-size: 32px !important;
    color: #fff !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .3) !important;
}

section[data-store=home-image-text-module] p {
    font-size: 15px !important;
    color: rgba(255, 255, 255, .9) !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

section[data-store=home-image-text-module] .row::after,
section[data-store=home-image-text-module] .row::before,
section[data-store=home-image-text-module] .textbanner::after,
section[data-store=home-image-text-module] .textbanner::before {
    display: none !important;
    content: none !important;
}

@media (max-width: 768px) {
    section[data-store=home-image-text-module] .textbanner .row {
        flex-direction: column !important;
        height: auto !important;
        border-radius: 20px !important;
    }

    section[data-store=home-image-text-module] .textbanner-image {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        height: 250px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
    }

    section[data-store=home-image-text-module] .textbanner-text {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 30px 20px !important;
    }

    section[data-store=home-image-text-module] {
        margin-bottom: 60px !important;
    }

    .section-banners-home .textbanner::before,
    [data-store=banner-home-categories] .textbanner::before {
        font-size: 18px !important;
    }

    .container-fluid .page-header h1.js-product-name,
    .page-header h1 {
        font-size: 20px !important;
    }

    .category-header,
    .filters-container,
    .js-category-controls,
    div[data-store=category-controls] {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        z-index: 20 !important;
        background-color: #191919 !important;
        margin-bottom: 0 !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        display: block !important;
        width: 100% !important;
    }

    .js-filters-toggle {
        float: right !important;
        margin-top: -45px !important;
        position: relative !important;
        z-index: 25 !important;
    }

    .category-body,
    .js-product-table {
        margin-top: 20px !important;
        padding-top: 0 !important;
        clear: both !important;
    }

    .js-product-item-image-container .position-relative.d-block[style] {
        padding-bottom: 140% !important;
    }
}

#single-product .js-price-container > .col,
#single-product .js-price-container > .col-12,
.item-actions,
section.section-newsletter-home-images {
    margin-bottom: 0 !important;
}

.js-footer,
footer.js-footer {
    margin-top: 0 !important;
}

#ajax-cart a,
.cart-summary a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    transition: transform .3s !important;
}

body.js-modal-open,
html {
    overflow-y: scroll !important;
}

#ajax-cart a svg,
.cart-summary a svg {
    margin-right: 5px !important;
    overflow: visible !important;
    z-index: 1;
    transform: none !important;
    transition: none !important;
}

#ajax-cart a span:last-of-type,
.cart-summary a span:last-of-type {
    position: absolute !important;
    top: 0 !important;
    left: 33px !important;
    background-color: rgba(255, 255, 255, .8) !important;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .5) !important;
    color: #333 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transform: none !important;
}

#ajax-cart-drawer,
#modal-cart {
    border-radius: 20px 0 0 20px !important;
}

#ajax-cart a:hover,
.cart-summary a:hover {
    transform: translateY(-1px) !important;
}

#ajax-cart a:hover span,
#ajax-cart a:hover svg,
.cart-summary a:hover span,
.cart-summary a:hover svg {
    transform: none !important;
}

@keyframes entradaBlur {
    from {
        backdrop-filter: blur(0);
        background-color: rgba(0, 0, 0, 0);
    }
    to {
        backdrop-filter: blur(8px);
        background-color: rgba(0, 0, 0, .4);
    }
}

.js-modal-overlay,
.modal-overlay {
    animation: .5s ease-out forwards entradaBlur;
    display: block;
    opacity: 1;
}

body.js-modal-open {
    padding-right: 0 !important;
    position: relative !important;
}

body.js-modal-open .nav-main,
body.js-modal-open header {
    padding-right: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#ajax-cart-drawer {
    background-color: rgba(255, 255, 255, .85) !important;
    backdrop-filter: blur(12px) !important;
    border-left: 1px solid rgba(255, 255, 255, .5) !important;
    box-shadow: -5px 0 15px rgba(0, 0, 0, .1) !important;
    color: #000 !important;
}

#ajax-cart-drawer .ajax-cart-item-name,
#ajax-cart-drawer .ajax-cart-title,
#ajax-cart-drawer .ajax-cart-total-price,
#ajax-cart-drawer p,
#ajax-cart-drawer span,
#modal-cart a,
#modal-cart div,
#modal-cart p,
#modal-cart span,
#single-product .js-installment-price,
#single-product .js-max-installments,
#single-product .js-max-installments-container,
#single-product .product-installment-value,
body.template-product #price_display,
body.template-product .breadcrumbs .crumb,
body.template-product .breadcrumbs .separator,
body.template-product .js-max-installments-container,
body.template-product .js-product-form .js-quantity-input,
body.template-product .js-product-name,
body.template-product .product-description,
body.template-product .product-description p,
body.template-product .product-description span,
body.template-product .product-description strong {
    color: #000 !important;
}

#ajax-cart-drawer .ajax-cart-close-icon,
#ajax-cart-drawer .ajax-cart-close-icon svg,
#cart-shipping-container .js-accordion-toggle svg,
.ajax-cart-item-delete svg,
.ajax-cart-item-delete svg path,
.cart-item-delete svg,
.cart-item-delete svg path {
    fill: #000 !important;
    color: #000 !important;
}

#modal-cart {
    background-color: rgba(255, 255, 255, .75) !important;
    backdrop-filter: blur(25px) !important;
    border-left: 1px solid rgba(255, 255, 255, .6) !important;
    box-shadow: -5px 0 25px rgba(0, 0, 0, .15) !important;
}

#modal-cart .modal-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, .1) !important;
    padding: 15px !important;
}

#modal-cart .modal-header .text-center {
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #000 !important;
}

#modal-cart .alert-info {
    background: 0 0 !important;
    border: 1px solid #000 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #000 !important;
    border-radius: 6px !important;
}

#modal-cart .cart-item-name,
#modal-cart .item-name {
    font-size: 14px !important;
    font-weight: 600 !important;
}

#modal-cart .js-modal-close svg {
    width: 16px !important;
    height: 16px !important;
    fill: #000 !important;
}

.headbar {
    background-color: #191919 !important;
    box-shadow: none !important;
    border: none !important;
}

.page-header h1 {
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: left;
    margin-top: 20px !important;
}

.js-item-image-padding,
.js-product-item-image-container .position-relative.d-block[style],
.product-item .item-image-container[style] {
    padding-bottom: 150% !important;
    width: 100% !important;
    background: 0 0 !important;
    display: block !important;
    overflow: hidden !important;
}

.absolute-centered,
.img-absolute-centered,
.js-product-item-image-container img,
.product-item .item-image img {
    left: 0 !important;
    transform: none !important;
    position: absolute !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    right: auto !important;
    min-width: 100% !important;
    border: none !important;
}

.category-body .row .col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
}

.js-product-table .row,
.product-table .row {
    display: flex !important;
    justify-content: center !important;
}

.breadcrumb-container,
.category-header h1,
.nav-dropdown-content li,
.page-header {
    justify-content: center !important;
    display: flex !important;
    text-align: center !important;
}

.breadcrumb-container,
.category-header h1,
.page-header {
    width: 100% !important;
}

.nav-dropdown-content {
    background-color: rgba(0, 0, 0, .6) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 900 !important;
    top: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow: visible !important;
    transition: opacity .4s, visibility .4s !important;
}

#footer,
.footer-legal,
.js-footer,
.nav-dropdown-content .desktop-list-subitems,
.nav-dropdown-content .nav-item-container,
.nav-dropdown-content li,
.nav-dropdown-content ul,
.section-footer,
footer {
    background: 0 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.nav-dropdown-content a,
.nav-dropdown-content span {
    color: #fff !important;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.nav-dropdown-content a:hover {
    color: #ccc !important;
    background-color: rgba(255, 255, 255, .05) !important;
}

.nav-dropdown-content li {
    border-right: 1px solid rgba(255, 255, 255, .3) !important;
    align-items: center !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    margin: 0 !important;
    overflow: visible !important;
    height: 50px !important;
    min-width: 120px !important;
}

.nav-dropdown-content li:last-child {
    border-right: none !important;
}

.nav-dropdown-content li a,
.nav-dropdown-content li a:hover,
.nav-dropdown-content li:hover a {
    background: 0 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: .4s cubic-bezier(.165, .84, .44, 1) !important;
    color: #fff !important;
    text-decoration: none !important;
    opacity: 1 !important;
    outline: 0 !important;
}

.nav-dropdown-content li a {
    display: inline-block !important;
    padding: 8px 22px !important;
    border-radius: 50px !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    position: relative !important;
    top: 0 !important;
    white-space: nowrap !important;
    transform: scale(1) !important;
}

.nav-dropdown-content li:hover a {
    background-color: rgba(255, 255, 255, .15) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, .3) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2) !important;
    z-index: 100 !important;
    color: #fff !important;
}

.nav-dropdown-content::before {
    content: "" !important;
    position: absolute !important;
    top: -35px !important;
    left: 0 !important;
    right: 0 !important;
    height: 40px !important;
    background: 0 0 !important;
    z-index: -1 !important;
}

.header-nav-list .header-nav-item:hover > a,
.header-nav-list .header-nav-item > a {
    background-color: transparent !important;
    background-image: none !important;
}

.nav-link-productos {
    padding: 20px 30px;
    margin: -20px -30px;
    display: inline-block;
}

.tu-clase-de-encabezado {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .8) 0, rgba(0, 0, 0, 0) 100%);
}

.tu-clase-del-encabezado {
    background-color: #1a1a1a;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
    position: relative;
    z-index: 999;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.section-adbar,
body.template-home .section-adbar {
    background-color: rgba(0, 0, 0, .4) !important;
    width: 100% !important;
}

.desktop-list-subitems.list-subitems {
    background-color: rgba(26, 26, 26, .4) !important;
    backdrop-filter: blur(200px) !important;
    border: none !important;
    position: relative !important;
    overflow: visible !important;
}

.desktop-list-subitems.list-subitems::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(26, 26, 26, .6) 0, rgba(26, 26, 26, 0) 100%) !important;
    backdrop-filter: blur(200px) !important;
    pointer-events: none;
}

.footer-legal .row .text-center.font-small div.d-inline-block {
    visibility: hidden;
    position: relative;
    font-size: 0;
}

.footer-legal .row .text-center.font-small div.d-inline-block::before {
    content: "Copyright SomosKHEMIA - 2026. Todos los derechos reservados.";
    visibility: visible;
    font-size: 13px;
    display: block;
    color: #fff;
}

.footer-legal .row .text-center.font-small div.d-inline-block.mr-md-2 {
    position: relative !important;
    font-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.footer-legal .row .text-center.font-small div.d-inline-block.mr-md-2::before {
    content: "Copyright SomosKHEMIA - 2026. Todos los derechos reservados. ";
    font-size: 13px !important;
    color: #fff !important;
    display: inline-block !important;
    margin-right: 5px !important;
    text-transform: none !important;
}

.footer-legal .text-center.font-small {
    font-size: 13px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    line-height: 1.5 !important;
}

.footer-legal .text-center.font-small a,
.footer-legal .text-center.font-small span {
    font-size: 13px !important;
    margin: 0 4px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.js-product-slide a,
.js-product-slide img,
.js-swiper-product-slide a,
.product-gallery-image a,
.product-slide a,
.swiper-slide a.product-gallery-image,
a[data-fancybox=product-gallery],
a[data-fancybox] {
    pointer-events: none !important;
    cursor: default !important;
}

.js-product-zoom-icon,
.product-gallery-icon-zoom {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.container-fluid .page-header h1.js-product-name,
.page-header h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    width: 100% !important;
}

header.js-head-main {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
}

.section-adbar {
    order: 1 !important;
    border: none !important;
    padding: 8px 0 !important;
    display: none !important;
}

.adbar-message,
.adbar-text-container,
.section-adbar * {
    color: #fff !important;
    text-align: center !important;
    text-shadow: none !important;
    animation: none !important;
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
    font-size: 12px !important;
    margin: 0 !important;
}

.col-utility,
.header-utils {
    margin-left: auto !important;
    display: flex !important;
    padding-right: 0 !important;
}

header.js-head-main > .container-fluid {
    order: 2 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 20px !important;
}

.header-utils {
    align-items: center !important;
    gap: 20px !important;
    justify-content: flex-end !important;
    order: 3 !important;
    flex: 0 0 auto !important;
}

body.template-home .section-adbar {
    display: flex !important;
    order: -1 !important;
    padding: 20px 0 !important;
    z-index: 1005 !important;
    align-items: center !important;
    justify-content: center !important;
    height: 35px !important;
}

header .container-fluid > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
}

.header-logo-container {
    flex: 0 0 auto !important;
    margin-right: 20px !important;
    order: 1 !important;
}

.js-menu-desktop,
.nav-primary {
    display: flex !important;
    flex: 1 1 auto !important;
    order: 2 !important;
}

.col-utility {
    align-items: center !important;
    justify-content: flex-end !important;
    order: 3 !important;
    flex: 0 0 auto !important;
}

.js-modal-open[data-component=menu-button],
a[data-toggle="#nav-hamburger"] {
    display: none !important;
    width: 0 !important;
}

.js-login-modal .utilities-text,
a[href*=account] .utilities-text,
a[href*=login] .utilities-text {
    display: inline-block !important;
    visibility: visible !important;
    font-size: 12px !important;
    width: auto !important;
    margin-left: 5px !important;
}

.badge,
.cart-quantity,
.js-cart-quantity,
span[class*=quantity] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: -5px !important;
    right: -8px !important;
    min-width: 18px !important;
    height: 18px !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 99999 !important;
}

.cart-container,
.utilities-item {
    overflow: visible !important;
    position: relative !important;
}

.header-utils > div {
    margin-left: 15px !important;
}

header.js-head-main .container-fluid {
    height: 125px !important;
    min-height: 125px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.cart-item-quantity .form-group,
.cart-item-quantity .form-quantity,
.cart-item-quantity .w-100 {
    background: 0 0 !important;
    border: none !important;
    width: auto !important;
    display: inline-block !important;
}

.cart-item-quantity .row.align-items-center {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #1a1a1a !important;
    border-radius: 50px !important;
    height: 32px !important;
    width: 100px !important;
    margin: 5px 0 !important;
    padding: 0 4px !important;
    overflow: hidden !important;
    border: none !important;
}

.js-cart-quantity-btn.form-quantity-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 30px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    position: static !important;
}

.cart-item-quantity .form-quantity-icon svg,
.cart-item-quantity .js-cart-quantity-btn svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    fill: #fff !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
}

.js-cart-quantity-container.col-px-1 {
    flex: 0 0 22px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
}

.js-cart-quantity-container input {
    background: 0 0 !important;
    color: #fff !important;
    border: none !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    width: 100% !important;
    padding: 0 !important;
}

.js-cart-quantity-btn.minus {
    display: flex !important;
    justify-content: flex-end !important;
    padding-right: 6px !important;
    flex: 1 !important;
}

.js-cart-quantity-btn.plus {
    display: flex !important;
    justify-content: flex-start !important;
    padding-left: 6px !important;
    flex: 1 !important;
}

.js-cart-quantity-btn svg {
    width: 11px !important;
    height: 11px !important;
    fill: #fff !important;
}

@media (min-width: 992px) {
    .section-single-product {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        overflow-x: hidden !important;
    }

    .section-single-product .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    .product-image-container {
        display: flex !important;
        flex: 0 0 675px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .section-single-product .col-2.d-none.d-md-block {
        flex: 0 0 110px !important;
        width: 110px !important;
        margin-right: 15px !important;
        padding: 0 !important;
    }

    .section-single-product .col-2.d-none.d-md-block img {
        object-fit: cover !important;
        margin-bottom: 8px !important;
        border-radius: 4px;
    }

    .section-single-product .col-2.d-none.d-md-block + div {
        flex: 0 0 550px !important;
        width: 550px !important;
        max-height: 72vh !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .section-single-product .col-2.d-none.d-md-block + div img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .section-single-product .col-12.col-md-7 {
        flex: 0 1 350px !important;
        min-width: 300px !important;
        padding-left: 15px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .js-price-container.price-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: fit-content !important;
        margin-bottom: 15px !important;
        margin-left: -15px !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    .js-price-container.price-container * {
        white-space: nowrap !important;
        width: auto !important;
        margin: 0 !important;
    }

    .js-product-container .btn-primary {
        min-width: 220px !important;
        width: fit-content !important;
    }

    .js-product-container .swiper-pagination {
        bottom: 5px !important;
    }
}

.js-product-form .form-row.mb-2 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

.js-product-form .col-4.js-quantity-container {
    flex: 0 0 120px !important;
    width: 120px !important;
    max-width: 120px !important;
    padding: 0 !important;
}

.js-product-form .js-quantity.form-group {
    position: relative !important;
    height: 45px !important;
    border: 1px solid #fff !important;
    border-radius: 6px !important;
    background: 0 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.js-product-form .js-quantity-input {
    position: absolute !important;
    top: 1100% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 50px !important;
    height: 30px !important;
    min-height: 30px !important;
    text-align: center !important;
    color: #fff !important;
    background: 0 0 !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
    display: block !important;
    line-height: 30px !important;
    appearance: none !important;
}

#single-product #price_display,
.js-offer-label {
    line-height: 1 !important;
}

.js-product-form .js-quantity-down,
.js-product-form .js-quantity-up {
    position: absolute !important;
    top: 0 !important;
    width: 35px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    cursor: pointer !important;
    background: 0 0 !important;
}

.js-product-form .js-quantity-down {
    left: 0 !important;
}

.js-product-form .js-quantity-up {
    right: 0 !important;
}

.js-product-form .js-quantity-down svg,
.js-product-form .js-quantity-up svg {
    fill: #fff !important;
    width: 14px !important;
    height: 14px !important;
}

.js-product-form .col-8 {
    flex: 1 !important;
    padding: 0 !important;
}

.js-addtocart {
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 4px !important;
}

.js-product-container {
    margin-top: 20px !important;
}

.js-accordion-container {
    margin-top: 30px !important;
    display: block !important;
    clear: both !important;
}

.js-product-thumb-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

body.template-home::before {
    content: "";
    right: 0;
    bottom: 0;
    background-image: url("https://dcdn-us.mitiendanube.com/stores/007/093/811/themes/rio/2-slide-1767121042328-3932132190-75ee0b67d8e0d7cce6b3424a64802b3b1767121298-480-0.webp?1000217475");
    background-size: cover;
    background-position: center top;
    filter: blur(60px) brightness(.3) saturate(130%);
}

.item {
    background: 0 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: none !important;
    margin-bottom: 15px !important;
}

.item-description {
    background: rgba(0, 0, 0, .7) !important;
    backdrop-filter: blur(15px) !important;
    border-top: 1px solid rgba(255, 255, 255, .1) !important;
    padding: 15px 15px 20px !important;
    border-radius: 0 0 20px 20px !important;
    text-align: center !important;
}

.item-actions > :nth-child(n+2),
.item-buy-btn.btn-secondary,
.js-addtocart-placeholder,
.js-addtocart.btn.btn-primary.btn-block.btn-transition {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.item-actions .btn.btn-primary,
.item-actions .js-addtocart:first-child {
    border-radius: 50px !important;
    width: 100% !important;
    padding: 12px 20px !important;
    margin-top: 15px !important;
    background: rgba(255, 255, 255, .9) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid #fff !important;
    color: #222 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 12px !important;
    transition: .3s !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
}

.item-image,
.item-image img {
    border-radius: 20px 20px 0 0 !important;
}

.item-actions .btn.btn-primary:hover {
    background: #fff !important;
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(255, 255, 255, .4) !important;
}

.item-description .item-name,
.item-description .item-name a,
.item-description .item-price {
    color: #fff !important;
    font-weight: 600 !important;
}

.item-actions .btn:first-child {
    margin-bottom: 5px !important;
}

.item-image {
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
}

.item-name,
.item-name a {
    display: block !important;
    text-align: center !important;
}

.item-price-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    min-height: 45px !important;
}

.item-installments {
    text-align: center !important;
    display: block !important;
}

.item-price-container .item-price {
    font-size: 20px !important;
    order: 2 !important;
    display: block !important;
    margin: 0 !important;
    font-weight: 900 !important;
    color: #fff !important;
    letter-spacing: .5px !important;
    line-height: 1 !important;
}

.item-price-container .item-price-compare,
.js-price-container .col > span:first-child {
    margin-bottom: 2px !important;
    order: 1 !important;
    text-decoration: line-through !important;
}

.item-price-container .item-price-compare {
    display: block !important;
    margin-right: 0 !important;
    font-size: 11px !important;
    color: #888 !important;
}

.js-offer-label {
    background-color: rgba(0, 0, 0, .6) !important;
    display: inline-block !important;
    font-size: 13px !important;
    padding: 10px 15px !important;
    font-weight: 800 !important;
    min-height: auto !important;
    border-radius: 4px !important;
    color: #fff !important;
}

body.template-category::before,
body.template-product::before {
    content: "";
    height: 100%;
    background-image: url("https://dcdn-us.mitiendanube.com/stores/007/093/811/themes/rio/2-slide-1767121042328-3932132190-75ee0b67d8e0d7cce6b3424a64802b3b1767121298-480-0.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(50px) saturate(180%);
    background-blend-mode: multiply;
    transform: scale(1.1);
}

#product_form .js-accordion-content,
body.template-category .js-category-controls {
    display: block !important;
}

body.template-category .js-category-controls .title-container,
body.template-category .js-category-controls h1 {
    text-align: center;
    width: 100%;
}

.js-products-featured-container,
.js-products-featured-title,
.section-featured-home,
.section-featured-home .container-fluid {
    border: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    background-color: transparent !important;
}

.section-featured-home {
    background: 0 0 !important;
}

#ajax-cart-details .cart-item-row,
#ajax-cart-details .row,
#modal-cart .js-cart-item-row {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
}

#ajax-cart-details .col-10,
#modal-cart .col-10,
#modal-cart .col-8 {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    position: static !important;
    justify-content: flex-start !important;
}

#ajax-cart-details .cart-item-quantity,
#modal-cart .cart-item-quantity {
    margin-left: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    width: fit-content !important;
}

#ajax-cart-details .cart-item-quantity .form-group,
#ajax-cart-details .cart-item-quantity .row {
    margin: 0 !important;
    float: none !important;
}

#ajax-cart-details .col-10,
#modal-cart .col-10 {
    align-items: flex-start !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
}

#ajax-cart-details .cart-item-quantity,
#modal-cart .cart-item-quantity {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(-2px) !important;
    float: none !important;
    display: inline-flex !important;
}

#ajax-cart-details .cart-item-name,
#modal-cart .cart-item-name {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#ajax-cart-details .js-cart-item,
#modal-cart .js-cart-item,
.cart-table .cart-row {
    border-bottom: 1px solid #000 !important;
    padding-bottom: 15px !important;
    padding-top: 15px !important;
    margin-bottom: 5px !important;
    display: flex !important;
    width: 100% !important;
}

#ajax-cart-details .js-cart-item:last-child,
#modal-cart .js-cart-item:last-of-type {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

#ajax-cart-details .js-ajax-cart-list,
#modal-cart .js-ajax-cart-list {
    margin-bottom: 40px !important;
    display: block !important;
}

#ajax-cart-drawer .ajax-cart-header,
#modal-cart .modal-header {
    border-bottom: none !important;
    box-shadow: none !important;
}

#ajax-cart-drawer .ajax-cart-title,
#modal-cart .modal-header .text-center {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding-top: 15px !important;
}

#ajax-cart-drawer .ajax-cart-body,
#modal-cart .modal-body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#ajax-cart-details .js-cart-item:first-child,
#modal-cart .js-cart-item:first-child {
    padding-top: 20px !important;
    margin-top: 0 !important;
}

#ajax-cart-details .js-cart-item-subtotal,
#modal-cart .js-cart-item-subtotal,
.cart-item-subtotal {
    font-size: 14px !important;
    color: #000 !important;
    line-height: 1.9 !important;
    letter-spacing: .5px !important;
}

#ajax-cart-details .cart-item-delete,
#modal-cart .cart-item-delete {
    margin-top: 12px !important;
    align-self: flex-start !important;
    display: flex !important;
    align-items: flex-start !important;
    height: auto !important;
}

#modal-cart .js-modal-close.btn-link {
    margin-top: 3px !important;
    display: block !important;
}

#cart-shipping-container .js-accordion-toggle,
#cart-shipping-container .js-accordion-toggle .subtitle {
    color: #000 !important;
    font-weight: 600 !important;
}

#cart-shipping-container .js-shipping-method-unavailable,
#cart-shipping-container .text-muted,
#cart-shipping-container small {
    color: #222 !important;
}

div.row.section-single-product {
    background-color: rgba(240, 234, 229, .72) !important;
    backdrop-filter: blur(10px) !important;
    max-width: 1300px !important;
    width: 94% !important;
    margin: 80px auto 50px !important;
    padding: 30px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .15) !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
}

@media (min-width: 768px) {
    div.row.section-single-product > div:nth-child(2) {
        padding-left: 0 !important;
        border: none !important;
        position: relative !important;
    }
}

.js-accordion-container,
.js-accordion-content,
.js-accordion-toggle {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.js-accordion-toggle {
    padding-left: 0 !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
}

.js-accordion-content {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    color: #fff !important;
}

.divider {
    background-color: #fff !important;
    border-color: #fff !important;
    opacity: .4 !important;
}

#installments-modal,
.js-installments-modal-link {
    color: #fff !important;
    font-weight: 600;
}

#installments-modal svg,
#installments-modal svg path,
.js-installments-modal-link i,
.js-installments-modal-link svg,
.js-installments-modal-link svg path {
    fill: #fff !important;
    color: #fff !important;
}

.js-price-container .col {
    display: flex !important;
    flex-direction: column !important;
}

.js-price-container .col > span:first-child {
    font-size: 14px !important;
    color: #fff !important;
    opacity: .7 !important;
    line-height: 1.2 !important;
}

.js-price-container .col > span:last-child {
    order: 2 !important;
}

.js-price-container.row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 !important;
}

.js-price-container > .col,
.js-price-container > .col-12,
.js-price-container > .col-auto {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
    text-align: left !important;
}

.js-price-container > .col {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#compare_price_display {
    order: 1 !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, .6) !important;
    text-decoration: line-through !important;
    margin-bottom: 0 !important;
    display: block !important;
}

#price_display {
    order: 2 !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 1.1 !important;
    display: block !important;
}

.js-price-container > .col-12 {
    order: 2 !important;
    margin-top: 0 !important;
}

.js-payment-discount-price-product-container {
    font-size: 18px !important;
    color: #c5a669 !important;
    font-weight: 700 !important;
}

.js-payment-discount-name-product,
.js-payment-discount-price-product {
    color: #c5a669 !important;
}

.js-price-container > .col-auto {
    order: 3 !important;
}

.item-installments,
.js-max-installments-container {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

#btn-installments {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 0 5px !important;
    color: #fff !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border-top: 1px solid rgba(255, 255, 255, .3) !important;
    border-top: none !important;
    margin-top: 0 !important;
}

#btn-installments::after {
    content: "VER MEDIOS DE PAGO";
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#btn-installments::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V12h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

#product_form .js-accordion-toggle,
.js-product-form .js-accordion-toggle {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

.js-product-form .js-accordion-toggle {
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#cart-shipping-container .js-accordion-toggle,
#modal-cart .js-accordion-toggle {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
}

#cart-shipping-container .js-accordion-content,
#modal-cart .js-accordion-content {
    display: none;
}

body.template-product #btn-installments {
    color: #000 !important;
    border-color: rgba(0, 0, 0, .3) !important;
}

body.template-product #btn-installments::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V12h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E") !important;
}

body.template-product #compare_price_display {
    color: #555 !important;
}

body.template-product .divider {
    background-color: #000 !important;
    border-color: #000 !important;
    opacity: .2 !important;
}

body.template-product .js-product-form .js-quantity.form-group {
    border-color: #000 !important;
}

body.template-product .js-product-form .js-quantity-down svg,
body.template-product .js-product-form .js-quantity-up svg {
    fill: #000 !important;
}

body.template-home::before {
    content: " " !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background-color: #6b5148 !important;
    background-blend-mode: multiply !important;
    filter: blur(60px) saturate(130%) !important;
    transform: scale(1.1) !important;
}

body.template-category::before,
body.template-collection::before,
body.template-product::before {
    content: " " !important;
    position: fixed !important;
    top: 140px !important;
    left: 0 !important;
    height: calc(100% - 140px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    width: 100% !important;
}

body.template-product::before {
    background-color: #a89185 !important;
}

body.template-category::before,
body.template-collection::before {
    background-color: #8e7468 !important;
}

.footer-legal .text-center,
footer a,
footer div,
footer span {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.item-actions {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    padding-bottom: 25px !important;
}

.item-description .item-installments,
.item-description .js-installment-price,
.item-description .js-max-installments,
.item-description .js-max-installments-container,
.item-description .product-installment-value {
    color: #fff !important;
}

#single-product .js-max-installments-container {
    text-align: left !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

#single-product .js-max-installments {
    display: inline !important;
    color: #000 !important;
}

#single-product .js-installment-amount {
    margin-right: 2px !important;
}

#single-product .js-installment-price {
    margin-left: 2px !important;
}

#single-product #btn-installments {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    color: #000 !important;
}

.item-description .js-max-installments-container {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    color: #fff !important;
}

.item-description .js-max-installments {
    display: inline-block !important;
    color: #fff !important;
}

.item-description .js-installment-amount,
.item-description .js-installment-price,
.item-description .product-installment-value {
    color: #fff !important;
    margin: 0 !important;
}

.item-description .item-price-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
}

.item-description .item-price-compare {
    order: 1 !important;
}

.item-description .item-price {
    order: 2 !important;
    margin: 2px 0 !important;
    font-weight: 800 !important;
}

.item-description .js-payment-discount-price-product-container {
    order: 3 !important;
    font-size: 14px !important;
    color: #e88a03 !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
}

#single-product .js-payment-discount-name-product,
#single-product .js-payment-discount-price-product,
.item-description .js-payment-discount-name-product,
.item-description .js-payment-discount-price-product {
    color: inherit !important;
}

#single-product .js-payment-discount-price-product-container {
    color: #cb7801 !important;
    font-weight: 600 !important;
}

#single-product .js-price-container {
    gap: 10px !important;
    margin-bottom: 5px !important;
}

#single-product .divider {
    margin-top: 10px !important;
    margin-bottom: 20px !important;
}

#single-product #btn-installments {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
}

#single-product #btn-installments::before {
    margin-left: 0 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

#single-product .js-product-payments-container {
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: block !important;
}

.btn-whatsapp {
    width: 65px !important;
    height: 65px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-whatsapp svg {
    width: 55px !important;
    height: 55px !important;
    margin: 0 !important;
}

.js-addtocart.js-prod-submit-form {
    display: inline-block !important;
    visibility: visible !important;
}

.js-addtocart-placeholder {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    z-index: 10;
    background: #000 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.col-8 {
    position: relative !important;
    min-height: 48px;
}

.js-alert-added-to-cart {
    display: none;
    opacity: 0;
}

.js-alert-added-to-cart.notification-visible {
    display: block !important;
    opacity: 1 !important;
    animation: .4s cubic-bezier(.165, .84, .44, 1) forwards popupFadeIn;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1270px) {
    .nav-desktop-list > li:nth-child(3) {
        display: none !important;
    }
}

@media (max-width: 1080px) {
    .nav-desktop-list > li:nth-child(2) {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    header .utilities-text {
        display: none !important;
    }
}

header .nav-list-link {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

header .nav-list-arrow {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 4px !important;
}

@media (max-width: 767px) {
    .nav-desktop,
    .nav-desktop-list,
    .nav-desktop-list > li:first-child {
        display: none !important;
    }

    header .col-utility.d-md-none {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 25px !important;
        top: auto !important;
        bottom: 42px !important;
        transform: none !important;
        margin-top: 0 !important;
        background: 0 0 !important;
        width: auto !important;
        z-index: 1005;
        align-items: center;
    }

    header .col-utility.d-md-none .utilities-link {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 5px;
    }

    header .col-utility.d-md-none svg {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        fill: #fff !important;
        display: block !important;
        opacity: 1 !important;
        transform: translateZ(0) !important;
    }

    .header-logo-container {
        margin-left: 70px !important;
    }
}

@media (min-width: 1080px) {
    .category-body .container-fluid,
    .section-featured-home .container-fluid,
    .js-related-products .products-section-container {
        padding-left: 2% !important;
        padding-right: 2% !important;
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
}

.item-description {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 15px 10px 20px !important;
    padding-bottom: 5px !important;
}

.item-description .item-name {
    min-height: 42px !important;
    overflow: hidden !important;
    margin-bottom: 5px !important;
}

@media (min-width: 992px) {
    .item-description .item-name {
        margin-top: 12px !important;
        min-height: 45px !important;
    }
}

.js-item-product .item-actions form.js-product-form {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
}

.js-item-product .item-actions .js-addtocart[type="submit"] {
    width: 150px !important;
    min-width: 150px !important;
    height: 48px !important;
    margin: 10px auto 5px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50px !important;
    flex: none !important;
    max-width: 100% !important;
}

.js-item-product .item-actions .js-addtocart[type="submit"] span {
    display: inline-block !important;
    width: auto !important;
}

#installments-modal {
    background-color: rgba(255, 255, 255, .8) !important;
    backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, .6) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .2) !important;
    border-radius: 20px !important;
    width: 750px !important;
    max-width: 95vw !important;
    height: auto !important;
    max-height: 85vh !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

#installments-modal .tab-group {
    background-color: transparent !important;
    border-bottom: 1px solid #000 !important;
    display: flex !important;
    height: 50px !important;
    align-items: stretch !important;
    padding: 10px 15px !important;
    margin-bottom: 20px !important;
    gap: 10px !important;
    justify-content: flex-start !important;
}

#installments-modal .tab {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

#installments-modal .tab-link {
    color: rgba(0, 0, 0, .5) !important;
    font-family: Onest, sans-serif !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-bottom: 3px solid transparent !important;
    transition: all .2s ease !important;
    white-space: nowrap !important;
}

#installments-modal .tab.active .tab-link {
    color: #000 !important;
    border-bottom-color: #000 !important;
    opacity: 1 !important;
}

#installments-modal .modal-header .text-center {
    font-size: 24px !important;
    letter-spacing: 3px !important;
    color: #000 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    padding-left: 45px !important;
    font-family: Onest, sans-serif !important;
}

#installments-modal .js-payment-method-title,
#installments-modal .modal-body *,
#installments-modal table td {
    color: #000 !important;
    font-family: Onest, sans-serif !important;
}

#installments-modal .js-payment-method-title {
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 10px 0 15px !important;
}

#installments-modal .js-payment-provider-installments-row,
#installments-modal table {
    background: transparent !important;
    width: 100% !important;
}

#installments-modal .js-payment-provider-installments-row {
    background-color: rgba(255, 255, 255, .3) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .05) !important;
}

#installments-modal .card,
#installments-modal .js-info-payment-method-container {
    background-color: rgba(255, 255, 255, .4) !important;
    border: 1px solid rgba(255, 255, 255, .8) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .05) !important;
}

#installments-modal .js-modal-close svg {
    fill: #000 !important;
}

#installments-modal .modal-footer .btn-link {
    color: #000 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

#installments-modal .js-modal-tab-discount.label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    height: auto !important;
    vertical-align: middle !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    background-color: #fff !important;
    color: #000 !important;
    transform: translateY(0) !important;
}

#installments-modal .js-modal-tab-discount strong {
    line-height: 1 !important;
    margin: 0 !important;
    display: block !important;
}

#installments-modal .modal-body {
    padding: 25px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#installments-modal .card img {
    max-width: 40px !important;
    height: auto !important;
}

#installments-modal .tab-link {
    padding: 8px 15px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}

#installments-modal .tab-group {
    min-height: 80px !important;
    align-items: center !important;
}

@media (max-width: 768px) {
    #installments-modal {
        transition: none !important;
        animation: none !important;
    }

    #installments-modal.modal-show {
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        border: none !important;
        opacity: 1 !important;
        background-color: rgba(255, 255, 255, .8) !important;
        backdrop-filter: blur(20px) !important;
        transition: none !important;
    }

    #installments-modal:not(.modal-show) {
        display: none !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
        transition: none !important;
        animation: none !important;
        backdrop-filter: none !important;
    }

    #installments-modal .modal-body {
        padding: 20px 15px !important;
        background: transparent !important;
    }

    #installments-modal .card,
    #installments-modal .js-info-payment-method-container {
        background-color: rgba(255, 255, 255, .5) !important;
        border: 1px solid rgba(255, 255, 255, .6) !important;
    }
}

#installments-modal .modal-header .js-modal-close,
#installments-modal .modal-header .js-modal-close i,
#installments-modal .modal-header .btn-close,
#installments-modal .modal-header .close span {
    color: #000 !important;
    opacity: 1 !important;
}

#installments-modal .modal-header .js-modal-close svg,
#installments-modal .modal-header .btn-close svg {
    fill: #000 !important;
}

#installments-modal .modal-header .js-modal-close {
    font-size: 24px !important;
    line-height: 1 !important;
}

#installments-modal .modal-header .js-modal-close svg.icon-inline,
#installments-modal .modal-header .js-modal-close svg.icon-lg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    fill: #000 !important;
    color: #000 !important;
    opacity: 1 !important;
}

#installments-modal .modal-header .col-2.text-right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-right: 15px !important;
}

#installments-modal .modal-header .js-modal-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px !important;
    width: auto !important;
    height: auto !important;
}

#nav-hamburger .modal-with-fixed-footer {
    background-color: rgba(255, 255, 255, .75) !important;
    backdrop-filter: blur(25px) !important;
    box-shadow: -5px 0 25px rgba(0, 0, 0, .15) !important;
    border-left: 1px solid rgba(255, 255, 255, .6) !important;
}

#nav-hamburger,
#nav-hamburger .modal-scrollable-area,
#nav-hamburger .modal-body,
#nav-hamburger .nav-body,
#nav-hamburger .nav-primary,
#nav-hamburger .nav-list,
#nav-hamburger .js-menu-panel {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

#nav-hamburger .nav-item.item-with-subitems > .js-toggle-menu-panel {
    display: none !important;
}

#nav-hamburger .js-menu-panel {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

#nav-hamburger .js-menu-panel > li:first-of-type {
    display: none !important;
}

#nav-hamburger .js-menu-panel .modal-header {
    display: none !important;
}

#nav-hamburger .nav-list,
#nav-hamburger .js-menu-panel,
#nav-hamburger .nav-item {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

#nav-hamburger .nav-list-link,
#nav-hamburger .js-menu-panel .nav-list-link {
    color: #000 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-shadow: none !important;
    font-size: 14px !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 25px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .15) !important;
}

#nav-hamburger .modal-header {
    display: flex !important;
    justify-content: flex-end !important;
    background: transparent !important;
    border: none !important;
    padding: 15px !important;
    width: 100% !important;
}

#nav-hamburger .modal-header .modal-close,
#nav-hamburger .modal-header svg {
    fill: #000 !important;
    color: #000 !important;
    opacity: 1 !important;
    display: block !important;
}

@media (max-width: 768px) {
    #modal-cart,
    #ajax-cart-drawer {
        border-radius: 0 !important;
    }
}

@media (max-width: 768px) {
    #nav-hamburger,
    #modal-cart,
    #nav-hamburger .modal-with-fixed-footer,
    #modal-cart .modal-with-fixed-footer {
        height: 100vh !important;
        bottom: 0 !important;
        top: 0 !important;
        max-height: none !important;
    }

    #nav-hamburger .modal-scrollable-area,
    #modal-cart .modal-body {
        min-height: 100% !important;
        height: auto !important;
        padding-bottom: 80px !important;
    }

    #nav-hamburger .modal-with-fixed-footer,
    #modal-cart {
        background-color: rgba(255, 255, 255, .75) !important;
        backdrop-filter: blur(25px) !important;
    }
}

@media (max-width: 768px) {
    #nav-hamburger {
        top: 0 !important;
        bottom: 0 !important;
        background: transparent !important;
    }

    #nav-hamburger .modal-with-fixed-footer {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 100% !important;
        background-color: rgba(255, 255, 255, .75) !important;
        backdrop-filter: blur(25px) !important;
    }

    #nav-hamburger .modal-scrollable-area {
        flex-grow: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 991px) {
    div.row.section-single-product {
        box-sizing: border-box !important;
        width: 94% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 15px !important;
        max-width: 100vw !important;
    }

    .header-logo img,
    .nav-brand img,
    [class*=logo] img {
        min-width: auto !important;
        max-width: 140px !important;
    }

    .header-logo-container {
        margin-top: 5px !important;
    }
}

@media (min-width: 992px) {
    div.row.section-single-product {
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        max-width: 1200px !important;
    }
}

body,
html {
    overflow-x: hidden !important;
}

header,
.js-head-main,
.site-header,
.header-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1050 !important;
    background-color: rgba(0, 0, 0, .4) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .15) !important;
    transition: all .3s ease !important;
}

@media (min-width: 992px) {
    body:not(.template-home) {
        padding-top: 160px !important;
    }

    body.template-home {
        padding-top: 0 !important;
    }
}

@media (max-width: 991px) {
    body:not(.template-home) {
        padding-top: 120px !important;
    }

    body.template-home {
        padding-top: 0 !important;
    }

    .header-logo-container {
        margin-top: 5px !important;
    }
}

.nav-list-link,
.utilities-icon,
.search-input::placeholder,
.search-input {
    color: #fff !important;
    fill: #fff !important;
}

@media (max-width: 768px) {
    a[data-toggle="#nav-filters"] {
        display: none !important;
    }
}

@media (min-width: 992px) {
    div.row.section-single-product {
        margin-top: 10px !important;
    }
}

.js-addtocart {
    white-space: nowrap !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}




/* 1. Replicar el fondo de categorías en Contacto */
body.template-contact::before {
    content: " " !important;
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    /* Misma imagen que categorías */
    background-image: url("https://dcdn-us.mitiendanube.com/stores/007/093/811/themes/rio/2-slide-1767121042328-3932132190-75ee0b67d8e0d7cce6b3424a64802b3b1767121298-480-0.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    /* Tinte sólido de categorías */
    background-color: #8e7468 !important; 
    background-blend-mode: multiply !important;
    /* Efectos de Blur y Saturación */
    filter: blur(50px) saturate(180%) !important;
    transform: scale(1.1) !important;
}

/* 2. Ajuste de altura según el Header (Desktop) */
@media (min-width: 992px) {
    body.template-contact::before {
        top: 140px !important;
        height: calc(100% - 140px) !important;
    }
}

/* 3. Ajuste de altura según el Header (Mobile) */
@media (max-width: 991px) {
    body.template-contact::before {
        top: 120px !important;
        height: calc(100% - 120px) !important;
    }
}

/* 4. Limpiar fondos por defecto para que se vea el nuevo fondo */
body.template-contact #main-container,
body.template-contact .container,
body.template-contact .js-main-content,
body.template-contact section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



/* 1. Aplicar el fondo a Quiénes Somos, Login y Registro */
body.template-page::before,
body.template-account-login::before,
body.template-account-register::before {
    content: " " !important;
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    /* Imagen y Color de fondo (estilo categorías) */
    background-image: url("https://dcdn-us.mitiendanube.com/stores/007/093/811/themes/rio/2-slide-1767121042328-3932132190-75ee0b67d8e0d7cce6b3424a64802b3b1767121298-480-0.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #8e7468 !important; 
    background-blend-mode: multiply !important;
    /* Efectos visuales */
    filter: blur(50px) saturate(180%) !important;
    transform: scale(1.1) !important;
}

/* 2. Ajuste de altura para PC (Header 140px) */
@media (min-width: 992px) {
    body.template-page::before,
    body.template-account-login::before,
    body.template-account-register::before {
        top: 140px !important;
        height: calc(100% - 140px) !important;
    }
}

/* 3. Ajuste de altura para Mobile (Header 120px) */
@media (max-width: 991px) {
    body.template-page::before,
    body.template-account-login::before,
    body.template-account-register::before {
        top: 120px !important;
        height: calc(100% - 120px) !important;
    }
}

/* 4. Quitar fondos sólidos para revelar el diseño en estas páginas */
body.template-page #main-container,
body.template-account-login #main-container,
body.template-account-register #main-container,
body.template-page .container,
body.template-account-login .container,
body.template-account-register .container,
body.template-page section,
body.template-account-login section,
body.template-account-register section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



/* 1. Fondo para Buscador, 404 y Recuperación de Contraseña */
body.template-search::before,
body.template-404::before,
body.template-account-reset::before {
    content: " " !important;
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    /* Imagen y tinte exacto */
    background-image: url("https://dcdn-us.mitiendanube.com/stores/007/093/811/themes/rio/2-slide-1767121042328-3932132190-75ee0b67d8e0d7cce6b3424a64802b3b1767121298-480-0.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #8e7468 !important; 
    background-blend-mode: multiply !important;
    /* Efecto Blur y Saturación */
    filter: blur(50px) saturate(180%) !important;
    transform: scale(1.1) !important;
}

/* 2. Ajuste de altura responsivo (Debajo del Header) */
@media (min-width: 992px) {
    body.template-search::before,
    body.template-404::before,
    body.template-account-reset::before {
        top: 140px !important;
        height: calc(100% - 140px) !important;
    }
}

@media (max-width: 991px) {
    body.template-search::before,
    body.template-404::before,
    body.template-account-reset::before {
        top: 120px !important;
        height: calc(100% - 120px) !important;
    }
}

/* 3. Transparencia de contenedores para mostrar el fondo */
body.template-search #main-container,
body.template-404 #main-container,
body.template-account-reset #main-container,
body.template-search .container,
body.template-404 .container,
body.template-account-reset .container,
body.template-search section,
body.template-404 section,
body.template-account-reset section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}






/* =========================================
   ESTILO FINAL KHEMIA: BASE BLANCA + INPUTS DARK
   ========================================= */

/* --- 1. CONTENEDOR PRINCIPAL (Tu Base Intacta) --- */
.template-account-login .page-header, 
.template-account-login .account-page {
    max-width: 600px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    /* Tu estilo original: Blanco translúcido */
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO (Ajuste de soldadura) --- */
.template-account-login .page-header {
    margin-top: 25px !important;
    padding: 50px 40px 0px 40px !important; /* Quitamos padding inferior para pegar */
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    z-index: 2; /* Para que pise al cuerpo */
}

.template-account-login .page-header h1 {
    color: #000000 !important;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
}

.template-account-login .breadcrumbs { display: none !important; }

/* --- 3. CUERPO DEL FORMULARIO --- */
.template-account-login .account-page {
    margin-top: -1px !important; /* TRUCO: Subimos 1px para soldar la grieta */
    padding: 20px 40px 60px 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

.template-account-login .account-page .col-md-6 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* --- 4. INPUTS (EL CAMBIO CLAVE: NEGRO TRANSLÚCIDO) --- */
/* Esto hace que el icono blanco original RESALTE y se vea */
.template-account-login .account-page .form-control {
    width: 100% !important;
    height: 55px;
    
    /* FONDO NEGRO TRANSLÚCIDO (DARK GLASS) */
    background: rgba(0, 0, 0, 0.1) !important; 
    
    /* BORDE SUTIL */
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 12px;
    
    /* TEXTO BLANCO (Para que se lea sobre lo oscuro) */
    color: #000000 !important; 
    font-weight: 500;
    padding-left: 20px;
    padding-right: 50px !important; /* Espacio para que el ojo no tape el texto */
}

/* Texto de ayuda (Placeholder) en GRIS CLARO */
.template-account-login .account-page .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Mantenemos el fondo oscuro cuando Chrome autocompleta */
.template-account-login .account-page .form-control:-webkit-autofill,
.template-account-login .account-page .form-control:-webkit-autofill:hover, 
.template-account-login .account-page .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important; /* Texto blanco */
    transition: background-color 5000s ease-in-out 0s;
}

/* Etiquetas (Email / Contraseña) siguen siendo NEGRAS */
.template-account-login .form-label {
    color: #000000 !important;
    font-weight: 600;
}


/* --- 6. BOTÓN Y ENLACES (Tu base) --- */
.template-account-login .btn-primary {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 280px !important;
    margin: 30px auto 0 auto !important;
    display: block !important;
    height: 55px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
}

.template-account-login .account-page p,
.template-account-login .account-page .text-center,
.template-account-login .btn-link-primary {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-top: 20px !important;
    color: #000000 !important;
}

/* --- 7. RESPONSIVE (SOLUCIÓN IPAD/MÓVIL) --- */
/* Esto evita que se rompa en pantallas pequeñas */
@media (max-width: 900px) {
    .template-account-login .page-header, 
    .template-account-login .account-page {
        max-width: 90% !important; /* Se adapta al 90% de la pantalla */
        width: 90% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .template-account-login .btn-primary {
        width: 100% !important;
        max-width: 100% !important;
    }
}




/* =========================================
   PARCHE FINAL: COLOR NEGRO + ELIMINAR DOBLE OJO
   (Pegar debajo del código base)
   ========================================= */

/* 1. ELIMINAR EL OJO DOBLE DE MICROSOFT (El intruso) */
.template-account-login input[type="password"]::-ms-reveal,
.template-account-login input[type="password"]::-ms-clear {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* 2. PINTAR EL ICONO NATIVO DE NEGRO (Sin moverlo) */
/* Atacamos directamente al SVG para rellenarlo de negro */
.template-account-login .js-password-view svg,
.template-account-login .js-password-view svg path,
.template-account-login .js-password-view i,
.template-account-login .btn-toggle-password svg {
    fill: #000000 !important;     /* Relleno NEGRO */
    stroke: #000000 !important;   /* Líneas NEGRAS */
    color: #000000 !important;    /* Color de fuente NEGRO */
    opacity: 1 !important;        /* Forzamos visibilidad total */
}

/* 3. ASEGURAR QUE EL ICONO NATIVO ESTÉ POR ENCIMA DEL FONDO */
.template-account-login .js-password-view,
.template-account-login .password-toggle {
    z-index: 999 !important;      /* Traer al frente */
    background: transparent !important; /* Quitar cualquier fondo gris raro */
}



/* =========================================
   PARCHE FINAL V2: ICONO MÁS GRANDE Y MÁS ARRIBA
   (Pegar debajo del parche de color negro anterior)
   ========================================= */

/* 1. AJUSTAR POSICIÓN VERTICAL (SUBIRLO) */
/* Atacamos el botón contenedor del icono */
.template-account-login .js-password-view,
.template-account-login .password-toggle,
.template-account-login .btn-toggle-password,
.template-account-login .form-control-icon {
    /* Mantenemos la referencia al 50% superior */
    top: 50% !important;
    /* EL TRUCO: En lugar de -50% (centro exacto), usamos -70% para "tirarlo" hacia arriba */
    /* Si lo quieres MÁS arriba, pon -80%. Si menos, pon -60%. */
    transform: translateY(-20%) !important;
    /* Aseguramos que el contenedor sea suficientemente grande para el nuevo icono */
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 2. AUMENTAR TAMAÑO DEL DIBUJO (MÁS GRANDE) */
/* Atacamos el SVG o la fuente interna */
.template-account-login .js-password-view svg,
.template-account-login .js-password-view i,
.template-account-login .password-toggle svg,
.template-account-login .form-control-icon svg {
    /* Tamaño aumentado a 2px (El estándar suele ser 20px) */
    width: 20px !important;
    height: 20px !important;
    /* Recordatorio de color negro por si acaso */
    fill: #000000 !important;
    color: #000000 !important;
}





/* =========================================
   PARCHE FINAL: TEXTO Y LINK EN LA MISMA LÍNEA
   (Este une la pregunta con el enlace)
   ========================================= */

/* 1. EL PÁRRAFO CONTENEDOR (La frase completa) */
.template-account-login .account-page p.text-center,
.template-account-login .account-page p.mt-3 {
    font-size: 14px !important;       /* Restauramos el tamaño para que se lea la pregunta */
    line-height: normal !important;   /* Altura normal */
    color: #000000 !important;        /* Color negro */
    display: block !important;        /* Bloque para poder centrarlo */
    text-align: center !important;    /* Centrado horizontal */
    margin-top: 20px !important;      /* Separación respecto al botón negro */
}

/* 2. EL ENLACE "CREAR CUENTA" */
.template-account-login .account-page p.text-center a,
.template-account-login .account-page p.mt-3 a {
    display: inline !important;       /* CLAVE: "Inline" hace que se pegue al texto anterior */
    font-weight: 900 !important;      /* Negrita fuerte para destacar */
    font-size: 14px !important;       /* Mismo tamaño que la pregunta */
    color: #000000 !important;        /* Negro */
    text-transform: uppercase;        /* Mayúsculas */
    text-decoration: none !important; /* Sin subrayado (opcional) */
    margin-left: 6px !important;      /* Un pequeño espacio para separarlo de la pregunta */
    padding: 0 !important;            /* Quitamos relleno extra */
}




/* =======================================================
   ESTILO CREAR CUENTA (RÉPLICA EXACTA DEL LOGIN KHEMIA)
   ======================================================= */

/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO --- */
.template-account-register .page-header, 
.template-account-register .account-page {
    max-width: 600px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    /* BASE BLANCA TRANSLÚCIDA */
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO "CREAR CUENTA" (Soldadura Superior) --- */
.template-account-register .page-header {
    margin-top: 25px !important;
    padding: 50px 40px 0px 40px !important; /* Sin padding inferior para pegar */
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    z-index: 2; 
}

.template-account-register .page-header h1 {
    color: #000000 !important;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
}

.template-account-register .breadcrumbs { display: none !important; }

/* --- 3. CUERPO DEL FORMULARIO (Soldadura Inferior) --- */
.template-account-register .account-page {
    margin-top: -1px !important; /* LA SOLDADURA: Sube 1px para tapar la grieta */
    padding: 20px 40px 60px 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

/* Forzar que los campos ocupen todo el ancho (en registro a veces se dividen) */
.template-account-register .account-page .col-md-6 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* --- 4. INPUTS: DARK GLASS (Igual al Login) --- */
.template-account-register .account-page .form-control {
    width: 100% !important;
    height: 55px;
    /* FONDO NEGRO TRANSLÚCIDO */
    background: rgba(0, 0, 0, 0.1) !important; 
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 12px;
    /* TEXTO NEGRO */
    color: #000000 !important; 
    font-weight: 500;
    padding-left: 20px;
    padding-right: 50px !important;
}

/* Placeholder Gris Claro */
.template-account-register .account-page .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Autofill de Chrome */
.template-account-register .account-page .form-control:-webkit-autofill,
.template-account-register .account-page .form-control:-webkit-autofill:hover, 
.template-account-register .account-page .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important; 
    transition: background-color 5000s ease-in-out 0s;
}

/* Etiquetas Negras */
.template-account-register .form-label,
.template-account-register label {
    color: #000000 !important;
    font-weight: 600;
}

/* --- 5. BOTÓN NEGRO Y ENLACES --- */
.template-account-register .btn-primary,
.template-account-register input[type="submit"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 280px !important;
    margin: 30px auto 0 auto !important;
    display: block !important;
    height: 55px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
    cursor: pointer;
}

/* Texto inferior "¿Ya tenés cuenta?" */
.template-account-register .account-page p,
.template-account-register .account-page .text-center {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-top: 20px !important;
    color: #000000 !important;
}

/* --- 6. ARREGLO DE ICONOS (OJO CONTRASEÑA) --- */
/* Eliminamos doble ojo de Microsoft */
.template-account-register input[type="password"]::-ms-reveal,
.template-account-register input[type="password"]::-ms-clear {
    display: none !important;
}

/* Posición y Tamaño del Icono (El ajuste "hacia arriba") */
.template-account-register .js-password-view,
.template-account-register .password-toggle,
.template-account-register .btn-toggle-password {
    top: 50% !important;
    transform: translateY(-20%) !important; /* Tirarlo hacia arriba */
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 999 !important;
    background: transparent !important;
}

/* Pintar el icono de negro */
.template-account-register .js-password-view svg,
.template-account-register .js-password-view i,
.template-account-register .password-toggle svg {
    fill: #000000 !important;
    color: #000000 !important;
    width: 20px !important;
    height: 20px !important;
}

/* --- 7. TEXTO Y LINK EN LA MISMA LÍNEA (FOOTER) --- */
.template-account-register .account-page p.text-center,
.template-account-register .account-page p.mt-3 {
    font-size: 14px !important;
    color: #000000 !important;
    display: block !important;
    text-align: center !important;
}

.template-account-register .account-page p a {
    display: inline !important; /* Pegado al texto */
    font-weight: 900 !important;
    font-size: 14px !important;
    color: #000000 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    margin-left: 6px !important;
}

/* --- 8. AJUSTE RECAPTCHA (Exclusivo de registro) --- */
/* Para que el "No soy un robot" no rompa el diseño */
.template-account-register .g-recaptcha,
.template-account-register iframe[title="reCAPTCHA"] {
    display: block !important;
    margin: 20px auto !important; /* Centrado */
}

/* --- 9. RESPONSIVE --- */
@media (max-width: 900px) {
    .template-account-register .page-header, 
    .template-account-register .account-page {
        max-width: 90% !important;
        width: 90% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .template-account-register .btn-primary {
        width: 100% !important;
    }
}




/* =========================================
   CORRECCIÓN: TEXTOS DE EJEMPLO (PLACEHOLDER) EN NEGRO
   ========================================= */

.template-account-register .account-page .form-control::placeholder {
    /* Cambiamos de blanco a NEGRO */
    color: #000000 !important; 
    
    /* Ajustamos la opacidad para que se note que es un ejemplo y no texto escrito */
    opacity: 0.6 !important; 
    font-weight: 500 !important;
}

/* Soporte para navegadores específicos (por seguridad) */
.template-account-register .account-page .form-control::-webkit-input-placeholder {
    color: #000000 !important;
    opacity: 0.6 !important;
}

.template-account-register .account-page .form-control::-moz-placeholder {
    color: #000000 !important;
    opacity: 0.6 !important;
}



/* =========================================
   AJUSTE FINAL: CONTENEDOR MÁS ANCHO
   ========================================= */

.template-account-register .page-header, 
.template-account-register .account-page {
    /* Aumentamos de 600px a 850px para darle más aire */
    max-width: 850px !important; 
}


/* =========================================
   AJUSTE DE ESPACIO: SEPARAR RECAPTCHA
   ========================================= */

.template-account-register .g-recaptcha,
.template-account-register iframe[title="reCAPTCHA"] {
    /* Aumentamos a 50px (o el valor que prefieras) para despegarlo bien */
    margin-top: 30px !important; 
    
    /* Mantenemos el margen inferior para separar del botón */
    margin-bottom: 30px !important; 
    
    /* Aseguramos que siga centrado */
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}



/* =======================================================
   ESTILO CONTACTO (CORREGIDO: NO TOCA EL BUSCADOR)
   ======================================================= */

/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO --- */
.template-contact .page-header, 
.template-contact .contact-page {
    max-width: 850px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO "CONTACTO" --- */
.template-contact .page-header {
    margin-top: 25px !important;
    padding: 50px 40px 0px 40px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    z-index: 2; 
}

.template-contact .page-header h1 {
    color: #000000 !important;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
}

.template-contact .breadcrumbs { display: none !important; }

/* --- 3. CUERPO DEL FORMULARIO --- */
.template-contact .contact-page {
    margin-top: -1px !important;
    padding: 20px 40px 60px 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

/* Ocultar columna lateral y expandir formulario */
.template-contact .row .col-md-3 { display: none !important; }
.template-contact .row .col-md-6 { 
    flex: 0 0 100% !important; 
    max-width: 100% !important; 
}

/* --- 4. INPUTS ESPECÍFICOS DEL FORMULARIO (CLAVE DEL ARREGLO) --- */
/* Aquí usamos #contact-form para que NO toque el buscador */
#contact-form .form-control {
    width: 100% !important;
    height: 55px;
    background: rgba(0, 0, 0, 0.1) !important; /* Fondo oscuro */
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 12px;
    color: #000000 !important;
    font-weight: 500;
    padding-left: 20px;
}

#contact-form textarea.form-control {
    height: 150px !important;
    padding-top: 15px;
}

/* Placeholder Negro solo para el formulario */
#contact-form .form-control::placeholder {
    color: #000000 !important;
    opacity: 0.6 !important;
}

/* Etiquetas Negras */
#contact-form .form-label,
#contact-form label {
    color: #000000 !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 8px;
    display: block;
}

/* --- 5. BOTÓN ENVIAR --- */
#contact-form .btn-primary {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    height: 55px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
    margin-top: 10px;
}

/* --- 6. SEPARACIÓN DEL RECAPTCHA --- */
.template-contact .g-recaptcha,
.template-contact iframe[title="reCAPTCHA"] {
    margin-top: 40px !important; /* Separación superior */
    margin-bottom: 25px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- 7. RESPONSIVE --- */
@media (max-width: 900px) {
    .template-contact .page-header, 
    .template-contact .contact-page {
        max-width: 90% !important;
        width: 90% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}



/* =========================================
   AJUSTE FINAL: ACHICAR ETIQUETAS DEL FORMULARIO
   ========================================= */

#contact-form .form-label,
#contact-form label {
    /* Cambiamos el tamaño a 11px (antes era 12px) */
    font-size: 11px !important;

    /* Mantenemos el resto de los estilos para que sigan elegantes */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}




/* =========================================
   FONDO PARA MI CUENTA Y MIS DATOS
   ========================================= */

/* 1. Aplicar el fondo a las páginas de órdenes e información personal */
body.template-account-orders::before,
body.template-account-info::before {
    content: " " !important;
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    /* Misma imagen y color base que en Contacto/Login */
    background-image: url("https://dcdn-us.mitiendanube.com/stores/007/093/811/themes/rio/2-slide-1767121042328-3932132190-75ee0b67d8e0d7cce6b3424a64802b3b1767121298-480-0.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #8e7468 !important; 
    background-blend-mode: multiply !important;
    /* Efectos visuales de desenfoque y saturación */
    filter: blur(50px) saturate(180%) !important;
    transform: scale(1.1) !important;
}

/* 2. Ajuste de altura responsivo (Debajo del Header) */
@media (min-width: 992px) {
    body.template-account-orders::before,
    body.template-account-info::before {
        top: 140px !important;
        height: calc(100% - 140px) !important;
    }
}

@media (max-width: 991px) {
    body.template-account-orders::before,
    body.template-account-info::before {
        top: 120px !important;
        height: calc(100% - 120px) !important;
    }
}

/* 3. Limpiar fondos sólidos y bordes para revelar el diseño */
body.template-account-orders #main-container,
body.template-account-info #main-container,
body.template-account-orders .container,
body.template-account-info .container,
body.template-account-orders section,
body.template-account-info section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. Estilo de los textos para asegurar legibilidad sobre el fondo */
body.template-account-orders h1, 
body.template-account-info h1,
body.template-account-orders h2,
body.template-account-orders h3,
body.template-account-orders .btn-link,
body.template-account-info .form-label {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}








/* =======================================================
   ESTILO MIS DATOS (RÉPLICA DE LA CAJA DE CONTACTO)
   - Actualizado: Sin sombras en textos negros
   ======================================================= */

/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO --- */
.template-account-info .page-header, 
.template-account-info .account-page {
    max-width: 850px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    /* BASE BLANCA TRANSLÚCIDA CON DESENFOQUE */
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO "MIS DATOS" (Unión Superior) --- */
.template-account-info .page-header {
    margin-top: 25px !important;
    padding: 50px 40px 0px 40px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    z-index: 2; 
}

.template-account-info .page-header h1 {
    color: #000000 !important;
    text-shadow: none !important; /* <--- CORRECCIÓN: QUITA SOMBRA */
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
}

/* --- 3. CUERPO DEL FORMULARIO (Unión Inferior) --- */
.template-account-info .account-page {
    margin-top: -1px !important; /* Soldadura visual */
    padding: 20px 40px 60px 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

/* Centrado del formulario interno */
.template-account-info .row .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* --- 4. INPUTS: DARK GLASS (Estilo Contacto) --- */
#info-form .form-control {
    width: 100% !important;
    height: 55px;
    background: rgba(0, 0, 0, 0.1) !important; /* Fondo oscuro sutil */
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 12px;
    color: #000000 !important;
    font-weight: 500;
    padding-left: 20px;
}

/* Etiquetas (Labels) pequeñas y elegantes */
#info-form .form-label,
#info-form label {
    color: #000000 !important;
    text-shadow: none !important; /* <--- CORRECCIÓN: QUITA SOMBRA */
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px;
    display: block;
}

/* --- 5. BOTÓN GUARDAR CAMBIOS --- */
#info-form .btn-primary {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    height: 55px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
    margin-top: 20px;
    cursor: pointer;
}

/* --- 6. LINK INFERIOR (Cambiar contraseña) --- */
.template-account-info .account-page a {
    color: #000000 !important;
    text-shadow: none !important; /* <--- CORRECCIÓN: QUITA SOMBRA */
    text-align: center !important;
    display: block !important;
    margin-top: 20px !important;
    font-weight: 600;
}

/* --- 7. RESPONSIVE --- */
@media (max-width: 900px) {
    .template-account-info .page-header, 
    .template-account-info .account-page {
        max-width: 95% !important;
        width: 95% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}










/* =======================================================
   ESTILO MI CUENTA (RÉPLICA EXACTA DE MIS DATOS)
   ======================================================= */

/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO --- */
.template-account-orders .page-header, 
.template-account-orders .account-page {
    max-width: 850px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    /* BASE BLANCA TRANSLÚCIDA CON DESENFOQUE */
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO "MI CUENTA" (Unión Superior) --- */
.template-account-orders .page-header {
    margin-top: 25px !important;
    padding: 50px 40px 0px 40px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    z-index: 2; 
}

.template-account-orders .page-header h1 {
    color: #000000 !important;
    text-shadow: none !important; /* Sin sombra */
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
}

/* --- 3. CUERPO DE LA PÁGINA (Unión Inferior) --- */
.template-account-orders .account-page {
    margin-top: -1px !important; /* Soldadura visual */
    padding: 20px 40px 60px 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

/* --- 4. CORRECCIÓN DE TEXTOS A NEGRO (MUY IMPORTANTE) --- */
/* Forzamos que todo el texto dentro de la caja sea negro y sin sombra */
.template-account-orders .account-page,
.template-account-orders .account-page h4,
.template-account-orders .account-page p,
.template-account-orders .account-page div,
.template-account-orders .account-page span,
.template-account-orders .account-page a {
    color: #000000 !important;
    text-shadow: none !important;
}

/* Estilo para los títulos de secciones internas (Datos Personales / Órdenes) */
.template-account-orders h4 {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    padding-bottom: 10px !important;
}

/* --- 5. BOTONES Y ENLACES --- */

/* Botón "Cerrar Sesión" -> Estilo Botón Negro */
.template-account-orders .account-page a[href*="logout"],
.template-account-orders .btn-primary {
    display: inline-block !important;
    background-color: #000000 !important;
    color: #ffffff !important; /* Texto blanco dentro del botón */
    border-radius: 12px !important;
    padding: 10px 25px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: none !important;
    margin-top: 10px !important;
    font-size: 12px !important;
}

/* El enlace "Editar" pequeño */
.template-account-orders .account-page a[href*="info"] {
    text-decoration: underline !important;
    font-size: 12px !important;
    opacity: 0.7 !important;
}

/* --- 6. RESPONSIVE --- */
@media (max-width: 900px) {
    .template-account-orders .page-header, 
    .template-account-orders .account-page {
        max-width: 95% !important;
        width: 95% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/* =========================================
   AJUSTES FINALES: MI CUENTA (ICONOS Y BOTONES)
   ========================================= */

/* 1. ICONO DE BOLSA DE COMPRAS (Sólido y Negro) */
.template-account-orders .account-page svg.svg-icon-primary,
.template-account-orders .account-page .icon-inline svg {
    fill: #000000 !important;
    color: #000000 !important;
    opacity: 1 !important; /* Quita cualquier transparencia */
}

/* 2. LÍNEA DIVISORIA (Negra) */
.template-account-orders .divider {
    background-color: #000000 !important;
    border-color: #000000 !important;
    opacity: 1 !important; /* Para que se vea bien negra */
}

/* 3. BOTÓN "IR A LA TIENDA" (Texto Blanco) */
/* Sobreescribimos la regla general que ponía todos los links en negro */
.template-account-orders .account-page a.btn-primary {
    color: #ffffff !important; 
    background-color: #000000 !important; /* Fondo negro */
    border: 1px solid #000000 !important;
}

/* Efecto Hover para el botón (Opcional: para que se note que es clickeable) */
.template-account-orders .account-page a.btn-primary:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}






/* =======================================================
   ESTILO CAMBIAR CONTRASEÑA (VERSIÓN COMPACTA Y CENTRADA)
   ======================================================= */

/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO (MÁS CHICO) --- */
.template-account-reset .page-header, 
.template-account-reset .account-page {
    /* CAMBIO CLAVE: De 850px a 550px para que sea una cajita compacta */
    max-width: 550px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO (CABECERA) --- */
.template-account-reset .page-header {
    margin-top: 60px !important; /* Más abajo para centrar en pantalla */
    padding-top: 35px !important; /* Menos aire arriba */
    padding-bottom: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    z-index: 2; 
}

.template-account-reset .page-header h1 {
    color: #000000 !important;
    text-shadow: none !important;
    font-size: 24px !important; /* Fuente un poco más chica acorde a la caja */
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
    margin: 0 !important;
}

/* --- 3. CUERPO DEL FORMULARIO --- */
.template-account-reset .account-page {
    margin-top: -1px !important;
    /* Rellenos reducidos para compactar la caja */
    padding: 15px 30px 35px 30px !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

/* --- 4. CENTRADO TOTAL DE ELEMENTOS --- */
/* Forzamos que la grilla de Tienda Nube centre la columna */
.template-account-reset .account-page .row {
    display: flex !important;
    justify-content: center !important;
}

.template-account-reset .account-page div[class*="col"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* --- 5. TEXTOS Y ETIQUETAS CENTRADAS --- */
.template-account-reset .account-page p {
    color: #000000 !important;
    text-shadow: none !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    font-size: 13px !important;
}

.template-account-reset .account-page .form-label,
.template-account-reset .account-page label {
    color: #000000 !important;
    text-shadow: none !important;
    text-align: center !important; /* Centrado */
    width: 100% !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px;
}

/* --- 6. INPUTS (SOLO DENTRO DE LA CAJA) --- */
.template-account-reset .account-page .form-control {
    width: 100% !important;
    height: 45px !important; /* Input más fino */
    background: rgba(0, 0, 0, 0.1) !important; 
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 12px;
    color: #000000 !important;
    font-weight: 500;
    padding-left: 0 !important; /* Sin padding izq porque centramos el texto */
    text-align: center !important; /* Texto centrado al escribir */
}

/* Placeholder Negro Centrado */
.template-account-reset .account-page .form-control::placeholder {
    color: #000000 !important;
    opacity: 0.6 !important;
    text-align: center !important;
}

/* --- 7. BOTÓN Y RECAPTCHA CENTRADOS --- */
.template-account-reset .account-page .btn-primary,
.template-account-reset .account-page input[type="submit"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important; /* Ocupa el ancho de la caja compacta */
    display: block !important;
    margin: 15px auto 0 auto !important;
    height: 45px !important;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
    cursor: pointer;
}

.template-account-reset .g-recaptcha,
.template-account-reset iframe[title="reCAPTCHA"] {
    display: block !important;
    margin: 20px auto !important;
}

/* --- 8. RESPONSIVE --- */
@media (max-width: 900px) {
    .template-account-reset .page-header, 
    .template-account-reset .account-page {
        max-width: 90% !important; /* En celular ocupa el 90% */
        width: 90% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}




/* =======================================================
   ESTILO DIRECCIONES (FINAL: TEXTOS DE AYUDA NEGROS)
   ======================================================= */

/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO --- */
body.template-account-address .page-header, 
body.template-account-address .account-page,
body.template-account-addresses .page-header, 
body.template-account-addresses .account-page {
    max-width: 800px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO "DIRECCIÓN" --- */
.template-account-address .page-header,
.template-account-addresses .page-header {
    margin-top: 25px !important; 
    padding: 50px 40px 0px 40px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    z-index: 2; 
}

.template-account-address .page-header h1,
.template-account-addresses .page-header h1 {
    color: #000000 !important;
    text-shadow: none !important; 
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
}

/* --- 3. CUERPO DEL FORMULARIO --- */
.template-account-address .account-page,
.template-account-addresses .account-page {
    margin-top: -1px !important; 
    padding: 20px 40px 50px 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

/* --- 3.5. CORRECCIÓN: ANCHO COMPLETO Y RESET DE MÁRGENES --- */
.template-account-address .account-page .row,
.template-account-address .account-page div[class*="col"],
.template-account-address .account-page form {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    
    /* Esto elimina el espaciado interno */
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    /* ESTO ES LO QUE ARREGLA LA ASIMETRÍA */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --- 4. ETIQUETAS Y TEXTOS --- */
.template-account-address .account-page label,
.template-account-address .account-page .form-label {
    color: #000000 !important;
    text-shadow: none !important;
    text-align: left !important;
    width: 100% !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px;
}

/* --- 5. INPUTS: DARK GLASS --- */
.template-account-address .account-page .form-control,
.template-account-address .account-page select {
    width: 100% !important;
    height: 50px;
    background: rgba(0, 0, 0, 0.1) !important; 
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 12px;
    color: #000000 !important; /* Color de lo que escribe el usuario */
    font-weight: 500;
    text-align: left !important;
    padding-left: 15px !important;
}

/* --- 5.5. TEXTOS DE AYUDA (PLACEHOLDERS) EN NEGRO --- */
/* Aquí está el cambio: forzamos el color negro y ajustamos la opacidad */
.template-account-address .account-page .form-control::placeholder,
.template-account-address .account-page input::placeholder {
    color: #000000 !important;
    opacity: 0.7 !important; /* Un poco transparente para diferenciarlo, pero bien negro */
    font-weight: 500 !important;
}

/* Para navegadores específicos (asegura compatibilidad) */
.template-account-address .account-page .form-control::-webkit-input-placeholder {
    color: #000000 !important;
    opacity: 0.7 !important;
}
.template-account-address .account-page .form-control::-moz-placeholder {
    color: #000000 !important;
    opacity: 0.7 !important;
}

/* --- 6. BOTÓN "GUARDAR" --- */
.template-account-address .account-page .btn-primary,
.template-account-address .account-page input[type="submit"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    height: 50px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
    margin: 20px auto 0 auto !important;
    cursor: pointer;
    display: block !important;
}

/* --- 7. RESPONSIVE --- */
@media (max-width: 900px) {
    .template-account-address .page-header, 
    .template-account-address .account-page {
        max-width: 90% !important;
        width: 90% !important;
    }
}


/* =======================================================
   SOLUCIÓN DEFINITIVA: LISTA DE DIRECCIONES
   (Texto Negro + Orden Vertical)
   ======================================================= */

/* 1. CANDADO DE SEGURIDAD: Solo afecta a la lista de direcciones */
body.template-account-addresses .account-page,
body.template-account-addresses .account-page h1,
body.template-account-addresses .account-page h2,
body.template-account-addresses .account-page h3,
body.template-account-addresses .account-page h4,
body.template-account-addresses .account-page h5, /* Título 'Principal' */
body.template-account-addresses .account-page h6, /* Nombre del cliente */
body.template-account-addresses .account-page p,  /* Dirección */
body.template-account-addresses .account-page span,
body.template-account-addresses .account-page div,
body.template-account-addresses .account-page strong {
    color: #000000 !important;
    text-shadow: none !important;
    text-align: left !important;
}

/* 2. ENLACES (Editar / Borrar) */
body.template-account-addresses .account-page a {
    color: #000000 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* 3. SOLUCIÓN DE DISEÑO (Para que no se amontonen) */
/* Obligamos a que cada bloque de dirección ocupe todo el ancho */
body.template-account-addresses .account-page .col-md-4,
body.template-account-addresses .account-page .col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 30px !important; /* Espacio entre Principal y Otras */
}

/* 4. TARJETAS DE DIRECCIÓN (Opcional: un borde suave para separar) */
body.template-account-addresses .address-item, 
body.template-account-addresses .account-page .col-md-4 > div {
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    padding-bottom: 20px !important;
}


/* =======================================================
   TOQUE FINAL: LÍNEAS DIVISORIAS NEGRAS
   (Solo en Mis Direcciones)
   ======================================================= */

body.template-account-addresses .divider,
body.template-account-addresses hr {
    background-color: #000000 !important; /* Color Negro Puro */
    border-color: #000000 !important;
    opacity: 1 !important; /* Quitamos transparencia para que se vean sólidas */
    height: 1px !important; /* Aseguramos que tengan grosor visible */
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    display: block !important;
    width: 100% !important;
}




/* =======================================================
   ELIMINAR LÍNEAS GRISES (MIS DIRECCIONES)
   ======================================================= */

/* 1. Quitar bordes a los bloques de dirección */
body.template-account-addresses .address-item,
body.template-account-addresses .account-page .col-md-4 > div,
body.template-account-addresses .account-page .col-12 > div {
    border: none !important;
    border-bottom: none !important; /* Asegura que la línea de abajo desaparezca */
    box-shadow: none !important;
}




/* =========================================
   CORRECCIÓN: ALERTA DE VALIDACIÓN (TEXTO E ICONO NEGRO)
   Solo afecta al cuadro de "Estás a un paso..." en Registro
   ========================================= */

/* 1. El Marco (Borde) y el color base */
body.template-account-register .js-account-validation-pending {
    border: 1px solid #000000 !important; /* Marco Negro */
    color: #000000 !important;            /* Texto general negro */
    background: rgba(0,0,0,0.05) !important; /* Un gris muy sutil de fondo para separarlo */
}

/* 2. El Título (h5) y el Texto (p) específicos de esa caja */
body.template-account-register .js-account-validation-pending h5,
body.template-account-register .js-account-validation-pending p {
    color: #000000 !important;
    text-shadow: none !important;
}

/* 3. El Icono del sobre (SVG) */
body.template-account-register .js-account-validation-pending svg,
body.template-account-register .js-account-validation-pending svg path,
body.template-account-register .js-account-validation-pending .icon-inline {
    fill: #000000 !important;
    stroke: #000000 !important;
    color: #000000 !important;
}




/* =========================================
   CORRECCIÓN: ENLACE "ENVIAR LINK DE NUEVO"
   Lo pone en Negro Puro y Negrita para resaltar
   ========================================= */
body.template-account-register .js-resend-validation-link {
    color: #000000 !important;       /* Color Negro Puro */
    font-weight: 900 !important;     /* Negrita Fuerte (Bold) */
    text-decoration: underline !important; /* Subrayado para reforzar que es un link */
    cursor: pointer !important;      /* Asegura que aparezca la manito */
}

/* Opcional: Efecto al pasar el mouse (Hover) */
body.template-account-register .js-resend-validation-link:hover {
    color: #333333 !important;       /* Un gris muy oscuro al pasar el mouse */
    opacity: 0.8 !important;
}



/* =========================================
   CORRECCIÓN: ALERTA DE ÉXITO (LOGIN)
   "Tu cuenta fue creada con éxito" en Negro
   ========================================= */

/* 1. Contenedor General (Borde y Fondo) */
body.template-account-login .js-account-validation-success,
body.template-account-login .alert-success {
    color: #000000 !important;              /* Texto base negro */
    border: 1px solid #000000 !important;   /* Marco Negro */
    background: rgba(0,0,0,0.05) !important; /* Fondo gris muy sutil */
}

/* 2. El Texto específico del mensaje */
body.template-account-login .js-account-validation-success p,
body.template-account-login .alert-success p {
    color: #000000 !important;
    text-shadow: none !important;
    font-weight: 600 !important; /* Un poco más de peso para que se lea bien */
}

/* 3. El Ícono del Check (que suele ser un elemento ::before) */
body.template-account-login .js-account-validation-success::before,
body.template-account-login .alert-success::before {
    color: #000000 !important; /* Esto pinta el check de negro */
    font-weight: bold !important;
}









/* =======================================================

   ESTILO DETALLE DE PEDIDO (RÉPLICA DE MI CUENTA)

   ======================================================= */



/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO --- */

body.template-account-order .page-header, 

body.template-account-order .account-page {

    max-width: 1300px !important; 

    margin-left: auto !important;

    margin-right: auto !important;

    /* BASE BLANCA TRANSLÚCIDA CON DESENFOQUE */

    background: rgba(255, 255, 255, 0.75) !important; 

    backdrop-filter: blur(20px) saturate(160%);

    -webkit-backdrop-filter: blur(20px) saturate(160%);

    border-left: 1px solid rgba(255, 255, 255, 0.5);

    border-right: 1px solid rgba(255, 255, 255, 0.5);

    position: relative;

}



/* --- 2. TÍTULO "ORDEN #..." (Unión Superior) --- */

body.template-account-order .page-header {

    margin-top: 25px !important;

    padding: 50px 40px 0px 40px !important;

    border-top: 1px solid rgba(255, 255, 255, 0.6);

    border-top-left-radius: 30px;

    border-top-right-radius: 30px;

    margin-bottom: 0 !important;

    padding-bottom: 0 !important;

    border-bottom: none !important;

    text-align: center !important;

    z-index: 2; 

}



body.template-account-order .page-header h1 {

    color: #000000 !important;

    text-shadow: none !important;

    font-size: 28px;

    font-weight: 700;

    text-transform: uppercase;

    text-align: center !important;

    letter-spacing: 1px;

}



/* --- 3. CUERPO DE LA PÁGINA (Unión Inferior) --- */

body.template-account-order .account-page {

    margin-top: -1px !important; /* Soldadura visual */

    padding: 20px 40px 60px 40px !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.5);

    border-bottom-left-radius: 30px;

    border-bottom-right-radius: 30px;

    margin-bottom: 80px !important;

    border-top: none !important;

    z-index: 1;

}



/* --- 4. CORRECCIÓN DE TODOS LOS TEXTOS A NEGRO --- */

/* Forzamos negro en títulos, párrafos, tabla y celdas */

body.template-account-order .account-page,

body.template-account-order .account-page h2,

body.template-account-order .account-page h3,

body.template-account-order .account-page h4,

body.template-account-order .account-page p,

body.template-account-order .account-page div,

body.template-account-order .account-page span,

body.template-account-order .account-page strong,

body.template-account-order .account-page small,

body.template-account-order .table td,

body.template-account-order .table th {

    color: #000000 !important;

    text-shadow: none !important;

}



/* Títulos internos (Detalles, Producto, Total) */

body.template-account-order .subtitle,

body.template-account-order .table thead th {

    font-weight: 800 !important;

    text-transform: uppercase !important;

    font-size: 13px !important;

    border-bottom: 1px solid #000000 !important; /* Línea separadora negra */

    color: #000000 !important;

    opacity: 1 !important;

}



/* Líneas de la tabla */

body.template-account-order .table td {

    border-top: 1px solid rgba(0,0,0,0.1) !important;

}



/* --- 5. ICONOS DE PAGO Y ENVÍO --- */

/* Forzamos que los iconos SVG (tarjeta, camión) sean negros */

body.template-account-order .account-page svg, 

body.template-account-order .account-page i {

    fill: #000000 !important;

    color: #000000 !important;

}



/* --- 6. BOTÓN "REALIZAR EL PAGO" --- */

body.template-account-order .account-page .btn-primary {

    background-color: #000000 !important;

    color: #ffffff !important; /* Texto Blanco */

    border-radius: 12px !important;

    font-weight: 700 !important;

    text-transform: uppercase !important;

    border: none !important;

    margin-top: 15px !important;

    display: block !important;

    width: 100% !important;

}



/* --- 7. RESPONSIVE --- */

@media (max-width: 900px) {

    body.template-account-order .page-header, 

    body.template-account-order .account-page {

        max-width: 95% !important;

        width: 95% !important;

        padding-left: 20px !important;

        padding-right: 20px !important;

    }

}















/* =========================================

   AJUSTES FINALES: DETALLE DE ORDEN

   ========================================= */



/* 1. TÍTULO "ORDEN #..." A LA IZQUIERDA */

body.template-account-order .page-header,

body.template-account-order .page-header h1 {

    text-align: left !important;

    justify-content: flex-start !important;

}





/* 2. LÍNEAS DIVISORIAS TRANSPARENTES (MANTIENEN EL ESPACIO) */

/* Hacemos que existan pero sean invisibles */

body.template-account-order .divider,

body.template-account-order hr {

    background-color: transparent !important; /* Sin color de fondo */

    border-color: transparent !important;     /* Sin bordes de color */

    opacity: 0 !important;                    /* Totalmente invisible */

    

    /* Esto asegura que el espacio se mantenga */

    display: block !important;

    height: 1px !important; 

    width: 100% !important;

}









/* --- 1. LIMPIEZA DE CONTENEDORES (Elimina línea bajo el botón) --- */
body.template-account-order .account-page .col-md-4.subtitle,
body.template-account-order .account-page .col-md-8.subtitle {
    border-bottom: none !important;
}

/* --- 2. LÍNEA EN "DETALLES" (Izquierda) --- */
body.template-account-order .account-page .col-md-4 .subtitle {
    border-bottom: 1px solid #000000 !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

/* --- 3. LÍNEA EN "PRODUCTO" (Derecha) --- */
/* Solo aplicamos la línea a los títulos existentes, manteniendo su visibilidad original */
body.template-account-order .account-page .col-md-8 .subtitle {
    border-bottom: 1px solid #000000 !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    /* Eliminamos el display: block que causaba el solapamiento */
}

/* --- 4. DIVISORES DE PRODUCTOS (Ya te funcionaban) --- */
body.template-account-order .account-page .order-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.4) !important;
    padding-bottom: 25px !important;
    margin-bottom: 10px !important;
    display: block !important;
    width: 100% !important;
}

/* Evitamos la línea al final del último producto */
body.template-account-order .account-page .order-item:last-of-type {
    border-bottom: none !important;
}





/* --- FIX: ELIMINAR DOBLE "PRODUCTO" EN RANGO INTERMEDIO --- */

/* 1. Ocultamos el título de "Productos" (plural/móvil) en pantallas mayores a 768px */
@media (min-width: 768px) {
    body.template-account-order .account-page .col-md-8 div.subtitle.d-lg-none,
    body.template-account-order .account-page .col-md-8 div.subtitle.d-md-block {
        display: none !important;
    }
}

/* 2. Aseguramos que el título de escritorio mantenga su estilo de línea */
/* (Este es el que dice "PRODUCTO" dentro de la estructura de tabla/lista) */
body.template-account-order .account-page .col-md-8 .d-none.d-md-block.subtitle,
body.template-account-order .account-page .order-detail thead th {
    border-bottom: 1px solid #000000 !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* 3. Ajuste para Mobile (Debajo de 768px) */
@media (max-width: 767px) {
    /* Aquí permitimos que se vea el título móvil y le damos el estilo de Khemia */
    body.template-account-order .account-page .col-md-8 div.subtitle.d-lg-none {
        display: block !important;
        border-bottom: 1px solid #000000 !important;
        margin-top: 30px !important; /* Espacio extra para que no se pegue a Detalles */
    }
}






/* 1. Forzar color blanco en el contenedor principal y textos básicos */
.account-page .card-header-collapse,
.account-page .card-header-collapse p,
.account-page .card-header-collapse small {
    color: #FFFFFF !important;
}

/* 2. Asegurar que los enlaces (el número de orden como #114) también sean blancos */
.account-page .card-header-collapse a.btn-link-primary {
    color: #FFFFFF !important;
    text-decoration: none; /* Opcional: quita el subrayado si lo tiene por defecto */
    transition: color 0.3s ease; /* Transición suave para el hover */
}

/* 3. Efecto Hover: Cambiar a un gris muy claro al pasar el mouse por el enlace (UX Pro) */
.account-page .card-header-collapse a.btn-link-primary:hover {
    color: #E0E0E0 !important; 
}

/* 4. Cambiar el color del ícono de la flecha (si es un font-icon o SVG) */
.account-page .card-header-collapse .card-collapse-toggle,
.account-page .card-header-collapse svg,
.account-page .card-header-collapse svg path {
    color: #FFFFFF !important;
    fill: #FFFFFF !important; 
}



/* 1. Forzar a blanco los párrafos, los span (Pendiente) y los strong (Total, No enviado) */
.account-page .js-card-collapse .card-body p,
.account-page .js-card-collapse .card-body p span,
.account-page .js-card-collapse .card-body p strong,
.account-page .js-card-collapse .card-body h4,
.account-page .js-card-collapse .card-body h4 strong {
    color: #FFFFFF !important;
}

/* 2. Forzar a blanco el enlace de "Ver detalle >" */
.account-page .js-card-collapse .card-body a.btn-link-primary {
    color: #FFFFFF !important;
}

/* Efecto hover para el enlace (opcional pero recomendado) */
.account-page .js-card-collapse .card-body a.btn-link-primary:hover {
    color: #CCCCCC !important;
}

/* 3. Forzar a blanco los iconos SVG (las cajitas al lado de Pago y Envío) */
.account-page .js-card-collapse .card-body p svg,
.account-page .js-card-collapse .card-body p svg path {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}




/* 1. Ocultar completamente la columna de la imagen y la cantidad */
.account-page .js-card-collapse .card-body .row > .col-5 {
    display: none !important;
}

/* 2. Expandir la columna de texto para que ocupe todo el ancho disponible */
.account-page .js-card-collapse .card-body .row > .col-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important; 
}






/* ==========================================================
   CONTRASTE EXCLUSIVO: BOTÓN "SEGUÍ TU ENVÍO"
   (Caja blanca, letras negras)
   ========================================================== */

/* Targeteamos el botón primario dentro del footer de la tarjeta de pedido */
.account-page .js-card-collapse .card-footer .btn-primary {
    /* 1. Fondo blanco para la caja del botón */
    background-color: #FFFFFF !important;
    
    /* 2. Letras negras para el contraste */
    color: #000000 !important;
    
    /* 3. Ajustes de estilo para asegurar que se vea perfecto */
    border: 2px solid #000000 !important; /* Borde negro sutil opcional para definirlo bien */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-shadow: none !important; /* Eliminamos sombras de texto previas */
    transition: all 0.3s ease !important;
}

/* 4. Efecto Hover para mejorar la experiencia de usuario */
.account-page .js-card-collapse .card-footer .btn-primary:hover {
    background-color: #F0F0F0 !important; /* Gris muy claro al pasar el mouse */
    color: #000000 !important;
    border-color: #000000 !important;
}





/* Apunta específicamente al botón de cerrar la notificación de cookies */
.js-notification-close.btn-secondary {
    background-color: #ffffff !important; /* Fondo blanco */
    color: #000000 !important;            /* Texto negro */
    border: 1px solid #ffffff !important; /* Borde blanco para mayor definición */
    opacity: 1 !important;                /* Asegura que no sea transparente */
    padding: 5px 15px !important;         /* Ajusta el espacio interno */
    text-transform: uppercase;            /* Opcional: para que resalte más */
    font-weight: bold;                    /* Opcional: texto en negrita */
}

/* Efecto al pasar el mouse para que el usuario sepa que es clickeable */
.js-notification-close.btn-secondary:hover {
    background-color: #eeeeee !important; /* Gris muy claro al pasar el mouse */
    color: #000000 !important;
}




/* 1. Asegurar que la fila principal centre geométricamente */
.account-page .js-card-header-collapse > .row {
    display: flex !important;
    align-items: center !important;
}

/* 2. Normalizar la Orden (Izquierda): quitar espacios ocultos */
.account-page .js-card-header-collapse .col a.btn-link-primary {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 13px !important; /* Fijamos el tamaño */
    display: inline-block !important;
}

/* 3. Normalizar la Fecha (Derecha): Igualar el tamaño con la Orden */
.account-page .js-card-header-collapse .col.text-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.account-page .js-card-header-collapse .col.text-right p.m-0,
.account-page .js-card-header-collapse .col.text-right p.m-0 small {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 13px !important; /* Clave: obligamos a que la fecha sea del mismo tamaño que la orden */
    display: inline-block !important;
}





/* 1. Forzar visibilidad del ícono/enlace principal SOLO de la cuenta */
.utilities-container a.js-login {
    display: inline-block !important;
}

/* 2. Forzar visibilidad SOLO del texto de "Mi cuenta" (esto deja oculto el texto de Buscar) */
.utilities-container a.js-login span.utilities-text {
    display: inline-block !important;
}

/* 3. Asegurar que los elementos se alineen bien al forzar su aparición */
.utilities-container {
    display: flex !important;
    align-items: center !important;
}









/* ==========================================================
   FIX DEFINITIVO Y AISLADO: ICONO "MI CUENTA"
   ========================================================== */

/* 1. Aseguramos que el contenedor general se alinee bien */
body.customer-logged-in .utilities-container {
    display: flex !important;
    align-items: center !important;
}

/* 2. Targeteamos EXCLUSIVAMENTE el enlace directo de cuenta para el círculo.
      Al usar [href*="/account"], evitamos romper el menú hamburguesa o el buscador. */
body.customer-logged-in .utilities-container > a[href*="/account"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin-right: 10px !important;
    
    /* El icono SVG del usuario */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 22px 22px !important;

    /* Estilo Glassmorphism (Círculo difuminado) */
    background-color: rgba(255, 255, 255, .15) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1) !important;
    border-radius: 50% !important;
    transition: .3s !important;
}

/* Ocultamos cualquier basura nativa (SVGs viejos) SOLO de este botón */
body.customer-logged-in .utilities-container > a[href*="/account"] svg,
body.customer-logged-in .utilities-container > a[href*="/account"] i {
    display: none !important;
}

/* Efecto hover EXCLUSIVO para este botón */
body.customer-logged-in .utilities-container > a[href*="/account"]:hover {
    background-color: rgba(255, 255, 255, .3) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .2) !important;
}

/* 3. Limpiamos cualquier icono extra en el texto para no duplicar */
body.customer-logged-in .utilities-container .utilities-text a[href*="/account"]::before {
    display: none !important;
}

/* 4. Forzamos a que el texto "Mi cuenta" no desaparezca en responsive (Tablet) */
body.customer-logged-in .utilities-container .utilities-text {
    display: inline-block !important;
    visibility: visible !important;
}

body.customer-logged-in .utilities-container .utilities-text a[href*="/account"] {
    display: inline-block !important;
    text-decoration: none !important;
    line-height: 42px !important; /* Alineación perfecta con el círculo de 42px */
}







/* ==========================================================
   PULIDO FINAL KHEMIA: SIMETRÍA Y RESPONSIVE (SOLO ICONOS)
   ========================================================== */

/* 1. UNIFICAR ESPACIADO ENTRE ICONOS (IGUAL PARA TODOS LOS ESTADOS) */
/* Esto asegura que la separación sea la misma iniciada la sesión o no */
.header-utils, 
.utilities-container {
    display: flex !important;
    align-items: center !important;
    gap: 1px !important; /* Ajusta este valor (15px o 20px) según prefieras la distancia */
}

/* 2. REGLAS DE LIMPIEZA EN RESPONSIVE (1200px) */
@media (max-width: 1200px) {
    
    /* Ocultar el texto "Mi cuenta" manteniendo el icono intacto */
    body.customer-logged-in .utilities-container .utilities-text {
        display: none !important;
    }

    /* Ocultar la palabra "Menú" al lado del icono de hamburguesa */
    a[data-toggle="#nav-hamburger"] .utilities-text,
    .js-modal-open[data-component="menu-button"] .utilities-text {
        display: none !important;
    }

    /* MANTENEMOS EL BUSCADOR: 
       Eliminamos la regla anterior para que el texto "¿Qué estás buscando?" 
       siga siendo visible hasta que el diseño nativo de la tienda decida ocultarlo. */
}

/* 3. AJUSTE PARA MÓVIL (767px) */
@media (max-width: 767px) {
    .header-utils {
        gap: 12px !important; /* Un poco más cerrado en celular para que entre todo */
    }
}


/* Ocultar barra de seguimiento de compra */
.js-notification-status-page {
    display: none !important;
}


/* Ocultar el selector de ordenamiento y su icono */
.js-sort-by-private, 
.js-sort-by-private + .form-select-icon,
[data-component="sort-by"] {
    display: none !important;
}









/* =======================================================
   ESTILO NUEVA CONTRASEÑA (VERSIÓN COMPACTA Y CENTRADA)
   ======================================================= */

/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO (COMPACTO) --- */
.template-account-newpass .page-header, 
.template-account-newpass .account-page {
    max-width: 550px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO (CABECERA) --- */
.template-account-newpass .page-header {
    margin-top: 60px !important;
    padding-top: 35px !important;
    padding-bottom: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    z-index: 2; 
}

.template-account-newpass .page-header h1 {
    color: #000000 !important;
    text-shadow: none !important;
    font-size: 24px !important;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
    margin: 0 !important;
}

/* --- 3. CUERPO DEL FORMULARIO --- */
.template-account-newpass .account-page {
    margin-top: -1px !important;
    padding: 15px 30px 35px 30px !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

/* --- 4. CENTRADO DE COLUMNAS --- */
.template-account-newpass .account-page .row {
    display: flex !important;
    justify-content: center !important;
}

.template-account-newpass .account-page div[class*="col"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* --- 5. TEXTOS Y ETIQUETAS --- */
.template-account-newpass .account-page label {
    color: #000000 !important;
    text-shadow: none !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px;
}

/* --- 6. INPUTS (CAMPOS DE CONTRASEÑA) --- */
.template-account-newpass .account-page .form-control {
    width: 100% !important;
    height: 45px !important;
    background: rgba(0, 0, 0, 0.1) !important; 
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 12px;
    color: #000000 !important;
    font-weight: 500;
    text-align: center !important;
}

/* --- 7. BOTÓN DE ENVÍO --- */
.template-account-newpass .account-page .btn-primary,
.template-account-newpass .account-page input[type="submit"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    margin: 25px auto 0 auto !important;
    height: 45px !important;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
}

/* --- 8. AJUSTE MOBILE --- */
@media (max-width: 900px) {
    .template-account-newpass .page-header, 
    .template-account-newpass .account-page {
        max-width: 90% !important;
        width: 90% !important;
    }
}


/* Ocultar el icono del ojo en el formulario de contraseña */
.template-account-newpass .js-password-view,
.template-account-reset .js-password-view {
    display: none !important;
}




/* 1. Ocultar el logo del diseñador por defecto en todas las páginas */
.footer-logo.custom-seal {
    display: none !important;
}

/* 2. Mostrar el logo del diseñador ÚNICAMENTE en la página de inicio (Home) */
.template-home .footer-logo.custom-seal {
    display: inline-block !important;
}





/* =======================================================
   ESTILO QUIÉNES SOMOS (UNIFICADO SIN ESPACIOS)
   ======================================================= */

/* --- 1. BASE DE LA CAJA (TÍTULO Y TEXTO) --- */
.template-page section.page-header, 
.template-page section.user-content {
    max-width: 750px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* EL BLANCO ADELANTE: Opacidad alta y sombra de profundidad */
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 1;
}

/* --- 2. ELIMINAR ESPACIO FANTASMA (UNIENDO SECCIONES) --- */
.template-page section.page-header {
    margin-top: 60px !important;
    margin-bottom: 0 !important; /* ELIMINA ESPACIO ABAJO */
    padding: 50px 30px 0px 30px !important; /* Quita el padding inferior */
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.template-page section.user-content {
    margin-top: 0 !important; /* ELIMINA ESPACIO ARRIBA */
    padding: 0px 50px 60px 50px !important; /* Quita el padding superior */
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 100px !important;
}

/* --- 3. TÍTULO EN NEGRO Y CENTRADO --- */
.template-page section.page-header h1 {
    color: #000000 !important; /* NEGRO PURO */
    text-align: center !important;
    font-weight: 700 !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding-bottom: 20px !important; /* Espacio visual interno antes del texto */
    text-shadow: none !important;
}

/* --- 4. CENTRADO DE TEXTO E INFO --- */
.template-page section.user-content .row,
.template-page section.user-content .col-md-8 {
    display: block !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.template-page section.user-content p, 
.template-page section.user-content h3,
.template-page section.user-content li,
.template-page section.user-content strong {
    color: #000000 !important;
    text-align: center !important;
    text-shadow: none !important;
}

/* --- 5. RESPONSIVE --- */
@media (max-width: 900px) {
    .template-page section.page-header, 
    .template-page section.user-content {
        max-width: 92% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}









/* --- SOLO AFECTA A: BANNERS HOME (Versión Mobile) --- */
@media (max-width: 767px) {
    
    /* 1. Reset TOTAL para Edge-to-edge (Elimina espacios de las columnas) */
    section.section-banners-home.position-relative,
    section.section-banners-home.position-relative .container-fluid,
    section.section-banners-home.position-relative .row,
    section.section-banners-home.position-relative div[class*="col"],
    section.section-banners-home.position-relative .grid-item,
    section.section-banners-home.position-relative .banner-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* 2. Formato rectangular apaisado */
    section.section-banners-home.position-relative .textbanner {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        aspect-ratio: 2 / 1.1 !important; /* Mantiene el formato pro */
        margin: 0 0 1px 0 !important; /* Finísima línea de separación */
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* 3. LA MAGIA: Forzar al contenedor de la imagen a tener la misma altura */
    section.section-banners-home.position-relative .textbanner-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. Centrado absoluto y oscurecimiento de la imagen */
    section.section-banners-home.position-relative .textbanner-image img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        filter: blur(2.5px) brightness(0.55) !important;
        transform: scale(1.0) !important; /* Sin zoom para no perder el centro */
        object-fit: cover !important;
        
        /* ESTO ASEGURA EL CENTRO EXACTO (Recuadro Verde) */
        object-position: center center !important; 
    }

    /* 5. Mostrar siempre los títulos (::before) */
    section.section-banners-home.position-relative .textbanner::before {
        opacity: 1 !important; 
        transform: translate(-50%, -50%) scale(1) !important; 
        font-size: 20px !important; 
        z-index: 10 !important;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.9) !important;
    }
}































































/* =======================================================
   FONDO GLOBAL DEFINITIVO (Basado en tu código de "Mi Cuenta")
   Aplica a todo MENOS Home y Producto
   ======================================================= */

/* 1. APLICAR EL FONDO (Pseudo-elemento) */
/* Usamos :not() para excluir Home y Producto */
body:not(.template-home):not(.template-product)::before {
    content: " " !important;
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 0 !important; /* Nivel 0: Detrás del contenido, pero visible */
    pointer-events: none !important;
    
    /* IMAGEN Y COLORES (Tu configuración exacta) */
    background-image: url("https://dcdn-us.mitiendanube.com/stores/007/093/811/themes/rio/2-slide-1767121042328-3932132190-75ee0b67d8e0d7cce6b3424a64802b3b1767121298-480-0.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #8e7468 !important; 
    background-blend-mode: multiply !important;
    
    /* EFECTOS VISUALES */
    filter: blur(50px) saturate(180%) !important;
    transform: scale(1.1) !important;
}

/* 2. AJUSTE DE ALTURA RESPONSIVO (CLAVE PARA NO ROMPER EL HEADER) */
/* El fondo empieza DESPUÉS del header, así no afecta su color */

/* PC (Header alto) */
@media (min-width: 992px) {
    body:not(.template-home):not(.template-product)::before {
        top: 140px !important;
        height: calc(100% - 140px) !important;
    }
}

/* MÓVIL (Header bajo) */
@media (max-width: 991px) {
    body:not(.template-home):not(.template-product)::before {
        top: 120px !important;
        height: calc(100% - 120px) !important;
    }
}

/* 3. LIMPIAR FONDOS SÓLIDOS (Para revelar el diseño) */
/* Hacemos transparentes los contenedores generales para que se vea la imagen de fondo */
body:not(.template-home):not(.template-product) #main-container,
body:not(.template-home):not(.template-product) .container-fluid,
body:not(.template-home):not(.template-product) .js-main-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



/* =======================================================
   FIX DEFINITIVO: TEXTOS ENTEROS SIN PUNTOS SUSPENSIVOS
   ======================================================= */
@media (min-width: 768px) {
    .section-banners-home .textbanner::before,
    [data-store=banner-home-categories] .textbanner::before {
        /* Reducimos un poco el mínimo (de 13px a 10px) y el escalado (a 2.2vw) 
           para que "COLECCIONES" tenga más aire en pantallas medianas */
        font-size: clamp(10px, 2.2vw, 28px) !important;
        
        /* Achicamos más el espacio entre letras si el espacio es crítico */
        letter-spacing: clamp(0px, 0.2vw, 4px) !important;
        
        /* ELIMINAMOS LOS PUNTOS: */
        max-width: 98% !important;
        overflow: visible !important; 
        text-overflow: clip !important; 
        white-space: nowrap !important; /* Evita que se salte a dos líneas */
    }
}




@keyframes aestheticBounce {
    0%, 70% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-4px) scale(1.02);
    }
    100% {
        transform: translateY(-2px) scale(1);
    }
}

#newsletter input[type=email],
.newsletter .form-control,
div[data-store=newsletter] input[type=email] {
    border-radius: 50px !important;
    background-color: rgba(255, 255, 255, .2) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, .5) !important;
    color: #fff !important;
    height: 45px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-shadow: none !important;
    text-align: center !important;
}

#newsletter input[type=email]::placeholder,
.newsletter .form-control::placeholder {
    color: rgba(255, 255, 255, .8) !important;
}

#newsletter button[type=submit],
.newsletter .btn,
div[data-store=newsletter] button {
    background-color: transparent !important;
    border: none !important;
    color: #fff !important;
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 40px !important;
    width: 40px !important;
    padding: 0 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.newsletter .form-group {
    position: relative !important;
    max-width: 500px !important;
    margin: 0 auto !important;
}

.newsletter form .btn,
.newsletter form .btn-append,
.newsletter form .js-newsletter-btn,
.newsletter form button,
.newsletter form i,
.newsletter form svg,
div[data-store=newsletter] button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    pointer-events: none !important;
}

.newsletter form::before,
div[data-store=newsletter] form::before {
    content: "ENTERATE DE TODAS LAS NOVEDADES" !important;
    display: block !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    width: 100% !important;
}

.nav-dropdown-content li a::after,
.nav-dropdown-content li a::before,
body.template-category .row::after,
body.template-category div::after,
body.template-category section::after {
    content: none !important;
    display: none !important;
}

body.template-category #main-container,
body.template-category .container,
body.template-category .js-main-content,
body.template-category .row,
body.template-category section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    background: 0 0 !important;
    border: none !important;
    box-shadow: none !important;
}

#ajax-cart > a::before,
.utilities-container > a[href*=login] {
    width: 42px !important;
    height: 42px !important;
    background-repeat: no-repeat !important;
    background-size: 22px 22px !important;
}

body.template-category .category-header {
    padding-top: 20px !important;
    margin-bottom: 10px !important;
    text-align: left;
}

body.template-category .grid-item img {
    filter: none !important;
    transform: none !important;
}

svg.utilities-icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

#ajax-cart span,
.utilities-container span {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#ajax-cart > a::before,
.utilities-container > a[href*=login] {
    background-color: rgba(255, 255, 255, .15) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1) !important;
    border-radius: 50% !important;
    transition: .3s !important;
}

.utilities-container > a[href*=login] {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin-right: 9px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
    background-position: center center !important;
}

#ajax-cart > a {
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
}

#ajax-cart > a::before {
    content: "" !important;
    display: block !important;
    min-width: 42px !important;
    margin-right: 15px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
    background-position: calc(50% - 1px) center !important;
}

#ajax-cart > a:hover::before,
.utilities-container > a[href*=login]:hover {
    background-color: rgba(255, 255, 255, .3) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .2) !important;
}

section[data-store=home-image-text-module] {
    margin-bottom: 100px !important;
    margin-top: 40px !important;
    background: 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
}

section[data-store=home-image-text-module] .textbanner .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .1) 0, rgba(20, 20, 20, .4) 100%) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    box-shadow: inset 0 0 30px rgba(255, 255, 255, .03) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    min-height: 300px !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

section[data-store=home-image-text-module] .textbanner .row:hover {
    border-color: rgba(255, 255, 255, .3) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .15) 0, rgba(20, 20, 20, .5) 100%) !important;
    transform: none !important;
}

section[data-store=home-image-text-module] .textbanner-image {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    background: 0 0 !important;
    min-height: 100% !important;
    border-right: 1px solid rgba(255, 255, 255, .05) !important;
}

section[data-store=home-image-text-module] .textbanner-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    filter: none !important;
}

section[data-store=home-image-text-module] .textbanner-text {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    background: 0 0 !important;
}

section[data-store=home-image-text-module] h2,
section[data-store=home-image-text-module] h3 {
    font-size: 32px !important;
    color: #fff !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .3) !important;
}

section[data-store=home-image-text-module] p {
    font-size: 15px !important;
    color: rgba(255, 255, 255, .9) !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

section[data-store=home-image-text-module] .row::after,
section[data-store=home-image-text-module] .row::before,
section[data-store=home-image-text-module] .textbanner::after,
section[data-store=home-image-text-module] .textbanner::before {
    display: none !important;
    content: none !important;
}

@media (max-width: 768px) {
    section[data-store=home-image-text-module] .textbanner .row {
        flex-direction: column !important;
        height: auto !important;
        border-radius: 20px !important;
    }

    section[data-store=home-image-text-module] .textbanner-image {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        height: 250px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
    }

    section[data-store=home-image-text-module] .textbanner-text {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 30px 20px !important;
    }

    section[data-store=home-image-text-module] {
        margin-bottom: 60px !important;
    }

    .section-banners-home .textbanner::before,
    [data-store=banner-home-categories] .textbanner::before {
        font-size: 18px !important;
    }

    .container-fluid .page-header h1.js-product-name,
    .page-header h1 {
        font-size: 20px !important;
    }

    .category-header,
    .filters-container,
    .js-category-controls,
    div[data-store=category-controls] {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        z-index: 20 !important;
        background-color: #191919 !important;
        margin-bottom: 0 !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        display: block !important;
        width: 100% !important;
    }

    .js-filters-toggle {
        float: right !important;
        margin-top: -45px !important;
        position: relative !important;
        z-index: 25 !important;
    }

    .category-body,
    .js-product-table {
        margin-top: 20px !important;
        padding-top: 0 !important;
        clear: both !important;
    }

    .js-product-item-image-container .position-relative.d-block[style] {
        padding-bottom: 140% !important;
    }
}

#single-product .js-price-container > .col,
#single-product .js-price-container > .col-12,
.item-actions,
section.section-newsletter-home-images {
    margin-bottom: 0 !important;
}

.js-footer,
footer.js-footer {
    margin-top: 0 !important;
}

#ajax-cart a,
.cart-summary a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    transition: transform .3s !important;
}

body.js-modal-open,
html {
    overflow-y: scroll !important;
}

#ajax-cart a svg,
.cart-summary a svg {
    margin-right: 5px !important;
    overflow: visible !important;
    z-index: 1;
    transform: none !important;
    transition: none !important;
}

#ajax-cart a span:last-of-type,
.cart-summary a span:last-of-type {
    position: absolute !important;
    top: 0 !important;
    left: 33px !important;
    background-color: rgba(255, 255, 255, .8) !important;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .5) !important;
    color: #333 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transform: none !important;
}

#ajax-cart-drawer,
#modal-cart {
    border-radius: 20px 0 0 20px !important;
}

#ajax-cart a:hover,
.cart-summary a:hover {
    transform: translateY(-1px) !important;
}

#ajax-cart a:hover span,
#ajax-cart a:hover svg,
.cart-summary a:hover span,
.cart-summary a:hover svg {
    transform: none !important;
}

@keyframes entradaBlur {
    from {
        backdrop-filter: blur(0);
        background-color: rgba(0, 0, 0, 0);
    }
    to {
        backdrop-filter: blur(8px);
        background-color: rgba(0, 0, 0, .4);
    }
}

.js-modal-overlay,
.modal-overlay {
    animation: .5s ease-out forwards entradaBlur;
    display: block;
    opacity: 1;
}

body.js-modal-open {
    padding-right: 0 !important;
    position: relative !important;
}

body.js-modal-open .nav-main,
body.js-modal-open header {
    padding-right: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#ajax-cart-drawer {
    background-color: rgba(255, 255, 255, .85) !important;
    backdrop-filter: blur(12px) !important;
    border-left: 1px solid rgba(255, 255, 255, .5) !important;
    box-shadow: -5px 0 15px rgba(0, 0, 0, .1) !important;
    color: #000 !important;
}

#ajax-cart-drawer .ajax-cart-item-name,
#ajax-cart-drawer .ajax-cart-title,
#ajax-cart-drawer .ajax-cart-total-price,
#ajax-cart-drawer p,
#ajax-cart-drawer span,
#modal-cart a,
#modal-cart div,
#modal-cart p,
#modal-cart span,
#single-product .js-installment-price,
#single-product .js-max-installments,
#single-product .js-max-installments-container,
#single-product .product-installment-value,
body.template-product #price_display,
body.template-product .breadcrumbs .crumb,
body.template-product .breadcrumbs .separator,
body.template-product .js-max-installments-container,
body.template-product .js-product-form .js-quantity-input,
body.template-product .js-product-name,
body.template-product .product-description,
body.template-product .product-description p,
body.template-product .product-description span,
body.template-product .product-description strong {
    color: #000 !important;
}

#ajax-cart-drawer .ajax-cart-close-icon,
#ajax-cart-drawer .ajax-cart-close-icon svg,
#cart-shipping-container .js-accordion-toggle svg,
.ajax-cart-item-delete svg,
.ajax-cart-item-delete svg path,
.cart-item-delete svg,
.cart-item-delete svg path {
    fill: #000 !important;
    color: #000 !important;
}

#modal-cart {
    background-color: rgba(255, 255, 255, .75) !important;
    backdrop-filter: blur(25px) !important;
    border-left: 1px solid rgba(255, 255, 255, .6) !important;
    box-shadow: -5px 0 25px rgba(0, 0, 0, .15) !important;
}

#modal-cart .modal-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, .1) !important;
    padding: 15px !important;
}

#modal-cart .modal-header .text-center {
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #000 !important;
}

#modal-cart .alert-info {
    background: 0 0 !important;
    border: 1px solid #000 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #000 !important;
    border-radius: 6px !important;
}

#modal-cart .cart-item-name,
#modal-cart .item-name {
    font-size: 14px !important;
    font-weight: 600 !important;
}

#modal-cart .js-modal-close svg {
    width: 16px !important;
    height: 16px !important;
    fill: #000 !important;
}

.headbar {
    background-color: #191919 !important;
    box-shadow: none !important;
    border: none !important;
}

.page-header h1 {
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: left;
    margin-top: 20px !important;
}

.js-item-image-padding,
.js-product-item-image-container .position-relative.d-block[style],
.product-item .item-image-container[style] {
    padding-bottom: 150% !important;
    width: 100% !important;
    background: 0 0 !important;
    display: block !important;
    overflow: hidden !important;
}

.absolute-centered,
.img-absolute-centered,
.js-product-item-image-container img,
.product-item .item-image img {
    left: 0 !important;
    transform: none !important;
    position: absolute !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    right: auto !important;
    min-width: 100% !important;
    border: none !important;
}

.category-body .row .col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
}

.js-product-table .row,
.product-table .row {
    display: flex !important;
    justify-content: center !important;
}

.breadcrumb-container,
.category-header h1,
.nav-dropdown-content li,
.page-header {
    justify-content: center !important;
    display: flex !important;
    text-align: center !important;
}

.breadcrumb-container,
.category-header h1,
.page-header {
    width: 100% !important;
}

.nav-dropdown-content {
    background-color: rgba(0, 0, 0, .6) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 900 !important;
    top: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow: visible !important;
    transition: opacity .4s, visibility .4s !important;
}

#footer,
.footer-legal,
.js-footer,
.nav-dropdown-content .desktop-list-subitems,
.nav-dropdown-content .nav-item-container,
.nav-dropdown-content li,
.nav-dropdown-content ul,
.section-footer,
footer {
    background: 0 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.nav-dropdown-content a,
.nav-dropdown-content span {
    color: #fff !important;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.nav-dropdown-content a:hover {
    color: #ccc !important;
    background-color: rgba(255, 255, 255, .05) !important;
}

.nav-dropdown-content li {
    border-right: 1px solid rgba(255, 255, 255, .3) !important;
    align-items: center !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    margin: 0 !important;
    overflow: visible !important;
    height: 50px !important;
    min-width: 120px !important;
}

.nav-dropdown-content li:last-child {
    border-right: none !important;
}

.nav-dropdown-content li a,
.nav-dropdown-content li a:hover,
.nav-dropdown-content li:hover a {
    background: 0 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: .4s cubic-bezier(.165, .84, .44, 1) !important;
    color: #fff !important;
    text-decoration: none !important;
    opacity: 1 !important;
    outline: 0 !important;
}

.nav-dropdown-content li a {
    display: inline-block !important;
    padding: 8px 22px !important;
    border-radius: 50px !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    position: relative !important;
    top: 0 !important;
    white-space: nowrap !important;
    transform: scale(1) !important;
}

.nav-dropdown-content li:hover a {
    background-color: rgba(255, 255, 255, .15) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, .3) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2) !important;
    z-index: 100 !important;
    color: #fff !important;
}

.nav-dropdown-content::before {
    content: "" !important;
    position: absolute !important;
    top: -35px !important;
    left: 0 !important;
    right: 0 !important;
    height: 40px !important;
    background: 0 0 !important;
    z-index: -1 !important;
}

.header-nav-list .header-nav-item:hover > a,
.header-nav-list .header-nav-item > a {
    background-color: transparent !important;
    background-image: none !important;
}

.nav-link-productos {
    padding: 20px 30px;
    margin: -20px -30px;
    display: inline-block;
}

.tu-clase-de-encabezado {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .8) 0, rgba(0, 0, 0, 0) 100%);
}

.tu-clase-del-encabezado {
    background-color: #1a1a1a;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
    position: relative;
    z-index: 999;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.section-adbar,
body.template-home .section-adbar {
    background-color: rgba(0, 0, 0, .4) !important;
    width: 100% !important;
}

.desktop-list-subitems.list-subitems {
    background-color: rgba(26, 26, 26, .4) !important;
    backdrop-filter: blur(200px) !important;
    border: none !important;
    position: relative !important;
    overflow: visible !important;
}

.desktop-list-subitems.list-subitems::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(26, 26, 26, .6) 0, rgba(26, 26, 26, 0) 100%) !important;
    backdrop-filter: blur(200px) !important;
    pointer-events: none;
}

.footer-legal .row .text-center.font-small div.d-inline-block {
    visibility: hidden;
    position: relative;
    font-size: 0;
}

.footer-legal .row .text-center.font-small div.d-inline-block::before {
    content: "Copyright SomosKHEMIA - 2026. Todos los derechos reservados.";
    visibility: visible;
    font-size: 13px;
    display: block;
    color: #fff;
}

.footer-legal .row .text-center.font-small div.d-inline-block.mr-md-2 {
    position: relative !important;
    font-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.footer-legal .row .text-center.font-small div.d-inline-block.mr-md-2::before {
    content: "Copyright SomosKHEMIA - 2026. Todos los derechos reservados. ";
    font-size: 13px !important;
    color: #fff !important;
    display: inline-block !important;
    margin-right: 5px !important;
    text-transform: none !important;
}

.footer-legal .text-center.font-small {
    font-size: 13px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    line-height: 1.5 !important;
}

.footer-legal .text-center.font-small a,
.footer-legal .text-center.font-small span {
    font-size: 13px !important;
    margin: 0 4px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.js-product-slide a,
.js-product-slide img,
.js-swiper-product-slide a,
.product-gallery-image a,
.product-slide a,
.swiper-slide a.product-gallery-image,
a[data-fancybox=product-gallery],
a[data-fancybox] {
    pointer-events: none !important;
    cursor: default !important;
}

.js-product-zoom-icon,
.product-gallery-icon-zoom {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.container-fluid .page-header h1.js-product-name,
.page-header h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    width: 100% !important;
}

header.js-head-main {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
}

.section-adbar {
    order: 1 !important;
    border: none !important;
    padding: 8px 0 !important;
    display: none !important;
}

.adbar-message,
.adbar-text-container,
.section-adbar * {
    color: #fff !important;
    text-align: center !important;
    text-shadow: none !important;
    animation: none !important;
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
    font-size: 12px !important;
    margin: 0 !important;
}

.col-utility,
.header-utils {
    margin-left: auto !important;
    display: flex !important;
    padding-right: 0 !important;
}

header.js-head-main > .container-fluid {
    order: 2 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 20px !important;
}

.header-utils {
    align-items: center !important;
    gap: 20px !important;
    justify-content: flex-end !important;
    order: 3 !important;
    flex: 0 0 auto !important;
}

body.template-home .section-adbar {
    display: flex !important;
    order: -1 !important;
    padding: 20px 0 !important;
    z-index: 1005 !important;
    align-items: center !important;
    justify-content: center !important;
    height: 35px !important;
}

header .container-fluid > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
}

.header-logo-container {
    flex: 0 0 auto !important;
    margin-right: 20px !important;
    order: 1 !important;
}

.js-menu-desktop,
.nav-primary {
    display: flex !important;
    flex: 1 1 auto !important;
    order: 2 !important;
}

.col-utility {
    align-items: center !important;
    justify-content: flex-end !important;
    order: 3 !important;
    flex: 0 0 auto !important;
}

.js-modal-open[data-component=menu-button],
a[data-toggle="#nav-hamburger"] {
    display: none !important;
    width: 0 !important;
}

.js-login-modal .utilities-text,
a[href*=account] .utilities-text,
a[href*=login] .utilities-text {
    display: inline-block !important;
    visibility: visible !important;
    font-size: 12px !important;
    width: auto !important;
    margin-left: 5px !important;
}

.badge,
.cart-quantity,
.js-cart-quantity,
span[class*=quantity] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: -5px !important;
    right: -8px !important;
    min-width: 18px !important;
    height: 18px !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 99999 !important;
}

.cart-container,
.utilities-item {
    overflow: visible !important;
    position: relative !important;
}

.header-utils > div {
    margin-left: 15px !important;
}

header.js-head-main .container-fluid {
    height: 125px !important;
    min-height: 125px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.cart-item-quantity .form-group,
.cart-item-quantity .form-quantity,
.cart-item-quantity .w-100 {
    background: 0 0 !important;
    border: none !important;
    width: auto !important;
    display: inline-block !important;
}

.cart-item-quantity .row.align-items-center {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #1a1a1a !important;
    border-radius: 50px !important;
    height: 32px !important;
    width: 100px !important;
    margin: 5px 0 !important;
    padding: 0 4px !important;
    overflow: hidden !important;
    border: none !important;
}

.js-cart-quantity-btn.form-quantity-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 30px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    position: static !important;
}

.cart-item-quantity .form-quantity-icon svg,
.cart-item-quantity .js-cart-quantity-btn svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    fill: #fff !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
}

.js-cart-quantity-container.col-px-1 {
    flex: 0 0 22px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
}

.js-cart-quantity-container input {
    background: 0 0 !important;
    color: #fff !important;
    border: none !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    width: 100% !important;
    padding: 0 !important;
}

.js-cart-quantity-btn.minus {
    display: flex !important;
    justify-content: flex-end !important;
    padding-right: 6px !important;
    flex: 1 !important;
}

.js-cart-quantity-btn.plus {
    display: flex !important;
    justify-content: flex-start !important;
    padding-left: 6px !important;
    flex: 1 !important;
}

.js-cart-quantity-btn svg {
    width: 11px !important;
    height: 11px !important;
    fill: #fff !important;
}

@media (min-width: 992px) {
    .section-single-product {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        overflow-x: hidden !important;
    }

    .section-single-product .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    .product-image-container {
        display: flex !important;
        flex: 0 0 675px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .section-single-product .col-2.d-none.d-md-block {
        flex: 0 0 110px !important;
        width: 110px !important;
        margin-right: 15px !important;
        padding: 0 !important;
    }

    .section-single-product .col-2.d-none.d-md-block img {
        object-fit: cover !important;
        margin-bottom: 8px !important;
        border-radius: 4px;
    }

    .section-single-product .col-2.d-none.d-md-block + div {
        flex: 0 0 550px !important;
        width: 550px !important;
        max-height: 72vh !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .section-single-product .col-2.d-none.d-md-block + div img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .section-single-product .col-12.col-md-7 {
        flex: 0 1 350px !important;
        min-width: 300px !important;
        padding-left: 15px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .js-price-container.price-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: fit-content !important;
        margin-bottom: 15px !important;
        margin-left: -15px !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    .js-price-container.price-container * {
        white-space: nowrap !important;
        width: auto !important;
        margin: 0 !important;
    }

    .js-product-container .btn-primary {
        min-width: 220px !important;
        width: fit-content !important;
    }

    .js-product-container .swiper-pagination {
        bottom: 5px !important;
    }
}

.js-product-form .form-row.mb-2 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

.js-product-form .col-4.js-quantity-container {
    flex: 0 0 120px !important;
    width: 120px !important;
    max-width: 120px !important;
    padding: 0 !important;
}

.js-product-form .js-quantity.form-group {
    position: relative !important;
    height: 45px !important;
    border: 1px solid #fff !important;
    border-radius: 6px !important;
    background: 0 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.js-product-form .js-quantity-input {
    position: absolute !important;
    top: 1100% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 50px !important;
    height: 30px !important;
    min-height: 30px !important;
    text-align: center !important;
    color: #fff !important;
    background: 0 0 !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
    display: block !important;
    line-height: 30px !important;
    appearance: none !important;
}

#single-product #price_display,
.js-offer-label {
    line-height: 1 !important;
}

.js-product-form .js-quantity-down,
.js-product-form .js-quantity-up {
    position: absolute !important;
    top: 0 !important;
    width: 35px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    cursor: pointer !important;
    background: 0 0 !important;
}

.js-product-form .js-quantity-down {
    left: 0 !important;
}

.js-product-form .js-quantity-up {
    right: 0 !important;
}

.js-product-form .js-quantity-down svg,
.js-product-form .js-quantity-up svg {
    fill: #fff !important;
    width: 14px !important;
    height: 14px !important;
}

.js-product-form .col-8 {
    flex: 1 !important;
    padding: 0 !important;
}

.js-addtocart {
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 4px !important;
}

.js-product-container {
    margin-top: 20px !important;
}

.js-accordion-container {
    margin-top: 30px !important;
    display: block !important;
    clear: both !important;
}

.js-product-thumb-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

body.template-home::before {
    content: "";
    right: 0;
    bottom: 0;
    background-image: url("https://dcdn-us.mitiendanube.com/stores/007/093/811/themes/rio/2-slide-1767121042328-3932132190-75ee0b67d8e0d7cce6b3424a64802b3b1767121298-480-0.webp?1000217475");
    background-size: cover;
    background-position: center top;
    filter: blur(60px) brightness(.3) saturate(130%);
}

.item {
    background: 0 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: none !important;
    margin-bottom: 15px !important;
}

.item-description {
    background: rgba(0, 0, 0, .7) !important;
    backdrop-filter: blur(15px) !important;
    border-top: 1px solid rgba(255, 255, 255, .1) !important;
    padding: 15px 15px 20px !important;
    border-radius: 0 0 20px 20px !important;
    text-align: center !important;
}

.item-actions > :nth-child(n+2),
.item-buy-btn.btn-secondary,
.js-addtocart-placeholder,
.js-addtocart.btn.btn-primary.btn-block.btn-transition {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.item-actions .btn.btn-primary,
.item-actions .js-addtocart:first-child {
    border-radius: 50px !important;
    width: 100% !important;
    padding: 12px 20px !important;
    margin-top: 15px !important;
    background: rgba(255, 255, 255, .9) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid #fff !important;
    color: #222 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 12px !important;
    transition: .3s !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
}

.item-image,
.item-image img {
    border-radius: 20px 20px 0 0 !important;
}

.item-actions .btn.btn-primary:hover {
    background: #fff !important;
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(255, 255, 255, .4) !important;
}

.item-description .item-name,
.item-description .item-name a,
.item-description .item-price {
    color: #fff !important;
    font-weight: 600 !important;
}

.item-actions .btn:first-child {
    margin-bottom: 5px !important;
}

.item-image {
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
}

.item-name,
.item-name a {
    display: block !important;
    text-align: center !important;
}

.item-price-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    min-height: 45px !important;
}

.item-installments {
    text-align: center !important;
    display: block !important;
}

.item-price-container .item-price {
    font-size: 20px !important;
    order: 2 !important;
    display: block !important;
    margin: 0 !important;
    font-weight: 900 !important;
    color: #fff !important;
    letter-spacing: .5px !important;
    line-height: 1 !important;
}

.item-price-container .item-price-compare,
.js-price-container .col > span:first-child {
    margin-bottom: 2px !important;
    order: 1 !important;
    text-decoration: line-through !important;
}

.item-price-container .item-price-compare {
    display: block !important;
    margin-right: 0 !important;
    font-size: 11px !important;
    color: #888 !important;
}

.js-offer-label {
    background-color: rgba(0, 0, 0, .6) !important;
    display: inline-block !important;
    font-size: 13px !important;
    padding: 10px 15px !important;
    font-weight: 800 !important;
    min-height: auto !important;
    border-radius: 4px !important;
    color: #fff !important;
}

body.template-category::before,
body.template-product::before {
    content: "";
    height: 100%;
    background-image: url("https://dcdn-us.mitiendanube.com/stores/007/093/811/themes/rio/2-slide-1767121042328-3932132190-75ee0b67d8e0d7cce6b3424a64802b3b1767121298-480-0.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(50px) saturate(180%);
    background-blend-mode: multiply;
    transform: scale(1.1);
}

#product_form .js-accordion-content,
body.template-category .js-category-controls {
    display: block !important;
}

body.template-category .js-category-controls .title-container,
body.template-category .js-category-controls h1 {
    text-align: center;
    width: 100%;
}

.js-products-featured-container,
.js-products-featured-title,
.section-featured-home,
.section-featured-home .container-fluid {
    border: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    background-color: transparent !important;
}

.section-featured-home {
    background: 0 0 !important;
}

#ajax-cart-details .cart-item-row,
#ajax-cart-details .row,
#modal-cart .js-cart-item-row {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
}

#ajax-cart-details .col-10,
#modal-cart .col-10,
#modal-cart .col-8 {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    position: static !important;
    justify-content: flex-start !important;
}

#ajax-cart-details .cart-item-quantity,
#modal-cart .cart-item-quantity {
    margin-left: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    width: fit-content !important;
}

#ajax-cart-details .cart-item-quantity .form-group,
#ajax-cart-details .cart-item-quantity .row {
    margin: 0 !important;
    float: none !important;
}

#ajax-cart-details .col-10,
#modal-cart .col-10 {
    align-items: flex-start !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
}

#ajax-cart-details .cart-item-quantity,
#modal-cart .cart-item-quantity {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(-2px) !important;
    float: none !important;
    display: inline-flex !important;
}

#ajax-cart-details .cart-item-name,
#modal-cart .cart-item-name {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#ajax-cart-details .js-cart-item,
#modal-cart .js-cart-item,
.cart-table .cart-row {
    border-bottom: 1px solid #000 !important;
    padding-bottom: 15px !important;
    padding-top: 15px !important;
    margin-bottom: 5px !important;
    display: flex !important;
    width: 100% !important;
}

#ajax-cart-details .js-cart-item:last-child,
#modal-cart .js-cart-item:last-of-type {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

#ajax-cart-details .js-ajax-cart-list,
#modal-cart .js-ajax-cart-list {
    margin-bottom: 40px !important;
    display: block !important;
}

#ajax-cart-drawer .ajax-cart-header,
#modal-cart .modal-header {
    border-bottom: none !important;
    box-shadow: none !important;
}

#ajax-cart-drawer .ajax-cart-title,
#modal-cart .modal-header .text-center {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding-top: 15px !important;
}

#ajax-cart-drawer .ajax-cart-body,
#modal-cart .modal-body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#ajax-cart-details .js-cart-item:first-child,
#modal-cart .js-cart-item:first-child {
    padding-top: 20px !important;
    margin-top: 0 !important;
}

#ajax-cart-details .js-cart-item-subtotal,
#modal-cart .js-cart-item-subtotal,
.cart-item-subtotal {
    font-size: 14px !important;
    color: #000 !important;
    line-height: 1.9 !important;
    letter-spacing: .5px !important;
}

#ajax-cart-details .cart-item-delete,
#modal-cart .cart-item-delete {
    margin-top: 12px !important;
    align-self: flex-start !important;
    display: flex !important;
    align-items: flex-start !important;
    height: auto !important;
}

#modal-cart .js-modal-close.btn-link {
    margin-top: 3px !important;
    display: block !important;
}

#cart-shipping-container .js-accordion-toggle,
#cart-shipping-container .js-accordion-toggle .subtitle {
    color: #000 !important;
    font-weight: 600 !important;
}

#cart-shipping-container .js-shipping-method-unavailable,
#cart-shipping-container .text-muted,
#cart-shipping-container small {
    color: #222 !important;
}

div.row.section-single-product {
    background-color: rgba(240, 234, 229, .72) !important;
    backdrop-filter: blur(10px) !important;
    max-width: 1300px !important;
    width: 94% !important;
    margin: 80px auto 50px !important;
    padding: 30px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .15) !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
}

@media (min-width: 768px) {
    div.row.section-single-product > div:nth-child(2) {
        padding-left: 0 !important;
        border: none !important;
        position: relative !important;
    }
}

.js-accordion-container,
.js-accordion-content,
.js-accordion-toggle {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.js-accordion-toggle {
    padding-left: 0 !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
}

.js-accordion-content {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    color: #fff !important;
}

.divider {
    background-color: #fff !important;
    border-color: #fff !important;
    opacity: .4 !important;
}

#installments-modal,
.js-installments-modal-link {
    color: #fff !important;
    font-weight: 600;
}

#installments-modal svg,
#installments-modal svg path,
.js-installments-modal-link i,
.js-installments-modal-link svg,
.js-installments-modal-link svg path {
    fill: #fff !important;
    color: #fff !important;
}

.js-price-container .col {
    display: flex !important;
    flex-direction: column !important;
}

.js-price-container .col > span:first-child {
    font-size: 14px !important;
    color: #fff !important;
    opacity: .7 !important;
    line-height: 1.2 !important;
}

.js-price-container .col > span:last-child {
    order: 2 !important;
}

.js-price-container.row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 !important;
}

.js-price-container > .col,
.js-price-container > .col-12,
.js-price-container > .col-auto {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
    text-align: left !important;
}

.js-price-container > .col {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#compare_price_display {
    order: 1 !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, .6) !important;
    text-decoration: line-through !important;
    margin-bottom: 0 !important;
    display: block !important;
}

#price_display {
    order: 2 !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 1.1 !important;
    display: block !important;
}

.js-price-container > .col-12 {
    order: 2 !important;
    margin-top: 0 !important;
}

.js-payment-discount-price-product-container {
    font-size: 18px !important;
    color: #c5a669 !important;
    font-weight: 700 !important;
}

.js-payment-discount-name-product,
.js-payment-discount-price-product {
    color: #c5a669 !important;
}

.js-price-container > .col-auto {
    order: 3 !important;
}

.item-installments,
.js-max-installments-container {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

#btn-installments {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 0 5px !important;
    color: #fff !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border-top: 1px solid rgba(255, 255, 255, .3) !important;
    border-top: none !important;
    margin-top: 0 !important;
}

#btn-installments::after {
    content: "VER MEDIOS DE PAGO";
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#btn-installments::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V12h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

#product_form .js-accordion-toggle,
.js-product-form .js-accordion-toggle {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

.js-product-form .js-accordion-toggle {
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#cart-shipping-container .js-accordion-toggle,
#modal-cart .js-accordion-toggle {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
}

#cart-shipping-container .js-accordion-content,
#modal-cart .js-accordion-content {
    display: none;
}

body.template-product #btn-installments {
    color: #000 !important;
    border-color: rgba(0, 0, 0, .3) !important;
}

body.template-product #btn-installments::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V12h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E") !important;
}

body.template-product #compare_price_display {
    color: #555 !important;
}

body.template-product .divider {
    background-color: #000 !important;
    border-color: #000 !important;
    opacity: .2 !important;
}

body.template-product .js-product-form .js-quantity.form-group {
    border-color: #000 !important;
}

body.template-product .js-product-form .js-quantity-down svg,
body.template-product .js-product-form .js-quantity-up svg {
    fill: #000 !important;
}

body.template-home::before {
    content: " " !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background-color: #6b5148 !important;
    background-blend-mode: multiply !important;
    filter: blur(60px) saturate(130%) !important;
    transform: scale(1.1) !important;
}

body.template-category::before,
body.template-collection::before,
body.template-product::before {
    content: " " !important;
    position: fixed !important;
    top: 140px !important;
    left: 0 !important;
    height: calc(100% - 140px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    width: 100% !important;
}

body.template-product::before {
    background-color: #a89185 !important;
}

body.template-category::before,
body.template-collection::before {
    background-color: #8e7468 !important;
}

.footer-legal .text-center,
footer a,
footer div,
footer span {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.item-actions {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    padding-bottom: 25px !important;
}

.item-description .item-installments,
.item-description .js-installment-price,
.item-description .js-max-installments,
.item-description .js-max-installments-container,
.item-description .product-installment-value {
    color: #fff !important;
}

#single-product .js-max-installments-container {
    text-align: left !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

#single-product .js-max-installments {
    display: inline !important;
    color: #000 !important;
}

#single-product .js-installment-amount {
    margin-right: 2px !important;
}

#single-product .js-installment-price {
    margin-left: 2px !important;
}

#single-product #btn-installments {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    color: #000 !important;
}

.item-description .js-max-installments-container {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    color: #fff !important;
}

.item-description .js-max-installments {
    display: inline-block !important;
    color: #fff !important;
}

.item-description .js-installment-amount,
.item-description .js-installment-price,
.item-description .product-installment-value {
    color: #fff !important;
    margin: 0 !important;
}

.item-description .item-price-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
}

.item-description .item-price-compare {
    order: 1 !important;
}

.item-description .item-price {
    order: 2 !important;
    margin: 2px 0 !important;
    font-weight: 800 !important;
}

.item-description .js-payment-discount-price-product-container {
    order: 3 !important;
    font-size: 14px !important;
    color: #e88a03 !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
}

#single-product .js-payment-discount-name-product,
#single-product .js-payment-discount-price-product,
.item-description .js-payment-discount-name-product,
.item-description .js-payment-discount-price-product {
    color: inherit !important;
}

#single-product .js-payment-discount-price-product-container {
    color: #cb7801 !important;
    font-weight: 600 !important;
}

#single-product .js-price-container {
    gap: 10px !important;
    margin-bottom: 5px !important;
}

#single-product .divider {
    margin-top: 10px !important;
    margin-bottom: 20px !important;
}

#single-product #btn-installments {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
}

#single-product #btn-installments::before {
    margin-left: 0 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

#single-product .js-product-payments-container {
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: block !important;
}

.btn-whatsapp {
    width: 65px !important;
    height: 65px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-whatsapp svg {
    width: 55px !important;
    height: 55px !important;
    margin: 0 !important;
}

.js-addtocart.js-prod-submit-form {
    display: inline-block !important;
    visibility: visible !important;
}

.js-addtocart-placeholder {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    z-index: 10;
    background: #000 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.col-8 {
    position: relative !important;
    min-height: 48px;
}

.js-alert-added-to-cart {
    display: none;
    opacity: 0;
}

.js-alert-added-to-cart.notification-visible {
    display: block !important;
    opacity: 1 !important;
    animation: .4s cubic-bezier(.165, .84, .44, 1) forwards popupFadeIn;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1270px) {
    .nav-desktop-list > li:nth-child(3) {
        display: none !important;
    }
}

@media (max-width: 1080px) {
    .nav-desktop-list > li:nth-child(2) {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    header .utilities-text {
        display: none !important;
    }
}

header .nav-list-link {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

header .nav-list-arrow {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 4px !important;
}

@media (max-width: 767px) {
    .nav-desktop,
    .nav-desktop-list,
    .nav-desktop-list > li:first-child {
        display: none !important;
    }

    header .col-utility.d-md-none {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 25px !important;
        top: auto !important;
        bottom: 42px !important;
        transform: none !important;
        margin-top: 0 !important;
        background: 0 0 !important;
        width: auto !important;
        z-index: 1005;
        align-items: center;
    }

    header .col-utility.d-md-none .utilities-link {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 5px;
    }

    header .col-utility.d-md-none svg {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        fill: #fff !important;
        display: block !important;
        opacity: 1 !important;
        transform: translateZ(0) !important;
    }

    .header-logo-container {
        margin-left: 70px !important;
    }
}

@media (min-width: 1080px) {
    .category-body .container-fluid,
    .section-featured-home .container-fluid,
    .js-related-products .products-section-container {
        padding-left: 2% !important;
        padding-right: 2% !important;
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
}

.item-description {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 15px 10px 20px !important;
    padding-bottom: 5px !important;
}

.item-description .item-name {
    min-height: 42px !important;
    overflow: hidden !important;
    margin-bottom: 5px !important;
}

@media (min-width: 992px) {
    .item-description .item-name {
        margin-top: 12px !important;
        min-height: 45px !important;
    }
}

.js-item-product .item-actions form.js-product-form {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
}

.js-item-product .item-actions .js-addtocart[type="submit"] {
    width: 150px !important;
    min-width: 150px !important;
    height: 48px !important;
    margin: 10px auto 5px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50px !important;
    flex: none !important;
    max-width: 100% !important;
}

.js-item-product .item-actions .js-addtocart[type="submit"] span {
    display: inline-block !important;
    width: auto !important;
}

#installments-modal {
    background-color: rgba(255, 255, 255, .8) !important;
    backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, .6) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .2) !important;
    border-radius: 20px !important;
    width: 750px !important;
    max-width: 95vw !important;
    height: auto !important;
    max-height: 85vh !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

#installments-modal .tab-group {
    background-color: transparent !important;
    border-bottom: 1px solid #000 !important;
    display: flex !important;
    height: 50px !important;
    align-items: stretch !important;
    padding: 10px 15px !important;
    margin-bottom: 20px !important;
    gap: 10px !important;
    justify-content: flex-start !important;
}

#installments-modal .tab {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

#installments-modal .tab-link {
    color: rgba(0, 0, 0, .5) !important;
    font-family: Onest, sans-serif !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-bottom: 3px solid transparent !important;
    transition: all .2s ease !important;
    white-space: nowrap !important;
}

#installments-modal .tab.active .tab-link {
    color: #000 !important;
    border-bottom-color: #000 !important;
    opacity: 1 !important;
}

#installments-modal .modal-header .text-center {
    font-size: 24px !important;
    letter-spacing: 3px !important;
    color: #000 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    padding-left: 45px !important;
    font-family: Onest, sans-serif !important;
}

#installments-modal .js-payment-method-title,
#installments-modal .modal-body *,
#installments-modal table td {
    color: #000 !important;
    font-family: Onest, sans-serif !important;
}

#installments-modal .js-payment-method-title {
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 10px 0 15px !important;
}

#installments-modal .js-payment-provider-installments-row,
#installments-modal table {
    background: transparent !important;
    width: 100% !important;
}

#installments-modal .js-payment-provider-installments-row {
    background-color: rgba(255, 255, 255, .3) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .05) !important;
}

#installments-modal .card,
#installments-modal .js-info-payment-method-container {
    background-color: rgba(255, 255, 255, .4) !important;
    border: 1px solid rgba(255, 255, 255, .8) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .05) !important;
}

#installments-modal .js-modal-close svg {
    fill: #000 !important;
}

#installments-modal .modal-footer .btn-link {
    color: #000 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

#installments-modal .js-modal-tab-discount.label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    height: auto !important;
    vertical-align: middle !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    background-color: #fff !important;
    color: #000 !important;
    transform: translateY(0) !important;
}

#installments-modal .js-modal-tab-discount strong {
    line-height: 1 !important;
    margin: 0 !important;
    display: block !important;
}

#installments-modal .modal-body {
    padding: 25px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#installments-modal .card img {
    max-width: 40px !important;
    height: auto !important;
}

#installments-modal .tab-link {
    padding: 8px 15px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}

#installments-modal .tab-group {
    min-height: 80px !important;
    align-items: center !important;
}

@media (max-width: 768px) {
    #installments-modal {
        transition: none !important;
        animation: none !important;
    }

    #installments-modal.modal-show {
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        border: none !important;
        opacity: 1 !important;
        background-color: rgba(255, 255, 255, .8) !important;
        backdrop-filter: blur(20px) !important;
        transition: none !important;
    }

    #installments-modal:not(.modal-show) {
        display: none !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
        transition: none !important;
        animation: none !important;
        backdrop-filter: none !important;
    }

    #installments-modal .modal-body {
        padding: 20px 15px !important;
        background: transparent !important;
    }

    #installments-modal .card,
    #installments-modal .js-info-payment-method-container {
        background-color: rgba(255, 255, 255, .5) !important;
        border: 1px solid rgba(255, 255, 255, .6) !important;
    }
}

#installments-modal .modal-header .js-modal-close,
#installments-modal .modal-header .js-modal-close i,
#installments-modal .modal-header .btn-close,
#installments-modal .modal-header .close span {
    color: #000 !important;
    opacity: 1 !important;
}

#installments-modal .modal-header .js-modal-close svg,
#installments-modal .modal-header .btn-close svg {
    fill: #000 !important;
}

#installments-modal .modal-header .js-modal-close {
    font-size: 24px !important;
    line-height: 1 !important;
}

#installments-modal .modal-header .js-modal-close svg.icon-inline,
#installments-modal .modal-header .js-modal-close svg.icon-lg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    fill: #000 !important;
    color: #000 !important;
    opacity: 1 !important;
}

#installments-modal .modal-header .col-2.text-right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-right: 15px !important;
}

#installments-modal .modal-header .js-modal-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px !important;
    width: auto !important;
    height: auto !important;
}

#nav-hamburger .modal-with-fixed-footer {
    background-color: rgba(255, 255, 255, .75) !important;
    backdrop-filter: blur(25px) !important;
    box-shadow: -5px 0 25px rgba(0, 0, 0, .15) !important;
    border-left: 1px solid rgba(255, 255, 255, .6) !important;
}

#nav-hamburger,
#nav-hamburger .modal-scrollable-area,
#nav-hamburger .modal-body,
#nav-hamburger .nav-body,
#nav-hamburger .nav-primary,
#nav-hamburger .nav-list,
#nav-hamburger .js-menu-panel {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

#nav-hamburger .nav-item.item-with-subitems > .js-toggle-menu-panel {
    display: none !important;
}

#nav-hamburger .js-menu-panel {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

#nav-hamburger .js-menu-panel > li:first-of-type {
    display: none !important;
}

#nav-hamburger .js-menu-panel .modal-header {
    display: none !important;
}

#nav-hamburger .nav-list,
#nav-hamburger .js-menu-panel,
#nav-hamburger .nav-item {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

#nav-hamburger .nav-list-link,
#nav-hamburger .js-menu-panel .nav-list-link {
    color: #000 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-shadow: none !important;
    font-size: 14px !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 25px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .15) !important;
}

#nav-hamburger .modal-header {
    display: flex !important;
    justify-content: flex-end !important;
    background: transparent !important;
    border: none !important;
    padding: 15px !important;
    width: 100% !important;
}

#nav-hamburger .modal-header .modal-close,
#nav-hamburger .modal-header svg {
    fill: #000 !important;
    color: #000 !important;
    opacity: 1 !important;
    display: block !important;
}

@media (max-width: 768px) {
    #modal-cart,
    #ajax-cart-drawer {
        border-radius: 0 !important;
    }
}

@media (max-width: 768px) {
    #nav-hamburger,
    #modal-cart,
    #nav-hamburger .modal-with-fixed-footer,
    #modal-cart .modal-with-fixed-footer {
        height: 100vh !important;
        bottom: 0 !important;
        top: 0 !important;
        max-height: none !important;
    }

    #nav-hamburger .modal-scrollable-area,
    #modal-cart .modal-body {
        min-height: 100% !important;
        height: auto !important;
        padding-bottom: 80px !important;
    }

    #nav-hamburger .modal-with-fixed-footer,
    #modal-cart {
        background-color: rgba(255, 255, 255, .75) !important;
        backdrop-filter: blur(25px) !important;
    }
}

@media (max-width: 768px) {
    #nav-hamburger {
        top: 0 !important;
        bottom: 0 !important;
        background: transparent !important;
    }

    #nav-hamburger .modal-with-fixed-footer {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 100% !important;
        background-color: rgba(255, 255, 255, .75) !important;
        backdrop-filter: blur(25px) !important;
    }

    #nav-hamburger .modal-scrollable-area {
        flex-grow: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 991px) {
    div.row.section-single-product {
        box-sizing: border-box !important;
        width: 94% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 15px !important;
        max-width: 100vw !important;
    }

    .header-logo img,
    .nav-brand img,
    [class*=logo] img {
        min-width: auto !important;
        max-width: 140px !important;
    }

    .header-logo-container {
        margin-top: 5px !important;
    }
}

@media (min-width: 992px) {
    div.row.section-single-product {
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        max-width: 1200px !important;
    }
}

body,
html {
    overflow-x: hidden !important;
}

header,
.js-head-main,
.site-header,
.header-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1050 !important;
    background-color: rgba(0, 0, 0, .4) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .15) !important;
    transition: all .3s ease !important;
}

@media (min-width: 992px) {
    body:not(.template-home) {
        padding-top: 160px !important;
    }

    body.template-home {
        padding-top: 0 !important;
    }
}

@media (max-width: 991px) {
    body:not(.template-home) {
        padding-top: 120px !important;
    }

    body.template-home {
        padding-top: 0 !important;
    }

    .header-logo-container {
        margin-top: 5px !important;
    }
}

.nav-list-link,
.utilities-icon,
.search-input::placeholder,
.search-input {
    color: #fff !important;
    fill: #fff !important;
}

@media (max-width: 768px) {
    a[data-toggle="#nav-filters"] {
        display: none !important;
    }
}

@media (min-width: 992px) {
    div.row.section-single-product {
        margin-top: 10px !important;
    }
}

.js-addtocart {
    white-space: nowrap !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}




/* 1. Replicar el fondo de categorías en Contacto */
body.template-contact::before {
    content: " " !important;
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    /* Misma imagen que categorías */
    background-image: url("https://dcdn-us.mitiendanube.com/stores/007/093/811/themes/rio/2-slide-1767121042328-3932132190-75ee0b67d8e0d7cce6b3424a64802b3b1767121298-480-0.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    /* Tinte sólido de categorías */
    background-color: #8e7468 !important; 
    background-blend-mode: multiply !important;
    /* Efectos de Blur y Saturación */
    filter: blur(50px) saturate(180%) !important;
    transform: scale(1.1) !important;
}

/* 2. Ajuste de altura según el Header (Desktop) */
@media (min-width: 992px) {
    body.template-contact::before {
        top: 140px !important;
        height: calc(100% - 140px) !important;
    }
}

/* 3. Ajuste de altura según el Header (Mobile) */
@media (max-width: 991px) {
    body.template-contact::before {
        top: 120px !important;
        height: calc(100% - 120px) !important;
    }
}

/* 4. Limpiar fondos por defecto para que se vea el nuevo fondo */
body.template-contact #main-container,
body.template-contact .container,
body.template-contact .js-main-content,
body.template-contact section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



/* 1. Aplicar el fondo a Quiénes Somos, Login y Registro */
body.template-page::before,
body.template-account-login::before,
body.template-account-register::before {
    content: " " !important;
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    /* Imagen y Color de fondo (estilo categorías) */
    background-image: url("https://dcdn-us.mitiendanube.com/stores/007/093/811/themes/rio/2-slide-1767121042328-3932132190-75ee0b67d8e0d7cce6b3424a64802b3b1767121298-480-0.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #8e7468 !important; 
    background-blend-mode: multiply !important;
    /* Efectos visuales */
    filter: blur(50px) saturate(180%) !important;
    transform: scale(1.1) !important;
}

/* 2. Ajuste de altura para PC (Header 140px) */
@media (min-width: 992px) {
    body.template-page::before,
    body.template-account-login::before,
    body.template-account-register::before {
        top: 140px !important;
        height: calc(100% - 140px) !important;
    }
}

/* 3. Ajuste de altura para Mobile (Header 120px) */
@media (max-width: 991px) {
    body.template-page::before,
    body.template-account-login::before,
    body.template-account-register::before {
        top: 120px !important;
        height: calc(100% - 120px) !important;
    }
}

/* 4. Quitar fondos sólidos para revelar el diseño en estas páginas */
body.template-page #main-container,
body.template-account-login #main-container,
body.template-account-register #main-container,
body.template-page .container,
body.template-account-login .container,
body.template-account-register .container,
body.template-page section,
body.template-account-login section,
body.template-account-register section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



/* 1. Fondo para Buscador, 404 y Recuperación de Contraseña */
body.template-search::before,
body.template-404::before,
body.template-account-reset::before {
    content: " " !important;
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    /* Imagen y tinte exacto */
    background-image: url("https://dcdn-us.mitiendanube.com/stores/007/093/811/themes/rio/2-slide-1767121042328-3932132190-75ee0b67d8e0d7cce6b3424a64802b3b1767121298-480-0.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #8e7468 !important; 
    background-blend-mode: multiply !important;
    /* Efecto Blur y Saturación */
    filter: blur(50px) saturate(180%) !important;
    transform: scale(1.1) !important;
}

/* 2. Ajuste de altura responsivo (Debajo del Header) */
@media (min-width: 992px) {
    body.template-search::before,
    body.template-404::before,
    body.template-account-reset::before {
        top: 140px !important;
        height: calc(100% - 140px) !important;
    }
}

@media (max-width: 991px) {
    body.template-search::before,
    body.template-404::before,
    body.template-account-reset::before {
        top: 120px !important;
        height: calc(100% - 120px) !important;
    }
}

/* 3. Transparencia de contenedores para mostrar el fondo */
body.template-search #main-container,
body.template-404 #main-container,
body.template-account-reset #main-container,
body.template-search .container,
body.template-404 .container,
body.template-account-reset .container,
body.template-search section,
body.template-404 section,
body.template-account-reset section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}






/* =========================================
   ESTILO FINAL KHEMIA: BASE BLANCA + INPUTS DARK
   ========================================= */

/* --- 1. CONTENEDOR PRINCIPAL (Tu Base Intacta) --- */
.template-account-login .page-header, 
.template-account-login .account-page {
    max-width: 600px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    /* Tu estilo original: Blanco translúcido */
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO (Ajuste de soldadura) --- */
.template-account-login .page-header {
    margin-top: 25px !important;
    padding: 50px 40px 0px 40px !important; /* Quitamos padding inferior para pegar */
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    z-index: 2; /* Para que pise al cuerpo */
}

.template-account-login .page-header h1 {
    color: #000000 !important;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
}

.template-account-login .breadcrumbs { display: none !important; }

/* --- 3. CUERPO DEL FORMULARIO --- */
.template-account-login .account-page {
    margin-top: -1px !important; /* TRUCO: Subimos 1px para soldar la grieta */
    padding: 20px 40px 60px 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

.template-account-login .account-page .col-md-6 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* --- 4. INPUTS (EL CAMBIO CLAVE: NEGRO TRANSLÚCIDO) --- */
/* Esto hace que el icono blanco original RESALTE y se vea */
.template-account-login .account-page .form-control {
    width: 100% !important;
    height: 55px;
    
    /* FONDO NEGRO TRANSLÚCIDO (DARK GLASS) */
    background: rgba(0, 0, 0, 0.1) !important; 
    
    /* BORDE SUTIL */
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 12px;
    
    /* TEXTO BLANCO (Para que se lea sobre lo oscuro) */
    color: #000000 !important; 
    font-weight: 500;
    padding-left: 20px;
    padding-right: 50px !important; /* Espacio para que el ojo no tape el texto */
}

/* Texto de ayuda (Placeholder) en GRIS CLARO */
.template-account-login .account-page .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Mantenemos el fondo oscuro cuando Chrome autocompleta */
.template-account-login .account-page .form-control:-webkit-autofill,
.template-account-login .account-page .form-control:-webkit-autofill:hover, 
.template-account-login .account-page .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important; /* Texto blanco */
    transition: background-color 5000s ease-in-out 0s;
}

/* Etiquetas (Email / Contraseña) siguen siendo NEGRAS */
.template-account-login .form-label {
    color: #000000 !important;
    font-weight: 600;
}


/* --- 6. BOTÓN Y ENLACES (Tu base) --- */
.template-account-login .btn-primary {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 280px !important;
    margin: 30px auto 0 auto !important;
    display: block !important;
    height: 55px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
}

.template-account-login .account-page p,
.template-account-login .account-page .text-center,
.template-account-login .btn-link-primary {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-top: 20px !important;
    color: #000000 !important;
}

/* --- 7. RESPONSIVE (SOLUCIÓN IPAD/MÓVIL) --- */
/* Esto evita que se rompa en pantallas pequeñas */
@media (max-width: 900px) {
    .template-account-login .page-header, 
    .template-account-login .account-page {
        max-width: 90% !important; /* Se adapta al 90% de la pantalla */
        width: 90% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .template-account-login .btn-primary {
        width: 100% !important;
        max-width: 100% !important;
    }
}




/* =========================================
   PARCHE FINAL: COLOR NEGRO + ELIMINAR DOBLE OJO
   (Pegar debajo del código base)
   ========================================= */

/* 1. ELIMINAR EL OJO DOBLE DE MICROSOFT (El intruso) */
.template-account-login input[type="password"]::-ms-reveal,
.template-account-login input[type="password"]::-ms-clear {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* 2. PINTAR EL ICONO NATIVO DE NEGRO (Sin moverlo) */
/* Atacamos directamente al SVG para rellenarlo de negro */
.template-account-login .js-password-view svg,
.template-account-login .js-password-view svg path,
.template-account-login .js-password-view i,
.template-account-login .btn-toggle-password svg {
    fill: #000000 !important;     /* Relleno NEGRO */
    stroke: #000000 !important;   /* Líneas NEGRAS */
    color: #000000 !important;    /* Color de fuente NEGRO */
    opacity: 1 !important;        /* Forzamos visibilidad total */
}

/* 3. ASEGURAR QUE EL ICONO NATIVO ESTÉ POR ENCIMA DEL FONDO */
.template-account-login .js-password-view,
.template-account-login .password-toggle {
    z-index: 999 !important;      /* Traer al frente */
    background: transparent !important; /* Quitar cualquier fondo gris raro */
}



/* =========================================
   PARCHE FINAL V2: ICONO MÁS GRANDE Y MÁS ARRIBA
   (Pegar debajo del parche de color negro anterior)
   ========================================= */

/* 1. AJUSTAR POSICIÓN VERTICAL (SUBIRLO) */
/* Atacamos el botón contenedor del icono */
.template-account-login .js-password-view,
.template-account-login .password-toggle,
.template-account-login .btn-toggle-password,
.template-account-login .form-control-icon {
    /* Mantenemos la referencia al 50% superior */
    top: 50% !important;
    /* EL TRUCO: En lugar de -50% (centro exacto), usamos -70% para "tirarlo" hacia arriba */
    /* Si lo quieres MÁS arriba, pon -80%. Si menos, pon -60%. */
    transform: translateY(-20%) !important;
    /* Aseguramos que el contenedor sea suficientemente grande para el nuevo icono */
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 2. AUMENTAR TAMAÑO DEL DIBUJO (MÁS GRANDE) */
/* Atacamos el SVG o la fuente interna */
.template-account-login .js-password-view svg,
.template-account-login .js-password-view i,
.template-account-login .password-toggle svg,
.template-account-login .form-control-icon svg {
    /* Tamaño aumentado a 2px (El estándar suele ser 20px) */
    width: 20px !important;
    height: 20px !important;
    /* Recordatorio de color negro por si acaso */
    fill: #000000 !important;
    color: #000000 !important;
}





/* =========================================
   PARCHE FINAL: TEXTO Y LINK EN LA MISMA LÍNEA
   (Este une la pregunta con el enlace)
   ========================================= */

/* 1. EL PÁRRAFO CONTENEDOR (La frase completa) */
.template-account-login .account-page p.text-center,
.template-account-login .account-page p.mt-3 {
    font-size: 14px !important;       /* Restauramos el tamaño para que se lea la pregunta */
    line-height: normal !important;   /* Altura normal */
    color: #000000 !important;        /* Color negro */
    display: block !important;        /* Bloque para poder centrarlo */
    text-align: center !important;    /* Centrado horizontal */
    margin-top: 20px !important;      /* Separación respecto al botón negro */
}

/* 2. EL ENLACE "CREAR CUENTA" */
.template-account-login .account-page p.text-center a,
.template-account-login .account-page p.mt-3 a {
    display: inline !important;       /* CLAVE: "Inline" hace que se pegue al texto anterior */
    font-weight: 900 !important;      /* Negrita fuerte para destacar */
    font-size: 14px !important;       /* Mismo tamaño que la pregunta */
    color: #000000 !important;        /* Negro */
    text-transform: uppercase;        /* Mayúsculas */
    text-decoration: none !important; /* Sin subrayado (opcional) */
    margin-left: 6px !important;      /* Un pequeño espacio para separarlo de la pregunta */
    padding: 0 !important;            /* Quitamos relleno extra */
}




/* =======================================================
   ESTILO CREAR CUENTA (RÉPLICA EXACTA DEL LOGIN KHEMIA)
   ======================================================= */

/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO --- */
.template-account-register .page-header, 
.template-account-register .account-page {
    max-width: 600px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    /* BASE BLANCA TRANSLÚCIDA */
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO "CREAR CUENTA" (Soldadura Superior) --- */
.template-account-register .page-header {
    margin-top: 25px !important;
    padding: 50px 40px 0px 40px !important; /* Sin padding inferior para pegar */
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    z-index: 2; 
}

.template-account-register .page-header h1 {
    color: #000000 !important;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
}

.template-account-register .breadcrumbs { display: none !important; }

/* --- 3. CUERPO DEL FORMULARIO (Soldadura Inferior) --- */
.template-account-register .account-page {
    margin-top: -1px !important; /* LA SOLDADURA: Sube 1px para tapar la grieta */
    padding: 20px 40px 60px 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

/* Forzar que los campos ocupen todo el ancho (en registro a veces se dividen) */
.template-account-register .account-page .col-md-6 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* --- 4. INPUTS: DARK GLASS (Igual al Login) --- */
.template-account-register .account-page .form-control {
    width: 100% !important;
    height: 55px;
    /* FONDO NEGRO TRANSLÚCIDO */
    background: rgba(0, 0, 0, 0.1) !important; 
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 12px;
    /* TEXTO NEGRO */
    color: #000000 !important; 
    font-weight: 500;
    padding-left: 20px;
    padding-right: 50px !important;
}

/* Placeholder Gris Claro */
.template-account-register .account-page .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Autofill de Chrome */
.template-account-register .account-page .form-control:-webkit-autofill,
.template-account-register .account-page .form-control:-webkit-autofill:hover, 
.template-account-register .account-page .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important; 
    transition: background-color 5000s ease-in-out 0s;
}

/* Etiquetas Negras */
.template-account-register .form-label,
.template-account-register label {
    color: #000000 !important;
    font-weight: 600;
}

/* --- 5. BOTÓN NEGRO Y ENLACES --- */
.template-account-register .btn-primary,
.template-account-register input[type="submit"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 280px !important;
    margin: 30px auto 0 auto !important;
    display: block !important;
    height: 55px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
    cursor: pointer;
}

/* Texto inferior "¿Ya tenés cuenta?" */
.template-account-register .account-page p,
.template-account-register .account-page .text-center {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-top: 20px !important;
    color: #000000 !important;
}

/* --- 6. ARREGLO DE ICONOS (OJO CONTRASEÑA) --- */
/* Eliminamos doble ojo de Microsoft */
.template-account-register input[type="password"]::-ms-reveal,
.template-account-register input[type="password"]::-ms-clear {
    display: none !important;
}

/* Posición y Tamaño del Icono (El ajuste "hacia arriba") */
.template-account-register .js-password-view,
.template-account-register .password-toggle,
.template-account-register .btn-toggle-password {
    top: 50% !important;
    transform: translateY(-20%) !important; /* Tirarlo hacia arriba */
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 999 !important;
    background: transparent !important;
}

/* Pintar el icono de negro */
.template-account-register .js-password-view svg,
.template-account-register .js-password-view i,
.template-account-register .password-toggle svg {
    fill: #000000 !important;
    color: #000000 !important;
    width: 20px !important;
    height: 20px !important;
}

/* --- 7. TEXTO Y LINK EN LA MISMA LÍNEA (FOOTER) --- */
.template-account-register .account-page p.text-center,
.template-account-register .account-page p.mt-3 {
    font-size: 14px !important;
    color: #000000 !important;
    display: block !important;
    text-align: center !important;
}

.template-account-register .account-page p a {
    display: inline !important; /* Pegado al texto */
    font-weight: 900 !important;
    font-size: 14px !important;
    color: #000000 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    margin-left: 6px !important;
}

/* --- 8. AJUSTE RECAPTCHA (Exclusivo de registro) --- */
/* Para que el "No soy un robot" no rompa el diseño */
.template-account-register .g-recaptcha,
.template-account-register iframe[title="reCAPTCHA"] {
    display: block !important;
    margin: 20px auto !important; /* Centrado */
}

/* --- 9. RESPONSIVE --- */
@media (max-width: 900px) {
    .template-account-register .page-header, 
    .template-account-register .account-page {
        max-width: 90% !important;
        width: 90% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .template-account-register .btn-primary {
        width: 100% !important;
    }
}




/* =========================================
   CORRECCIÓN: TEXTOS DE EJEMPLO (PLACEHOLDER) EN NEGRO
   ========================================= */

.template-account-register .account-page .form-control::placeholder {
    /* Cambiamos de blanco a NEGRO */
    color: #000000 !important; 
    
    /* Ajustamos la opacidad para que se note que es un ejemplo y no texto escrito */
    opacity: 0.6 !important; 
    font-weight: 500 !important;
}

/* Soporte para navegadores específicos (por seguridad) */
.template-account-register .account-page .form-control::-webkit-input-placeholder {
    color: #000000 !important;
    opacity: 0.6 !important;
}

.template-account-register .account-page .form-control::-moz-placeholder {
    color: #000000 !important;
    opacity: 0.6 !important;
}



/* =========================================
   AJUSTE FINAL: CONTENEDOR MÁS ANCHO
   ========================================= */

.template-account-register .page-header, 
.template-account-register .account-page {
    /* Aumentamos de 600px a 850px para darle más aire */
    max-width: 850px !important; 
}


/* =========================================
   AJUSTE DE ESPACIO: SEPARAR RECAPTCHA
   ========================================= */

.template-account-register .g-recaptcha,
.template-account-register iframe[title="reCAPTCHA"] {
    /* Aumentamos a 50px (o el valor que prefieras) para despegarlo bien */
    margin-top: 30px !important; 
    
    /* Mantenemos el margen inferior para separar del botón */
    margin-bottom: 30px !important; 
    
    /* Aseguramos que siga centrado */
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}



/* =======================================================
   ESTILO CONTACTO (CORREGIDO: NO TOCA EL BUSCADOR)
   ======================================================= */

/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO --- */
.template-contact .page-header, 
.template-contact .contact-page {
    max-width: 850px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO "CONTACTO" --- */
.template-contact .page-header {
    margin-top: 25px !important;
    padding: 50px 40px 0px 40px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    z-index: 2; 
}

.template-contact .page-header h1 {
    color: #000000 !important;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
}

.template-contact .breadcrumbs { display: none !important; }

/* --- 3. CUERPO DEL FORMULARIO --- */
.template-contact .contact-page {
    margin-top: -1px !important;
    padding: 20px 40px 60px 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

/* Ocultar columna lateral y expandir formulario */
.template-contact .row .col-md-3 { display: none !important; }
.template-contact .row .col-md-6 { 
    flex: 0 0 100% !important; 
    max-width: 100% !important; 
}

/* --- 4. INPUTS ESPECÍFICOS DEL FORMULARIO (CLAVE DEL ARREGLO) --- */
/* Aquí usamos #contact-form para que NO toque el buscador */
#contact-form .form-control {
    width: 100% !important;
    height: 55px;
    background: rgba(0, 0, 0, 0.1) !important; /* Fondo oscuro */
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 12px;
    color: #000000 !important;
    font-weight: 500;
    padding-left: 20px;
}

#contact-form textarea.form-control {
    height: 150px !important;
    padding-top: 15px;
}

/* Placeholder Negro solo para el formulario */
#contact-form .form-control::placeholder {
    color: #000000 !important;
    opacity: 0.6 !important;
}

/* Etiquetas Negras */
#contact-form .form-label,
#contact-form label {
    color: #000000 !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 8px;
    display: block;
}

/* --- 5. BOTÓN ENVIAR --- */
#contact-form .btn-primary {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    height: 55px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
    margin-top: 10px;
}

/* --- 6. SEPARACIÓN DEL RECAPTCHA --- */
.template-contact .g-recaptcha,
.template-contact iframe[title="reCAPTCHA"] {
    margin-top: 40px !important; /* Separación superior */
    margin-bottom: 25px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- 7. RESPONSIVE --- */
@media (max-width: 900px) {
    .template-contact .page-header, 
    .template-contact .contact-page {
        max-width: 90% !important;
        width: 90% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}



/* =========================================
   AJUSTE FINAL: ACHICAR ETIQUETAS DEL FORMULARIO
   ========================================= */

#contact-form .form-label,
#contact-form label {
    /* Cambiamos el tamaño a 11px (antes era 12px) */
    font-size: 11px !important;

    /* Mantenemos el resto de los estilos para que sigan elegantes */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}




/* =========================================
   FONDO PARA MI CUENTA Y MIS DATOS
   ========================================= */

/* 1. Aplicar el fondo a las páginas de órdenes e información personal */
body.template-account-orders::before,
body.template-account-info::before {
    content: " " !important;
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    /* Misma imagen y color base que en Contacto/Login */
    background-image: url("https://dcdn-us.mitiendanube.com/stores/007/093/811/themes/rio/2-slide-1767121042328-3932132190-75ee0b67d8e0d7cce6b3424a64802b3b1767121298-480-0.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #8e7468 !important; 
    background-blend-mode: multiply !important;
    /* Efectos visuales de desenfoque y saturación */
    filter: blur(50px) saturate(180%) !important;
    transform: scale(1.1) !important;
}

/* 2. Ajuste de altura responsivo (Debajo del Header) */
@media (min-width: 992px) {
    body.template-account-orders::before,
    body.template-account-info::before {
        top: 140px !important;
        height: calc(100% - 140px) !important;
    }
}

@media (max-width: 991px) {
    body.template-account-orders::before,
    body.template-account-info::before {
        top: 120px !important;
        height: calc(100% - 120px) !important;
    }
}

/* 3. Limpiar fondos sólidos y bordes para revelar el diseño */
body.template-account-orders #main-container,
body.template-account-info #main-container,
body.template-account-orders .container,
body.template-account-info .container,
body.template-account-orders section,
body.template-account-info section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. Estilo de los textos para asegurar legibilidad sobre el fondo */
body.template-account-orders h1, 
body.template-account-info h1,
body.template-account-orders h2,
body.template-account-orders h3,
body.template-account-orders .btn-link,
body.template-account-info .form-label {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}








/* =======================================================
   ESTILO MIS DATOS (RÉPLICA DE LA CAJA DE CONTACTO)
   - Actualizado: Sin sombras en textos negros
   ======================================================= */

/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO --- */
.template-account-info .page-header, 
.template-account-info .account-page {
    max-width: 850px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    /* BASE BLANCA TRANSLÚCIDA CON DESENFOQUE */
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO "MIS DATOS" (Unión Superior) --- */
.template-account-info .page-header {
    margin-top: 25px !important;
    padding: 50px 40px 0px 40px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    z-index: 2; 
}

.template-account-info .page-header h1 {
    color: #000000 !important;
    text-shadow: none !important; /* <--- CORRECCIÓN: QUITA SOMBRA */
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
}

/* --- 3. CUERPO DEL FORMULARIO (Unión Inferior) --- */
.template-account-info .account-page {
    margin-top: -1px !important; /* Soldadura visual */
    padding: 20px 40px 60px 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

/* Centrado del formulario interno */
.template-account-info .row .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* --- 4. INPUTS: DARK GLASS (Estilo Contacto) --- */
#info-form .form-control {
    width: 100% !important;
    height: 55px;
    background: rgba(0, 0, 0, 0.1) !important; /* Fondo oscuro sutil */
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 12px;
    color: #000000 !important;
    font-weight: 500;
    padding-left: 20px;
}

/* Etiquetas (Labels) pequeñas y elegantes */
#info-form .form-label,
#info-form label {
    color: #000000 !important;
    text-shadow: none !important; /* <--- CORRECCIÓN: QUITA SOMBRA */
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px;
    display: block;
}

/* --- 5. BOTÓN GUARDAR CAMBIOS --- */
#info-form .btn-primary {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    height: 55px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
    margin-top: 20px;
    cursor: pointer;
}

/* --- 6. LINK INFERIOR (Cambiar contraseña) --- */
.template-account-info .account-page a {
    color: #000000 !important;
    text-shadow: none !important; /* <--- CORRECCIÓN: QUITA SOMBRA */
    text-align: center !important;
    display: block !important;
    margin-top: 20px !important;
    font-weight: 600;
}

/* --- 7. RESPONSIVE --- */
@media (max-width: 900px) {
    .template-account-info .page-header, 
    .template-account-info .account-page {
        max-width: 95% !important;
        width: 95% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}










/* =======================================================
   ESTILO MI CUENTA (RÉPLICA EXACTA DE MIS DATOS)
   ======================================================= */

/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO --- */
.template-account-orders .page-header, 
.template-account-orders .account-page {
    max-width: 850px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    /* BASE BLANCA TRANSLÚCIDA CON DESENFOQUE */
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO "MI CUENTA" (Unión Superior) --- */
.template-account-orders .page-header {
    margin-top: 25px !important;
    padding: 50px 40px 0px 40px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    z-index: 2; 
}

.template-account-orders .page-header h1 {
    color: #000000 !important;
    text-shadow: none !important; /* Sin sombra */
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
}

/* --- 3. CUERPO DE LA PÁGINA (Unión Inferior) --- */
.template-account-orders .account-page {
    margin-top: -1px !important; /* Soldadura visual */
    padding: 20px 40px 60px 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

/* --- 4. CORRECCIÓN DE TEXTOS A NEGRO (MUY IMPORTANTE) --- */
/* Forzamos que todo el texto dentro de la caja sea negro y sin sombra */
.template-account-orders .account-page,
.template-account-orders .account-page h4,
.template-account-orders .account-page p,
.template-account-orders .account-page div,
.template-account-orders .account-page span,
.template-account-orders .account-page a {
    color: #000000 !important;
    text-shadow: none !important;
}

/* Estilo para los títulos de secciones internas (Datos Personales / Órdenes) */
.template-account-orders h4 {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    padding-bottom: 10px !important;
}

/* --- 5. BOTONES Y ENLACES --- */

/* Botón "Cerrar Sesión" -> Estilo Botón Negro */
.template-account-orders .account-page a[href*="logout"],
.template-account-orders .btn-primary {
    display: inline-block !important;
    background-color: #000000 !important;
    color: #ffffff !important; /* Texto blanco dentro del botón */
    border-radius: 12px !important;
    padding: 10px 25px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: none !important;
    margin-top: 10px !important;
    font-size: 12px !important;
}

/* El enlace "Editar" pequeño */
.template-account-orders .account-page a[href*="info"] {
    text-decoration: underline !important;
    font-size: 12px !important;
    opacity: 0.7 !important;
}

/* --- 6. RESPONSIVE --- */
@media (max-width: 900px) {
    .template-account-orders .page-header, 
    .template-account-orders .account-page {
        max-width: 95% !important;
        width: 95% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/* =========================================
   AJUSTES FINALES: MI CUENTA (ICONOS Y BOTONES)
   ========================================= */

/* 1. ICONO DE BOLSA DE COMPRAS (Sólido y Negro) */
.template-account-orders .account-page svg.svg-icon-primary,
.template-account-orders .account-page .icon-inline svg {
    fill: #000000 !important;
    color: #000000 !important;
    opacity: 1 !important; /* Quita cualquier transparencia */
}

/* 2. LÍNEA DIVISORIA (Negra) */
.template-account-orders .divider {
    background-color: #000000 !important;
    border-color: #000000 !important;
    opacity: 1 !important; /* Para que se vea bien negra */
}

/* 3. BOTÓN "IR A LA TIENDA" (Texto Blanco) */
/* Sobreescribimos la regla general que ponía todos los links en negro */
.template-account-orders .account-page a.btn-primary {
    color: #ffffff !important; 
    background-color: #000000 !important; /* Fondo negro */
    border: 1px solid #000000 !important;
}

/* Efecto Hover para el botón (Opcional: para que se note que es clickeable) */
.template-account-orders .account-page a.btn-primary:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}






/* =======================================================
   ESTILO CAMBIAR CONTRASEÑA (VERSIÓN COMPACTA Y CENTRADA)
   ======================================================= */

/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO (MÁS CHICO) --- */
.template-account-reset .page-header, 
.template-account-reset .account-page {
    /* CAMBIO CLAVE: De 850px a 550px para que sea una cajita compacta */
    max-width: 550px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO (CABECERA) --- */
.template-account-reset .page-header {
    margin-top: 60px !important; /* Más abajo para centrar en pantalla */
    padding-top: 35px !important; /* Menos aire arriba */
    padding-bottom: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    z-index: 2; 
}

.template-account-reset .page-header h1 {
    color: #000000 !important;
    text-shadow: none !important;
    font-size: 24px !important; /* Fuente un poco más chica acorde a la caja */
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
    margin: 0 !important;
}

/* --- 3. CUERPO DEL FORMULARIO --- */
.template-account-reset .account-page {
    margin-top: -1px !important;
    /* Rellenos reducidos para compactar la caja */
    padding: 15px 30px 35px 30px !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

/* --- 4. CENTRADO TOTAL DE ELEMENTOS --- */
/* Forzamos que la grilla de Tienda Nube centre la columna */
.template-account-reset .account-page .row {
    display: flex !important;
    justify-content: center !important;
}

.template-account-reset .account-page div[class*="col"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* --- 5. TEXTOS Y ETIQUETAS CENTRADAS --- */
.template-account-reset .account-page p {
    color: #000000 !important;
    text-shadow: none !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    font-size: 13px !important;
}

.template-account-reset .account-page .form-label,
.template-account-reset .account-page label {
    color: #000000 !important;
    text-shadow: none !important;
    text-align: center !important; /* Centrado */
    width: 100% !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px;
}

/* --- 6. INPUTS (SOLO DENTRO DE LA CAJA) --- */
.template-account-reset .account-page .form-control {
    width: 100% !important;
    height: 45px !important; /* Input más fino */
    background: rgba(0, 0, 0, 0.1) !important; 
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 12px;
    color: #000000 !important;
    font-weight: 500;
    padding-left: 0 !important; /* Sin padding izq porque centramos el texto */
    text-align: center !important; /* Texto centrado al escribir */
}

/* Placeholder Negro Centrado */
.template-account-reset .account-page .form-control::placeholder {
    color: #000000 !important;
    opacity: 0.6 !important;
    text-align: center !important;
}

/* --- 7. BOTÓN Y RECAPTCHA CENTRADOS --- */
.template-account-reset .account-page .btn-primary,
.template-account-reset .account-page input[type="submit"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important; /* Ocupa el ancho de la caja compacta */
    display: block !important;
    margin: 15px auto 0 auto !important;
    height: 45px !important;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
    cursor: pointer;
}

.template-account-reset .g-recaptcha,
.template-account-reset iframe[title="reCAPTCHA"] {
    display: block !important;
    margin: 20px auto !important;
}

/* --- 8. RESPONSIVE --- */
@media (max-width: 900px) {
    .template-account-reset .page-header, 
    .template-account-reset .account-page {
        max-width: 90% !important; /* En celular ocupa el 90% */
        width: 90% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}




/* =======================================================
   ESTILO DIRECCIONES (FINAL: TEXTOS DE AYUDA NEGROS)
   ======================================================= */

/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO --- */
body.template-account-address .page-header, 
body.template-account-address .account-page,
body.template-account-addresses .page-header, 
body.template-account-addresses .account-page {
    max-width: 800px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO "DIRECCIÓN" --- */
.template-account-address .page-header,
.template-account-addresses .page-header {
    margin-top: 25px !important; 
    padding: 50px 40px 0px 40px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    z-index: 2; 
}

.template-account-address .page-header h1,
.template-account-addresses .page-header h1 {
    color: #000000 !important;
    text-shadow: none !important; 
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
}

/* --- 3. CUERPO DEL FORMULARIO --- */
.template-account-address .account-page,
.template-account-addresses .account-page {
    margin-top: -1px !important; 
    padding: 20px 40px 50px 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

/* --- 3.5. CORRECCIÓN: ANCHO COMPLETO Y RESET DE MÁRGENES --- */
.template-account-address .account-page .row,
.template-account-address .account-page div[class*="col"],
.template-account-address .account-page form {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    
    /* Esto elimina el espaciado interno */
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    /* ESTO ES LO QUE ARREGLA LA ASIMETRÍA */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --- 4. ETIQUETAS Y TEXTOS --- */
.template-account-address .account-page label,
.template-account-address .account-page .form-label {
    color: #000000 !important;
    text-shadow: none !important;
    text-align: left !important;
    width: 100% !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px;
}

/* --- 5. INPUTS: DARK GLASS --- */
.template-account-address .account-page .form-control,
.template-account-address .account-page select {
    width: 100% !important;
    height: 50px;
    background: rgba(0, 0, 0, 0.1) !important; 
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 12px;
    color: #000000 !important; /* Color de lo que escribe el usuario */
    font-weight: 500;
    text-align: left !important;
    padding-left: 15px !important;
}

/* --- 5.5. TEXTOS DE AYUDA (PLACEHOLDERS) EN NEGRO --- */
/* Aquí está el cambio: forzamos el color negro y ajustamos la opacidad */
.template-account-address .account-page .form-control::placeholder,
.template-account-address .account-page input::placeholder {
    color: #000000 !important;
    opacity: 0.7 !important; /* Un poco transparente para diferenciarlo, pero bien negro */
    font-weight: 500 !important;
}

/* Para navegadores específicos (asegura compatibilidad) */
.template-account-address .account-page .form-control::-webkit-input-placeholder {
    color: #000000 !important;
    opacity: 0.7 !important;
}
.template-account-address .account-page .form-control::-moz-placeholder {
    color: #000000 !important;
    opacity: 0.7 !important;
}

/* --- 6. BOTÓN "GUARDAR" --- */
.template-account-address .account-page .btn-primary,
.template-account-address .account-page input[type="submit"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    height: 50px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
    margin: 20px auto 0 auto !important;
    cursor: pointer;
    display: block !important;
}

/* --- 7. RESPONSIVE --- */
@media (max-width: 900px) {
    .template-account-address .page-header, 
    .template-account-address .account-page {
        max-width: 90% !important;
        width: 90% !important;
    }
}


/* =======================================================
   SOLUCIÓN DEFINITIVA: LISTA DE DIRECCIONES
   (Texto Negro + Orden Vertical)
   ======================================================= */

/* 1. CANDADO DE SEGURIDAD: Solo afecta a la lista de direcciones */
body.template-account-addresses .account-page,
body.template-account-addresses .account-page h1,
body.template-account-addresses .account-page h2,
body.template-account-addresses .account-page h3,
body.template-account-addresses .account-page h4,
body.template-account-addresses .account-page h5, /* Título 'Principal' */
body.template-account-addresses .account-page h6, /* Nombre del cliente */
body.template-account-addresses .account-page p,  /* Dirección */
body.template-account-addresses .account-page span,
body.template-account-addresses .account-page div,
body.template-account-addresses .account-page strong {
    color: #000000 !important;
    text-shadow: none !important;
    text-align: left !important;
}

/* 2. ENLACES (Editar / Borrar) */
body.template-account-addresses .account-page a {
    color: #000000 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* 3. SOLUCIÓN DE DISEÑO (Para que no se amontonen) */
/* Obligamos a que cada bloque de dirección ocupe todo el ancho */
body.template-account-addresses .account-page .col-md-4,
body.template-account-addresses .account-page .col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 30px !important; /* Espacio entre Principal y Otras */
}

/* 4. TARJETAS DE DIRECCIÓN (Opcional: un borde suave para separar) */
body.template-account-addresses .address-item, 
body.template-account-addresses .account-page .col-md-4 > div {
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    padding-bottom: 20px !important;
}


/* =======================================================
   TOQUE FINAL: LÍNEAS DIVISORIAS NEGRAS
   (Solo en Mis Direcciones)
   ======================================================= */

body.template-account-addresses .divider,
body.template-account-addresses hr {
    background-color: #000000 !important; /* Color Negro Puro */
    border-color: #000000 !important;
    opacity: 1 !important; /* Quitamos transparencia para que se vean sólidas */
    height: 1px !important; /* Aseguramos que tengan grosor visible */
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    display: block !important;
    width: 100% !important;
}




/* =======================================================
   ELIMINAR LÍNEAS GRISES (MIS DIRECCIONES)
   ======================================================= */

/* 1. Quitar bordes a los bloques de dirección */
body.template-account-addresses .address-item,
body.template-account-addresses .account-page .col-md-4 > div,
body.template-account-addresses .account-page .col-12 > div {
    border: none !important;
    border-bottom: none !important; /* Asegura que la línea de abajo desaparezca */
    box-shadow: none !important;
}




/* =========================================
   CORRECCIÓN: ALERTA DE VALIDACIÓN (TEXTO E ICONO NEGRO)
   Solo afecta al cuadro de "Estás a un paso..." en Registro
   ========================================= */

/* 1. El Marco (Borde) y el color base */
body.template-account-register .js-account-validation-pending {
    border: 1px solid #000000 !important; /* Marco Negro */
    color: #000000 !important;            /* Texto general negro */
    background: rgba(0,0,0,0.05) !important; /* Un gris muy sutil de fondo para separarlo */
}

/* 2. El Título (h5) y el Texto (p) específicos de esa caja */
body.template-account-register .js-account-validation-pending h5,
body.template-account-register .js-account-validation-pending p {
    color: #000000 !important;
    text-shadow: none !important;
}

/* 3. El Icono del sobre (SVG) */
body.template-account-register .js-account-validation-pending svg,
body.template-account-register .js-account-validation-pending svg path,
body.template-account-register .js-account-validation-pending .icon-inline {
    fill: #000000 !important;
    stroke: #000000 !important;
    color: #000000 !important;
}




/* =========================================
   CORRECCIÓN: ENLACE "ENVIAR LINK DE NUEVO"
   Lo pone en Negro Puro y Negrita para resaltar
   ========================================= */
body.template-account-register .js-resend-validation-link {
    color: #000000 !important;       /* Color Negro Puro */
    font-weight: 900 !important;     /* Negrita Fuerte (Bold) */
    text-decoration: underline !important; /* Subrayado para reforzar que es un link */
    cursor: pointer !important;      /* Asegura que aparezca la manito */
}

/* Opcional: Efecto al pasar el mouse (Hover) */
body.template-account-register .js-resend-validation-link:hover {
    color: #333333 !important;       /* Un gris muy oscuro al pasar el mouse */
    opacity: 0.8 !important;
}



/* =========================================
   CORRECCIÓN: ALERTA DE ÉXITO (LOGIN)
   "Tu cuenta fue creada con éxito" en Negro
   ========================================= */

/* 1. Contenedor General (Borde y Fondo) */
body.template-account-login .js-account-validation-success,
body.template-account-login .alert-success {
    color: #000000 !important;              /* Texto base negro */
    border: 1px solid #000000 !important;   /* Marco Negro */
    background: rgba(0,0,0,0.05) !important; /* Fondo gris muy sutil */
}

/* 2. El Texto específico del mensaje */
body.template-account-login .js-account-validation-success p,
body.template-account-login .alert-success p {
    color: #000000 !important;
    text-shadow: none !important;
    font-weight: 600 !important; /* Un poco más de peso para que se lea bien */
}

/* 3. El Ícono del Check (que suele ser un elemento ::before) */
body.template-account-login .js-account-validation-success::before,
body.template-account-login .alert-success::before {
    color: #000000 !important; /* Esto pinta el check de negro */
    font-weight: bold !important;
}









/* =======================================================

   ESTILO DETALLE DE PEDIDO (RÉPLICA DE MI CUENTA)

   ======================================================= */



/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO --- */

body.template-account-order .page-header, 

body.template-account-order .account-page {

    max-width: 1300px !important; 

    margin-left: auto !important;

    margin-right: auto !important;

    /* BASE BLANCA TRANSLÚCIDA CON DESENFOQUE */

    background: rgba(255, 255, 255, 0.75) !important; 

    backdrop-filter: blur(20px) saturate(160%);

    -webkit-backdrop-filter: blur(20px) saturate(160%);

    border-left: 1px solid rgba(255, 255, 255, 0.5);

    border-right: 1px solid rgba(255, 255, 255, 0.5);

    position: relative;

}



/* --- 2. TÍTULO "ORDEN #..." (Unión Superior) --- */

body.template-account-order .page-header {

    margin-top: 25px !important;

    padding: 50px 40px 0px 40px !important;

    border-top: 1px solid rgba(255, 255, 255, 0.6);

    border-top-left-radius: 30px;

    border-top-right-radius: 30px;

    margin-bottom: 0 !important;

    padding-bottom: 0 !important;

    border-bottom: none !important;

    text-align: center !important;

    z-index: 2; 

}



body.template-account-order .page-header h1 {

    color: #000000 !important;

    text-shadow: none !important;

    font-size: 28px;

    font-weight: 700;

    text-transform: uppercase;

    text-align: center !important;

    letter-spacing: 1px;

}



/* --- 3. CUERPO DE LA PÁGINA (Unión Inferior) --- */

body.template-account-order .account-page {

    margin-top: -1px !important; /* Soldadura visual */

    padding: 20px 40px 60px 40px !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.5);

    border-bottom-left-radius: 30px;

    border-bottom-right-radius: 30px;

    margin-bottom: 80px !important;

    border-top: none !important;

    z-index: 1;

}



/* --- 4. CORRECCIÓN DE TODOS LOS TEXTOS A NEGRO --- */

/* Forzamos negro en títulos, párrafos, tabla y celdas */

body.template-account-order .account-page,

body.template-account-order .account-page h2,

body.template-account-order .account-page h3,

body.template-account-order .account-page h4,

body.template-account-order .account-page p,

body.template-account-order .account-page div,

body.template-account-order .account-page span,

body.template-account-order .account-page strong,

body.template-account-order .account-page small,

body.template-account-order .table td,

body.template-account-order .table th {

    color: #000000 !important;

    text-shadow: none !important;

}



/* Títulos internos (Detalles, Producto, Total) */

body.template-account-order .subtitle,

body.template-account-order .table thead th {

    font-weight: 800 !important;

    text-transform: uppercase !important;

    font-size: 13px !important;

    border-bottom: 1px solid #000000 !important; /* Línea separadora negra */

    color: #000000 !important;

    opacity: 1 !important;

}



/* Líneas de la tabla */

body.template-account-order .table td {

    border-top: 1px solid rgba(0,0,0,0.1) !important;

}



/* --- 5. ICONOS DE PAGO Y ENVÍO --- */

/* Forzamos que los iconos SVG (tarjeta, camión) sean negros */

body.template-account-order .account-page svg, 

body.template-account-order .account-page i {

    fill: #000000 !important;

    color: #000000 !important;

}



/* --- 6. BOTÓN "REALIZAR EL PAGO" --- */

body.template-account-order .account-page .btn-primary {

    background-color: #000000 !important;

    color: #ffffff !important; /* Texto Blanco */

    border-radius: 12px !important;

    font-weight: 700 !important;

    text-transform: uppercase !important;

    border: none !important;

    margin-top: 15px !important;

    display: block !important;

    width: 100% !important;

}



/* --- 7. RESPONSIVE --- */

@media (max-width: 900px) {

    body.template-account-order .page-header, 

    body.template-account-order .account-page {

        max-width: 95% !important;

        width: 95% !important;

        padding-left: 20px !important;

        padding-right: 20px !important;

    }

}















/* =========================================

   AJUSTES FINALES: DETALLE DE ORDEN

   ========================================= */



/* 1. TÍTULO "ORDEN #..." A LA IZQUIERDA */

body.template-account-order .page-header,

body.template-account-order .page-header h1 {

    text-align: left !important;

    justify-content: flex-start !important;

}





/* 2. LÍNEAS DIVISORIAS TRANSPARENTES (MANTIENEN EL ESPACIO) */

/* Hacemos que existan pero sean invisibles */

body.template-account-order .divider,

body.template-account-order hr {

    background-color: transparent !important; /* Sin color de fondo */

    border-color: transparent !important;     /* Sin bordes de color */

    opacity: 0 !important;                    /* Totalmente invisible */

    

    /* Esto asegura que el espacio se mantenga */

    display: block !important;

    height: 1px !important; 

    width: 100% !important;

}









/* --- 1. LIMPIEZA DE CONTENEDORES (Elimina línea bajo el botón) --- */
body.template-account-order .account-page .col-md-4.subtitle,
body.template-account-order .account-page .col-md-8.subtitle {
    border-bottom: none !important;
}

/* --- 2. LÍNEA EN "DETALLES" (Izquierda) --- */
body.template-account-order .account-page .col-md-4 .subtitle {
    border-bottom: 1px solid #000000 !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

/* --- 3. LÍNEA EN "PRODUCTO" (Derecha) --- */
/* Solo aplicamos la línea a los títulos existentes, manteniendo su visibilidad original */
body.template-account-order .account-page .col-md-8 .subtitle {
    border-bottom: 1px solid #000000 !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    /* Eliminamos el display: block que causaba el solapamiento */
}

/* --- 4. DIVISORES DE PRODUCTOS (Ya te funcionaban) --- */
body.template-account-order .account-page .order-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.4) !important;
    padding-bottom: 25px !important;
    margin-bottom: 10px !important;
    display: block !important;
    width: 100% !important;
}

/* Evitamos la línea al final del último producto */
body.template-account-order .account-page .order-item:last-of-type {
    border-bottom: none !important;
}





/* --- FIX: ELIMINAR DOBLE "PRODUCTO" EN RANGO INTERMEDIO --- */

/* 1. Ocultamos el título de "Productos" (plural/móvil) en pantallas mayores a 768px */
@media (min-width: 768px) {
    body.template-account-order .account-page .col-md-8 div.subtitle.d-lg-none,
    body.template-account-order .account-page .col-md-8 div.subtitle.d-md-block {
        display: none !important;
    }
}

/* 2. Aseguramos que el título de escritorio mantenga su estilo de línea */
/* (Este es el que dice "PRODUCTO" dentro de la estructura de tabla/lista) */
body.template-account-order .account-page .col-md-8 .d-none.d-md-block.subtitle,
body.template-account-order .account-page .order-detail thead th {
    border-bottom: 1px solid #000000 !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* 3. Ajuste para Mobile (Debajo de 768px) */
@media (max-width: 767px) {
    /* Aquí permitimos que se vea el título móvil y le damos el estilo de Khemia */
    body.template-account-order .account-page .col-md-8 div.subtitle.d-lg-none {
        display: block !important;
        border-bottom: 1px solid #000000 !important;
        margin-top: 30px !important; /* Espacio extra para que no se pegue a Detalles */
    }
}






/* 1. Forzar color blanco en el contenedor principal y textos básicos */
.account-page .card-header-collapse,
.account-page .card-header-collapse p,
.account-page .card-header-collapse small {
    color: #FFFFFF !important;
}

/* 2. Asegurar que los enlaces (el número de orden como #114) también sean blancos */
.account-page .card-header-collapse a.btn-link-primary {
    color: #FFFFFF !important;
    text-decoration: none; /* Opcional: quita el subrayado si lo tiene por defecto */
    transition: color 0.3s ease; /* Transición suave para el hover */
}

/* 3. Efecto Hover: Cambiar a un gris muy claro al pasar el mouse por el enlace (UX Pro) */
.account-page .card-header-collapse a.btn-link-primary:hover {
    color: #E0E0E0 !important; 
}

/* 4. Cambiar el color del ícono de la flecha (si es un font-icon o SVG) */
.account-page .card-header-collapse .card-collapse-toggle,
.account-page .card-header-collapse svg,
.account-page .card-header-collapse svg path {
    color: #FFFFFF !important;
    fill: #FFFFFF !important; 
}



/* 1. Forzar a blanco los párrafos, los span (Pendiente) y los strong (Total, No enviado) */
.account-page .js-card-collapse .card-body p,
.account-page .js-card-collapse .card-body p span,
.account-page .js-card-collapse .card-body p strong,
.account-page .js-card-collapse .card-body h4,
.account-page .js-card-collapse .card-body h4 strong {
    color: #FFFFFF !important;
}

/* 2. Forzar a blanco el enlace de "Ver detalle >" */
.account-page .js-card-collapse .card-body a.btn-link-primary {
    color: #FFFFFF !important;
}

/* Efecto hover para el enlace (opcional pero recomendado) */
.account-page .js-card-collapse .card-body a.btn-link-primary:hover {
    color: #CCCCCC !important;
}

/* 3. Forzar a blanco los iconos SVG (las cajitas al lado de Pago y Envío) */
.account-page .js-card-collapse .card-body p svg,
.account-page .js-card-collapse .card-body p svg path {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}




/* 1. Ocultar completamente la columna de la imagen y la cantidad */
.account-page .js-card-collapse .card-body .row > .col-5 {
    display: none !important;
}

/* 2. Expandir la columna de texto para que ocupe todo el ancho disponible */
.account-page .js-card-collapse .card-body .row > .col-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important; 
}






/* ==========================================================
   CONTRASTE EXCLUSIVO: BOTÓN "SEGUÍ TU ENVÍO"
   (Caja blanca, letras negras)
   ========================================================== */

/* Targeteamos el botón primario dentro del footer de la tarjeta de pedido */
.account-page .js-card-collapse .card-footer .btn-primary {
    /* 1. Fondo blanco para la caja del botón */
    background-color: #FFFFFF !important;
    
    /* 2. Letras negras para el contraste */
    color: #000000 !important;
    
    /* 3. Ajustes de estilo para asegurar que se vea perfecto */
    border: 2px solid #000000 !important; /* Borde negro sutil opcional para definirlo bien */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-shadow: none !important; /* Eliminamos sombras de texto previas */
    transition: all 0.3s ease !important;
}

/* 4. Efecto Hover para mejorar la experiencia de usuario */
.account-page .js-card-collapse .card-footer .btn-primary:hover {
    background-color: #F0F0F0 !important; /* Gris muy claro al pasar el mouse */
    color: #000000 !important;
    border-color: #000000 !important;
}





/* Apunta específicamente al botón de cerrar la notificación de cookies */
.js-notification-close.btn-secondary {
    background-color: #ffffff !important; /* Fondo blanco */
    color: #000000 !important;            /* Texto negro */
    border: 1px solid #ffffff !important; /* Borde blanco para mayor definición */
    opacity: 1 !important;                /* Asegura que no sea transparente */
    padding: 5px 15px !important;         /* Ajusta el espacio interno */
    text-transform: uppercase;            /* Opcional: para que resalte más */
    font-weight: bold;                    /* Opcional: texto en negrita */
}

/* Efecto al pasar el mouse para que el usuario sepa que es clickeable */
.js-notification-close.btn-secondary:hover {
    background-color: #eeeeee !important; /* Gris muy claro al pasar el mouse */
    color: #000000 !important;
}




/* 1. Asegurar que la fila principal centre geométricamente */
.account-page .js-card-header-collapse > .row {
    display: flex !important;
    align-items: center !important;
}

/* 2. Normalizar la Orden (Izquierda): quitar espacios ocultos */
.account-page .js-card-header-collapse .col a.btn-link-primary {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 13px !important; /* Fijamos el tamaño */
    display: inline-block !important;
}

/* 3. Normalizar la Fecha (Derecha): Igualar el tamaño con la Orden */
.account-page .js-card-header-collapse .col.text-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.account-page .js-card-header-collapse .col.text-right p.m-0,
.account-page .js-card-header-collapse .col.text-right p.m-0 small {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 13px !important; /* Clave: obligamos a que la fecha sea del mismo tamaño que la orden */
    display: inline-block !important;
}





/* 1. Forzar visibilidad del ícono/enlace principal SOLO de la cuenta */
.utilities-container a.js-login {
    display: inline-block !important;
}

/* 2. Forzar visibilidad SOLO del texto de "Mi cuenta" (esto deja oculto el texto de Buscar) */
.utilities-container a.js-login span.utilities-text {
    display: inline-block !important;
}

/* 3. Asegurar que los elementos se alineen bien al forzar su aparición */
.utilities-container {
    display: flex !important;
    align-items: center !important;
}









/* ==========================================================
   FIX DEFINITIVO Y AISLADO: ICONO "MI CUENTA"
   ========================================================== */

/* 1. Aseguramos que el contenedor general se alinee bien */
body.customer-logged-in .utilities-container {
    display: flex !important;
    align-items: center !important;
}

/* 2. Targeteamos EXCLUSIVAMENTE el enlace directo de cuenta para el círculo.
      Al usar [href*="/account"], evitamos romper el menú hamburguesa o el buscador. */
body.customer-logged-in .utilities-container > a[href*="/account"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin-right: 10px !important;
    
    /* El icono SVG del usuario */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 22px 22px !important;

    /* Estilo Glassmorphism (Círculo difuminado) */
    background-color: rgba(255, 255, 255, .15) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1) !important;
    border-radius: 50% !important;
    transition: .3s !important;
}

/* Ocultamos cualquier basura nativa (SVGs viejos) SOLO de este botón */
body.customer-logged-in .utilities-container > a[href*="/account"] svg,
body.customer-logged-in .utilities-container > a[href*="/account"] i {
    display: none !important;
}

/* Efecto hover EXCLUSIVO para este botón */
body.customer-logged-in .utilities-container > a[href*="/account"]:hover {
    background-color: rgba(255, 255, 255, .3) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .2) !important;
}

/* 3. Limpiamos cualquier icono extra en el texto para no duplicar */
body.customer-logged-in .utilities-container .utilities-text a[href*="/account"]::before {
    display: none !important;
}

/* 4. Forzamos a que el texto "Mi cuenta" no desaparezca en responsive (Tablet) */
body.customer-logged-in .utilities-container .utilities-text {
    display: inline-block !important;
    visibility: visible !important;
}

body.customer-logged-in .utilities-container .utilities-text a[href*="/account"] {
    display: inline-block !important;
    text-decoration: none !important;
    line-height: 42px !important; /* Alineación perfecta con el círculo de 42px */
}







/* ==========================================================
   PULIDO FINAL KHEMIA: SIMETRÍA Y RESPONSIVE (SOLO ICONOS)
   ========================================================== */

/* 1. UNIFICAR ESPACIADO ENTRE ICONOS (IGUAL PARA TODOS LOS ESTADOS) */
/* Esto asegura que la separación sea la misma iniciada la sesión o no */
.header-utils, 
.utilities-container {
    display: flex !important;
    align-items: center !important;
    gap: 1px !important; /* Ajusta este valor (15px o 20px) según prefieras la distancia */
}

/* 2. REGLAS DE LIMPIEZA EN RESPONSIVE (1200px) */
@media (max-width: 1200px) {
    
    /* Ocultar el texto "Mi cuenta" manteniendo el icono intacto */
    body.customer-logged-in .utilities-container .utilities-text {
        display: none !important;
    }

    /* Ocultar la palabra "Menú" al lado del icono de hamburguesa */
    a[data-toggle="#nav-hamburger"] .utilities-text,
    .js-modal-open[data-component="menu-button"] .utilities-text {
        display: none !important;
    }

    /* MANTENEMOS EL BUSCADOR: 
       Eliminamos la regla anterior para que el texto "¿Qué estás buscando?" 
       siga siendo visible hasta que el diseño nativo de la tienda decida ocultarlo. */
}

/* 3. AJUSTE PARA MÓVIL (767px) */
@media (max-width: 767px) {
    .header-utils {
        gap: 12px !important; /* Un poco más cerrado en celular para que entre todo */
    }
}


/* Ocultar barra de seguimiento de compra */
.js-notification-status-page {
    display: none !important;
}


/* Ocultar el selector de ordenamiento y su icono */
.js-sort-by-private, 
.js-sort-by-private + .form-select-icon,
[data-component="sort-by"] {
    display: none !important;
}









/* =======================================================
   ESTILO NUEVA CONTRASEÑA (VERSIÓN COMPACTA Y CENTRADA)
   ======================================================= */

/* --- 1. ESTRUCTURA Y FONDO DE VIDRIO (COMPACTO) --- */
.template-account-newpass .page-header, 
.template-account-newpass .account-page {
    max-width: 550px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* --- 2. TÍTULO (CABECERA) --- */
.template-account-newpass .page-header {
    margin-top: 60px !important;
    padding-top: 35px !important;
    padding-bottom: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    z-index: 2; 
}

.template-account-newpass .page-header h1 {
    color: #000000 !important;
    text-shadow: none !important;
    font-size: 24px !important;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
    margin: 0 !important;
}

/* --- 3. CUERPO DEL FORMULARIO --- */
.template-account-newpass .account-page {
    margin-top: -1px !important;
    padding: 15px 30px 35px 30px !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 80px !important;
    border-top: none !important;
    z-index: 1;
}

/* --- 4. CENTRADO DE COLUMNAS --- */
.template-account-newpass .account-page .row {
    display: flex !important;
    justify-content: center !important;
}

.template-account-newpass .account-page div[class*="col"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* --- 5. TEXTOS Y ETIQUETAS --- */
.template-account-newpass .account-page label {
    color: #000000 !important;
    text-shadow: none !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px;
}

/* --- 6. INPUTS (CAMPOS DE CONTRASEÑA) --- */
.template-account-newpass .account-page .form-control {
    width: 100% !important;
    height: 45px !important;
    background: rgba(0, 0, 0, 0.1) !important; 
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 12px;
    color: #000000 !important;
    font-weight: 500;
    text-align: center !important;
}

/* --- 7. BOTÓN DE ENVÍO --- */
.template-account-newpass .account-page .btn-primary,
.template-account-newpass .account-page input[type="submit"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    margin: 25px auto 0 auto !important;
    height: 45px !important;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
}

/* --- 8. AJUSTE MOBILE --- */
@media (max-width: 900px) {
    .template-account-newpass .page-header, 
    .template-account-newpass .account-page {
        max-width: 90% !important;
        width: 90% !important;
    }
}


/* Ocultar el icono del ojo en el formulario de contraseña */
.template-account-newpass .js-password-view,
.template-account-reset .js-password-view {
    display: none !important;
}




/* 1. Ocultar el logo del diseñador por defecto en todas las páginas */
.footer-logo.custom-seal {
    display: none !important;
}

/* 2. Mostrar el logo del diseñador ÚNICAMENTE en la página de inicio (Home) */
.template-home .footer-logo.custom-seal {
    display: inline-block !important;
}





/* =======================================================
   ESTILO QUIÉNES SOMOS (UNIFICADO SIN ESPACIOS)
   ======================================================= */

/* --- 1. BASE DE LA CAJA (TÍTULO Y TEXTO) --- */
.template-page section.page-header, 
.template-page section.user-content {
    max-width: 750px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* EL BLANCO ADELANTE: Opacidad alta y sombra de profundidad */
    background: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 1;
}

/* --- 2. ELIMINAR ESPACIO FANTASMA (UNIENDO SECCIONES) --- */
.template-page section.page-header {
    margin-top: 60px !important;
    margin-bottom: 0 !important; /* ELIMINA ESPACIO ABAJO */
    padding: 50px 30px 0px 30px !important; /* Quita el padding inferior */
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.template-page section.user-content {
    margin-top: 0 !important; /* ELIMINA ESPACIO ARRIBA */
    padding: 0px 50px 60px 50px !important; /* Quita el padding superior */
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 100px !important;
}

/* --- 3. TÍTULO EN NEGRO Y CENTRADO --- */
.template-page section.page-header h1 {
    color: #000000 !important; /* NEGRO PURO */
    text-align: center !important;
    font-weight: 700 !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding-bottom: 20px !important; /* Espacio visual interno antes del texto */
    text-shadow: none !important;
}

/* --- 4. CENTRADO DE TEXTO E INFO --- */
.template-page section.user-content .row,
.template-page section.user-content .col-md-8 {
    display: block !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.template-page section.user-content p, 
.template-page section.user-content h3,
.template-page section.user-content li,
.template-page section.user-content strong {
    color: #000000 !important;
    text-align: center !important;
    text-shadow: none !important;
}

/* --- 5. RESPONSIVE --- */
@media (max-width: 900px) {
    .template-page section.page-header, 
    .template-page section.user-content {
        max-width: 92% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}









/* --- SOLO AFECTA A: BANNERS HOME (Versión Mobile) --- */
@media (max-width: 767px) {
    
    /* 1. Reset TOTAL para Edge-to-edge (Elimina espacios de las columnas) */
    section.section-banners-home.position-relative,
    section.section-banners-home.position-relative .container-fluid,
    section.section-banners-home.position-relative .row,
    section.section-banners-home.position-relative div[class*="col"],
    section.section-banners-home.position-relative .grid-item,
    section.section-banners-home.position-relative .banner-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* 2. Formato rectangular apaisado */
    section.section-banners-home.position-relative .textbanner {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        aspect-ratio: 2 / 1.1 !important; /* Mantiene el formato pro */
        margin: 0 0 1px 0 !important; /* Finísima línea de separación */
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* 3. LA MAGIA: Forzar al contenedor de la imagen a tener la misma altura */
    section.section-banners-home.position-relative .textbanner-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. Centrado absoluto y oscurecimiento de la imagen */
    section.section-banners-home.position-relative .textbanner-image img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        filter: blur(2.5px) brightness(0.55) !important;
        transform: scale(1.0) !important; /* Sin zoom para no perder el centro */
        object-fit: cover !important;
        
        /* ESTO ASEGURA EL CENTRO EXACTO (Recuadro Verde) */
        object-position: center center !important; 
    }

    /* 5. Mostrar siempre los títulos (::before) */
    section.section-banners-home.position-relative .textbanner::before {
        opacity: 1 !important; 
        transform: translate(-50%, -50%) scale(1) !important; 
        font-size: 20px !important; 
        z-index: 10 !important;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.9) !important;
    }
}










/* =======================================================
   FIX DEFINITIVO: CENTRADO TOTAL Y ELIMINAR HUECO INFERIOR
   ======================================================= */
@media (max-width: 767px) {
    /* 1. Anulamos la altura mínima de 300px que pusimos en el CSS global */
    section[data-store="home-image-text-module"] .textbanner .row {
        min-height: 0 !important; 
        height: auto !important;
        padding: 0 !important; /* Eliminamos paddings que puedan venir de la fila */
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Centrado simétrico del bloque de texto */
    section[data-store="home-image-text-module"] .textbanner-text {
        padding: 40px 25px !important; /* 40px arriba y 40px abajo para que quede igualado */
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3. Ajuste de márgenes de los textos internos */
    section[data-store="home-image-text-module"] .js-banner-title {
        margin-top: 0 !important;
        margin-bottom: 15px !important; /* Espacio controlado entre título y párrafo */
    }

    /* 4. Quitamos el margen inferior del último bloque de texto */
    section[data-store="home-image-text-module"] .textbanner-text .mb-3 {
        margin-bottom: 0 !important;
    }

    /* 5. Ajuste de la sección completa */
    section[data-store="home-image-text-module"] {
        margin-bottom: 40px !important; /* Espacio exterior después del bloque */
    }
}





/* =======================================================
   FIX NIVEL PRO: DESARME DE PRECIOS POR 5 DÍGITOS
   ======================================================= */

@media (min-width: 992px) {
    /* 1. Permitimos que los bloques (precio, cuotas, descuento) bajen de línea naturalmente */
    body.template-product .js-price-container.price-container {
        flex-wrap: wrap !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* 2. DESACTIVAMOS LA BOMBA: Dejamos que los textos largos respiren y hagan salto de línea */
    body.template-product .js-price-container.price-container * {
        white-space: normal !important; 
    }

    /* 3. Blindamos SOLO a los números para que nunca se partan a la mitad */
    body.template-product #price_display,
    body.template-product #compare_price_display,
    body.template-product .js-price-display {
        white-space: nowrap !important;
    }

    /* 4. Forzamos a que el precio, las cuotas y el descuento se apilen prolijamente uno debajo del otro */
    body.template-product .js-price-container > .col,
    body.template-product .js-price-container > .col-auto,
    body.template-product .js-price-container > .col-12 {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 5px !important;
    }
}




/* 1. Contenedor principal: Por defecto (celulares) centrado */
.social-share {
    display: flex;
    gap: 12px;
    margin-top: 15px;
    justify-content: center; /* Centra los botones en la versión móvil */
    width: 100%; 
}

/* 2. Regla para computadoras (pantallas de 768px o más) */
@media (min-width: 768px) {
    .social-share {
        justify-content: flex-start; /* Vuelve a dejar los botones a la izquierda en la web */
    }
}

/* 3. Estilo para cada botón individual (el círculo negro) */
.social-share .social-share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #000000;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

/* 4. Estilo para el ícono SVG adentro del botón (blanco) */
.social-share .social-share-button svg {
    fill: #ffffff;
    width: 20px;
    height: 20px;
}

/* 5. Efecto al pasar el mouse por encima (hover) */
.social-share .social-share-button:hover {
    background-color: #333333;
}


/* Fuerza al botón de WhatsApp a centrar su ícono en la versión móvil */
@media (max-width: 767px) {
    .social-share a.social-share-button[data-network="whatsapp"] {
        display: inline-flex !important;
    }
}









/* =======================================================
   FIX DEFINITIVO: ALINEACIÓN DE TARJETAS MOBILE 
   (Reserva espacio exacto de 2 líneas para el título)
   ======================================================= */
@media (max-width: 767px) {
    .item-description .item-name {
        min-height: 50px !important; /* Espacio fijo asegurado para 2 líneas */
        display: flex !important;
        align-items: center !important; /* Centra verticalmente si hay solo 1 línea */
        justify-content: center !important; /* Centra horizontalmente */
        margin-bottom: 5px !important;
    }
}







/* =======================================================
   SELLOS INFORMATIVOS (DEBAJO DE MEDIOS DE PAGO)
   ======================================================= */

body.template-product .js-product-payments-container::after {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 95px !important; /* Tamaño de los iconos, podés ajustarlo */
    background-image: url("https://d1a9qnv764bsoo.cloudfront.net/stores/007/093/811/rte/icono-3.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important; /* Alineado a la izquierda */
    margin-top: 20px !important; /* Separación con "Ver medios de pago" */
    margin-bottom: 10px !important;
    pointer-events: none !important; /* Evita interferir con los clics del usuario */
}

/* Ajuste responsivo para celulares */
@media (max-width: 767px) {
    body.template-product .js-product-payments-container::after {
        height: 90px !important; /* Ligeramente más chicos en móvil */
        margin-top: 25px !important;
    }
}




/* --- CÓDIGO CSS DEFINITIVO (DISEÑO FULL + SIN EL "1" + FIX CATEGORÍAS) --- */

/* 1. CAJA PRINCIPAL (El rectángulo del producto) */
.js-alert-added-to-cart .js-cart-notification-item {
    position: relative !important;
    overflow: hidden !important;
    border: none !important;         /* Sin bordes */
    min-height: 120px !important;    /* Altura fija buena */
    height: auto !important;         /* FIX CATEGORÍAS: Permite que se adapte al contenido */
    z-index: 1 !important;
    display: flex !important;        /* Flexbox para ordenar */
    align-items: stretch !important;
    box-shadow: none !important;     /* Quitamos sombras raras */
    border-bottom: none !important;  /* Quitamos línea inferior */
}

/* 2. OCULTAR LA COLUMNA VIEJA DE LA FOTO */
/* Esto evita que empuje el texto a la derecha */
.js-alert-added-to-cart .col-2,
.js-alert-added-to-cart .notification-img {
    position: static !important;
    width: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important; /* FIX MOBILE: Estaba en hidden y cortaba la foto */
}

/* 3. LA IMAGEN DE FONDO (Ocupa todo el rectángulo) */
.js-alert-added-to-cart .notification-img img,
.js-alert-added-to-cart img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;      /* FIX MOBILE: Asegura que llene el 100% del fondo */
    object-fit: cover !important;    /* Efecto relleno perfecto */
    z-index: 0 !important;           /* Al fondo */
    filter: brightness(0.5);         /* Oscurecida para leer texto */
    margin: 0 !important;
    border: none !important;
    border-radius: 5px !important;
}

/* 4. EL TEXTO (Blanco y Centrado) */
.js-alert-added-to-cart .col-10 {
    position: relative !important;
    z-index: 10 !important;          /* Encima de la foto */
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    
    /* FIX CATEGORÍAS: Relleno arriba y abajo para inflar la caja y que no se aplaste */
    padding: 25px 20px !important; 
    
    color: #ffffff !important;
    
    /* Centrado vertical perfecto */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

/* 5. ESTILOS DE TEXTO GENERALES */
.js-alert-added-to-cart .col-10 *,
.js-alert-added-to-cart .js-cart-notification-close {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8); /* Sombra para leer mejor */
    margin-bottom: 2px !important;
}

/* --- ZONA DE ELIMINACIÓN DE ELEMENTOS MOLESTOS --- */

/* ELIMINAR EL "1" (CANTIDAD) - CLASE EXACTA ENCONTRADA */
.js-cart-notification-item-quantity,
.js-cart-notification-item .js-cart-notification-item-quantity {
    display: none !important;
}

/* ELIMINAR BORDES GRISES SOBRANTES */
.js-alert-added-to-cart .js-cart-notification-subtotal,
.js-alert-added-to-cart + div {
    border-top: none !important;
}

/* 1. EL CONTENEDOR PRINCIPAL (Aquí controlas la opacidad) */
.js-alert-added-to-cart {
    /* CAMBIA EL 0.8 PARA LA OPACIDAD (0 es invisible, 1 es negro total) */
    background-color: rgba(198, 198, 198, 0.92) !important; 
    border: none !important;
    border-radius: 15px !important;
}

/* 2. LIMPIEZA DE CAPAS INTERNAS (Esto quita el gris que ves) */
.js-alert-added-to-cart .notification-primary {
    padding: 15px !important; /* FIX CATEGORÍAS: Mantiene la caja externa estable */
    background-color: transparent !important; 
    background: transparent !important;
    border: none !important; 
}

.js-alert-added-to-cart .js-cart-notification-item,
.js-alert-added-to-cart .divider {
    background-color: transparent !important; /* Hace que el gris desaparezca */
    background: transparent !important;
    border: none !important; /* Quita las líneas divisorias grises */
}

/* 3. AJUSTE DE TEXTO (Para que no se pierda en el negro) */
.js-alert-added-to-cart, 
.js-alert-added-to-cart span, 
.js-alert-added-to-cart strong {
    color: #000000 !important;
}

/* --- FIX MOBILE: MISMA ESTÉTICA QUE EN COMPU --- */
@media (max-width: 767px) {
    .js-alert-added-to-cart.notification-fixed {
        width: 90% !important;
        left: 5% !important;
        right: 5% !important;
        top: 20px !important;       /* La despega del techo */
        bottom: auto !important;    /* Evita que se pegue al piso */
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
}

/* 8. BOTÓN "VER CARRITO" (OPACIDAD CONTROLABLE Y SIN BRILLO) */
.js-alert-added-to-cart .btn.btn-primary {
    /* El último valor (1) es la opacidad. Cambialo a 0.9, 0.8 o 0.5 para hacerlo más transparente */
    background-color: rgba(0, 0, 0, 1) !important; 
    color: #ffffff !important;             /* Texto negro nítido */
    text-shadow: none !important;          /* Quita el brillo/sombra gris de las letras */
    border: none !important;               /* Sin bordes */
}



/* 9. UNIFICAR ESPACIOS DEL TOTAL Y BOTÓN EN TODAS LAS PÁGINAS */
.js-alert-added-to-cart .divider {
    margin: 15px 0 !important; /* Fuerza el espacio arriba y abajo de la línea */
}

.js-alert-added-to-cart .row.h6 {
    margin-top: 0 !important;
    margin-bottom: 15px !important; /* Separación exacta entre el Total y el botón */
    padding: 0 !important;
}

.js-alert-added-to-cart a.btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* Evita que el botón sume espacios extra */
}

.js-alert-added-to-cart .notification-primary {
    padding: 25px !important; /* Garantiza el mismo margen interno en los 4 bordes de la caja */
}




/* 10. ESTILIZAR CRUZ: CÍRCULO BLANCO + X NEGRA */
/* Aplicamos estilos al contenedor DIV de la cruz */
.js-alert-added-to-cart div.notification-close {
    position: absolute !important;
    
    /* Posición en la esquina (Ajustá a tu gusto) */
    top: -1px !important;     /* Separación del borde superior */
    right: 10px !important;   /* Separación del borde derecho */
    
    /* Estilos del círculo */
    background-color: rgba(0, 0, 0, 1) !important; 
    border-radius: 50% !important;      /* Hace que sea un círculo perfecto */
    width: 18px !important;             /* Tamaño del círculo (Ancho) */
    height: 18px !important;            /* Tamaño del círculo (Alto) */

    /* Centrado perfecto de la X adentro del círculo usando Flexbox */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Otros ajustes necesarios */
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important; /* Quitamos el padding viejo para no deformar el círculo */
    cursor: pointer !important;
    
    /* Sombrita suave para darle relieve sobre la foto */
    box-shadow: 0 2px 5px rgba(0,0,0,0.0) !important;
}

/* Estilos para el ícono SVG (la X) adentro del círculo */
.js-alert-added-to-cart div.notification-close svg {
    color: #ffffff !important; /* Pintamos la X de negro */
  
    /* Tamaño de la X adentro del círculo */
    width: 10px !important;
    height: 10px !important;
    
    /* Aseguramos nitidez */
    margin: 0 !important;
    opacity: 1 !important;
}




/* 11. FIX: ALINEACIÓN DEL TOTAL Y PRECIO EN UNA SOLA LÍNEA (ESCRITORIO) */

/* Hacemos la caja más ancha solo en PC para que el texto y el número entren cómodos */
@media (min-width: 768px) {
    .js-alert-added-to-cart.notification-floating {
        width: 380px !important; /* Si ves que todavía no entra, podés subirlo a 400px */
    }
}

/* Forzamos la fila del total a mantenerse estricta en una sola línea */
.js-alert-added-to-cart .row.h6 {
    display: flex !important;
    flex-wrap: nowrap !important; /* Prohíbe terminantemente que el precio caiga abajo */
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Evitamos que el texto "Total (X productos):" o el precio se corten a la mitad */
.js-alert-added-to-cart .row.h6 .col-auto,
.js-alert-added-to-cart .row.h6 .js-cart-total {
    white-space: nowrap !important;
}








/* Corregir posición de la cantidad en la notificación del carrito */
.notification-cart .js-cart-notification-item-quantity {
    position: static !important;
    display: inline-block !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin-right: 4px !important;
}








/* 12. FIX: ELIMINAR EFECTO DE "DOBLE CAJA" Y FLECHITA NATIVA */

/* Apagamos la sombra interna que marcaba la segunda caja */
.js-alert-added-to-cart .notification,
.js-alert-added-to-cart .notification-primary {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Borramos definitivamente el "piquito" o triángulo del globo de diálogo */
.js-alert-added-to-cart .notification::before,
.js-alert-added-to-cart .notification::after,
.js-alert-added-to-cart::before,
.js-alert-added-to-cart::after {
    display: none !important;
    content: none !important;
}

/* Le damos una única sombra suave y elegante SOLO a la caja externa */
.js-alert-added-to-cart {
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.2) !important;
}






/* =======================================================
   DATOS DE CONTACTO CON LINKS REALES (HTML)
   ======================================================= */

.js-footer-legal {
    padding-top: 15px !important;
}

.custom-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 35px; 
    padding-top: 15px;
}

/* Estilo de los elementos en general */
.footer-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
    /* Evita que se seleccione por error el texto en WhatsApp e Instagram */
    user-select: none !important; 
}

/* COMPORTAMIENTO EXCLUSIVO DEL CORREO (Copiar texto) */
.footer-link.mail-link {
    cursor: text !important; /* Cambia la manito por el cursor de texto */
    user-select: text !important; /* Permite sombrear y copiar sin problemas */
}


/* Diseño de los Íconos SVG */
.footer-link svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
    margin-right: 8px !important;
    transition: fill 0.3s ease !important;
}

/* --- RESPONSIVE ESCRITORIO (PC) --- */
@media (min-width: 768px) {
    .custom-footer-links {
        flex-direction: row;
        gap: 20px;
    }
    
    /* Agrega la línea separadora a la derecha de WPP y Correo */
    .footer-link.wpp-link,
    .footer-link.mail-link {
        border-right: 1px solid rgba(255, 255, 255, 0.3);
        padding-right: 20px;
    }
}

/* --- RESPONSIVE CELULARES (Móvil) --- */
@media (max-width: 767px) {
    .custom-footer-links {
        flex-direction: column;
        gap: 15px; 
    }
    .footer-link {
        border-right: none !important;
        padding-right: 0 !important;
    }
}




/* =======================================================
   FONDO GLOBAL DEFINITIVO (Basado en tu código de "Mi Cuenta")
   Aplica a todo MENOS Home y Producto
   ======================================================= */

/* 1. APLICAR EL FONDO (Pseudo-elemento) */
/* Usamos :not() para excluir Home y Producto */
body:not(.template-home):not(.template-product)::before {
    content: " " !important;
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 0 !important; /* Nivel 0: Detrás del contenido, pero visible */
    pointer-events: none !important;
    
    /* IMAGEN Y COLORES (Tu configuración exacta) */
    background-image: url("https://dcdn-us.mitiendanube.com/stores/007/093/811/themes/rio/2-slide-1767121042328-3932132190-75ee0b67d8e0d7cce6b3424a64802b3b1767121298-480-0.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #8e7468 !important; 
    background-blend-mode: multiply !important;
    
    /* EFECTOS VISUALES */
    filter: blur(50px) saturate(180%) !important;
    transform: scale(1.1) !important;
}

/* 2. AJUSTE DE ALTURA RESPONSIVO (CLAVE PARA NO ROMPER EL HEADER) */
/* El fondo empieza DESPUÉS del header, así no afecta su color */

/* PC (Header alto) */
@media (min-width: 992px) {
    body:not(.template-home):not(.template-product)::before {
        top: 140px !important;
        height: calc(100% - 140px) !important;
    }
}

/* MÓVIL (Header bajo) */
@media (max-width: 991px) {
    body:not(.template-home):not(.template-product)::before {
        top: 120px !important;
        height: calc(100% - 120px) !important;
    }
}

/* 3. LIMPIAR FONDOS SÓLIDOS (Para revelar el diseño) */
/* Hacemos transparentes los contenedores generales para que se vea la imagen de fondo */
body:not(.template-home):not(.template-product) #main-container,
body:not(.template-home):not(.template-product) .container-fluid,
body:not(.template-home):not(.template-product) .js-main-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}




@media (max-width: 767px) {

/* ==========================================================
   OPTIMIZACIÓN PROFESIONAL PARA IOS (SAFARI/CHROME)
   ========================================================== */

/* 1. Hardware Acceleration: Forzar renderizado por GPU */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. Solución al Backdrop-Filter en iOS: 
   Requiere que el elemento padre tenga una capa de aislamiento */
.header-container, 
.site-header, 
#modal-cart, 
#ajax-cart-drawer, 
.nav-dropdown-content,
.item-description {
    -webkit-backdrop-filter: blur(20px) saturate(160%); /* Prefijo indispensable */
    backdrop-filter: blur(20px) saturate(160%);
    /* Evita que elementos transparentes se vean negros en iOS */
    isolation: isolate; 
}

/* 3. Corrección de "Ghosting" o parpadeo en animaciones */
.site-header, 
.js-alert-added-to-cart,
.item {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}


/* 5. Estabilización de scroll: Evita que el fondo se mueva o se "trabe" */
html, body {
    height: 100%;
    overflow-x: hidden;
    /* Evita el "overscroll bounce" que hace que el fondo se vea raro al tirar de la web */
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
}

/* 6. Fix para inputs en iOS: iOS mete estilos nativos agresivos */
input, textarea, select {
    -webkit-appearance: none;
    border-radius: 12px; /* Uniformiza los bordes */
}

/* 7. Ajuste de seguridad para el Notch (muesca) en iPhones modernos */
@supports (padding: env(safe-area-inset-top)) {
    header, .site-header {
        padding-top: env(safe-area-inset-top) !important;
    }
    .footer-legal {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* 8. Estabilización de imágenes en contenedores Glass */
.item-image img, 
.textbanner-image img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}




/* ==========================================================
   FIX PRO: CENTRADO DE CANTIDAD (SOLO MOBILE + SOLO IOS)
   ========================================================== */

@media (max-width: 767px) {
    @supports (-webkit-touch-callout: none) {
        
        .js-product-form .js-quantity-input,
        .form-control.js-quantity-input.form-control-inline {
            position: relative !important;
            top: 0 !important;
            
            /* --- EL CENTRADO HORIZONTAL (LA SOLUCIÓN) --- */
            left: 0 !important;
            right: 0 !important;
            margin: 0 auto !important; /* Esto centra la caja de 50px en el medio exacto */
            
            /* --- TU CALIBRACIÓN VERTICAL --- */
            transform: translateY(7px) !important; 
            
            -webkit-appearance: none !important;
            padding: 0 !important;
            border-radius: 0 !important;
            border: none !important;
            background: transparent !important;
            display: block !important;
            width: 50px !important;
            height: 30px !important;
            line-height: 30px !important; 
            text-align: center !important;
            color: #fff !important;
            font-size: 18px !important;
            font-weight: 700 !important;
        }

        /* Aniquilar los botones (spinners) invisibles nativos de iOS */
        .js-product-form .js-quantity-input::-webkit-inner-spin-button,
        .js-product-form .js-quantity-input::-webkit-outer-spin-button,
        .form-control.js-quantity-input.form-control-inline::-webkit-inner-spin-button,
        .form-control.js-quantity-input.form-control-inline::-webkit-outer-spin-button {
            -webkit-appearance: none !important;
            margin: 0 !important;
            display: none !important;
        }
    }
}
}


/* ==========================================================
   FIX MAESTRO: OCULTAR EL 0% OFF FANTASMA
   ========================================================== */
/* Esta regla es más fuerte que las repetidas. 
   Si Tiendanube dice que no hay descuento (display: none), lo matamos con !important */
.js-offer-label[style*="display: none"],
.js-offer-label[style*="display:none"] {
    display: none !important;
}


/* ==========================================================
   OPTIMIZACIÓN EXTREMA APPLE (MAC / IPAD M1-M4)
   Filtro exclusivo para navegadores WebKit (Safari)
   ========================================================== */

@supports (-webkit-backdrop-filter: blur(1px)) {
    
    /* 1. CAJA CONTENEDORA: Menos blur, más color sólido, forzado a GPU */
    body header .desktop-list-subitems.list-subitems {
        /* Hacemos el fondo un poco más opaco para compensar el blur bajo */
        background-color: rgba(26, 26, 26, 0.6) !important; 
        
        /* Blur reducido al mínimo (10px). Cero estrés para el procesador M */
        -webkit-backdrop-filter: blur(10px) !important; 
        backdrop-filter: blur(10px) !important;
        
        /* Obligamos a la Mac/iPad a usar la Placa de Video sin dudarlo */
        isolation: isolate !important;
        transform: translateZ(0) !important; 
        -webkit-transform: translateZ(0) !important;
        will-change: transform !important;
    }

    /* 2. SOMBRA INFERIOR: Cero cristal, solo degradado oscuro */
    body header .desktop-list-subitems.list-subitems::after {
        background: linear-gradient(to bottom, rgba(26, 26, 26, 0.8) 0, rgba(26, 26, 26, 0) 100%) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }

    /* 3. PRE-ACELERAR LOS BOTONES: Evita el tirón inicial al acercar el lápiz */
    body header .nav-dropdown-content li a {
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        will-change: transform, background-color !important;
    }

    /* 4. EL HOVER (LA SOLUCIÓN AL PARPADEO) */
    body header .nav-dropdown-content li:hover a {
        /* Color blanco sólido translúcido, sin blur interno */
        background-color: rgba(255, 255, 255, 0.2) !important; 
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        
        /* Mantenemos un zoom más suave, pero... */
        transform: scale(1.05) translateZ(0) !important;
        -webkit-transform: scale(1.05) translateZ(0) !important;
        
        /* ¡MATAMOS LA SOMBRA! Esta era la culpable del parpadeo en Apple */
        box-shadow: none !important; 
        
        color: #fff !important;
        z-index: 100 !important;
    }
}


/*  OPTIMIZACIÓN DE OVERLAYS EXCLUSIVA PARA iOS (iPhone / iPad)  */
@supports (-webkit-touch-callout: none) {

    /* Apuntamos directamente a los fondos oscuros de los menús */
    .js-modal-overlay.modal-overlay {
        
        /* 1. Reducimos el blur drásticamente (de 8px/10px a solo 3px) para aliviar la carga */
        -webkit-backdrop-filter: blur(3px) !important;
        backdrop-filter: blur(3px) !important;
        
        /* 2. Subimos un poco la opacidad del color negro para compensar que hay menos blur 
           y que el texto siga siendo legible */
        background-color: rgba(0, 0, 0, 0.6) !important; 
        
        /* 3. TRUCO PRO: Forzamos la aceleración por hardware (GPU) */
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        
        /* 4. Le avisamos a Safari móvil qué propiedades van a cambiar para que reserve memoria */
        will-change: opacity, backdrop-filter !important;
    }
}




/* ==========================================================
   FIX DE CENTRADO DEFINITIVO (ANTI-DESPLAZAMIENTO)
   Aplica para Menú Dropdown y Títulos Responsive
   ========================================================== */

/* 1. Reset de estructura: Forzamos Flexbox para centrar geométricamente */
body header .nav-dropdown-content li {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding-left: 0 !important;  /* Quitamos el padding que empuja a la derecha */
    padding-right: 0 !important;
    margin: 0 !important;
    border-right: none !important; /* En responsive las líneas verticales suelen molestar */
}

/* 2. Fix para el Link (El título real) */
body header .nav-dropdown-content li a {
    display: block !important;
    width: auto !important;
    min-width: 150px !important; /* Asegura un área de clic estable */
    text-align: center !important;
    margin: 0 auto !important;   /* El "Auto" lo clava al centro */
    
    /* Mantenemos tu optimización de Apple pero reseteamos posición */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    left: 0 !important;
    right: 0 !important;
}

/* 3. Corrección del Efecto Hover (Zoom) */
/* Evita que al crecer se desplace o "vibre" hacia los costados */
@supports (-webkit-backdrop-filter: blur(1px)) {
    body header .nav-dropdown-content li:hover a {
        transform: scale(1.05) translateZ(0) !important;
        -webkit-transform: scale(1.05) translateZ(0) !important;
        transform-origin: center !important; /* Punto de crecimiento: El centro */
    }
}

/* 4. Ajuste específico para Celulares (Mobile) */
@media (max-width: 767px) {
    /* Si el menú hamburguesa usa estas clases, esto asegura el centro total */
    .nav-dropdown-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }
    
    /* Eliminamos cualquier borde que Tiendanube meta por defecto y descentre el texto */
    .nav-dropdown-content li {
        border: none !important;
        height: auto !important;
        padding: 10px 0 !important;
    }
}



/* ==========================================================
   FIX CORREGIDO: ANIMACIÓN DE FONDO SIN OCULTAR LA IMAGEN
   ========================================================== */

/* 1. Le damos un fondo oscuro al documento base (HTML) para que no haya destellos blancos, 
      pero dejamos el body transparente para que no tape la imagen */
html {
    background-color: #2b1f1a !important; /* Un tono marrón muy oscuro de base */
}
body {
    background-color: transparent !important; 
}

/* 2. Animación de Fade In suave */
@keyframes fadeInBlur {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* 3. Aplicamos la animación al fondo difuminado (::before) */
body::before {
    opacity: 0;
    animation: fadeInBlur 1.7s ease-in-out forwards !important;
    /* Mantenemos tu escala original intacta para no alterar las capas */
    transform: scale(1.1) !important;
}