@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root {
    /* Colors */
    --color-primary: #72CCD6; /* Primary brand color */
    --color-secondary: #2598B2; /* Secondary color */
    --color-complementary: #ED8101; /* Complementary color */
    --color-accent: #FF4858; /* Accent color */
    --color-accent-70: #ff6673;
    --color-accent-55: #ff1a2d;
    --color-dark: #232323; /* Dark color */
    --color-dark-20: #323432;
    --color-dark-45: #727472;

    --color-gray: #A5A6A5; /* Gray color */
    --color-gray-95: #f2f2f2;
    --color-gray-80: #CBCDCB;
    --color-text: #333333; /* Text color */
    --color-background: #ffffff; /* Background color */

    --color-industry: #FFC107;
    --color-industry-65: #ffd24d;

    /* Fonts */
    --font-title: "Montserrat", sans-serif; /* Fonts for titles */
    --font-paragraph: "Open Sans", sans-serif; /* Font for paragraph */

    /* Sizes */
    --size-title: 24px; /* Title size */
    --size-paragraph: 16px; /* Paragraph size */
    --size-link: 14px;

    /* Spacing */
    --spacing-small: 8px; /* Small spacing */
    --spacing-medium: 16px; /* Medium spacing */
    --spacing-large: 32px; /* Large spacing */
}
html {
    height: 100%;
    margin: 0;
    scroll-behavior: smooth;
}
body {
    height: 100%;
    margin: 0;
    background-color: #F2F2F2;
}
h1, h2 {
    font-family: var(--font-title);
}
p {
    font-family: var(--font-paragraph);
}
a:not(.btn) {
    color: var(--color-dark-20);
    text-decoration-color: var(--color-industry);
    transition: all .25s ease;
}
a:not(.btn):hover,
a:not(.btn):focus,
a:not(.btn):visited {
    color: var(--color-dark);
}
/* wrapper */
body .wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
/* page loader */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.spinner {
    border: 8px solid #f3f3f3; /* Color de fondo */
    border-top: 8px solid #72CCD6; /* Color de la parte superior */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* swiper */
.swiper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
/* main */
main {
    flex: 1;
}
/* header */
/* header {
    background-color: #fff;
} */
/* section */
.section {
    margin-bottom: 1.5rem;
    padding: 1.5rem 0;
}
.section-content.wrapper {
    padding: 1.5rem;
    border-radius: .75rem;
    background-color: #FFF;
    margin-bottom: 1.5rem;
}
.section-content.fluid-sm {
    padding: 1.5rem 0;
}
.section-content.fluid-md {
    padding: 3rem 0;
}
.section-content.fluid-lg {
    padding: 6rem 0;
}
.section-header {
    /* padding: 1.5rem 0; */
    margin-bottom: 1.5rem;
}
.section-header .headline {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0;
}
.section-header .tagline {
    display: inline-block;
    position: relative;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .75rem;
    color: var(--color-industry);
}
.section-header .tagline .last-letter {
    letter-spacing: 0;
}
.section-header .icon-link .feather {
    width: 20px;
    height: 20px;
    fill: var(--color-industry);
}
.section-header .summary {
    font-size: 1.25rem;
    max-width: 600px;
    margin-top: .75rem;
    margin-bottom: 0;
}
.section-header .text {
    font-size: 1rem;
    margin-top: .75rem;
}
.section-footer {
    margin-top: 1.5rem;
}
/* swiper */
.swiper-pagination-bullet {
    background-color: #A5A6A5 !important;
}
.swiper-pagination-bullet-active {
    background-color: #FF4858 !important;
}
/* hover */
.hvr-underline-from-center::before {
    background-color: #72CCD6;
}
/* inputs */
input.form-control:focus,
textarea.form-control:focus, 
select.form-select:focus,
input[type="checkbox"] {
    border-color: #323432 !important; /* Cambia este color al que desees */
    /* box-shadow:  0 0 0 0.2rem rgba(0, 0, 0, 0.25); Cambia el color del brillo */
    box-shadow: none !important;
}
/* .card */
.card.wrapper {
    padding: .5rem;
    border-radius: .75rem;
    overflow: hidden !important;
}
/* shadow */
.shadow-x {
    box-shadow:0 10px 10px -10px rgba(0,0,0,.5)
}
/* list-mark */
.list-mark,
.list-mark-md {
    list-style-type: none;
}
.list-mark li,
.list-mark-md li {
    position: relative;
    margin-left: 24px;
}
.list-mark li::before {
    content: '';
    position: absolute;
    display: block;
    width: 15px;
    height: 3px;
    top: 18px;
    left: -24px;
    background-color: var(--color-industry);
}
.list-mark-md li::before {
    content: '';
    position: absolute;
    display: block;
    width: 15px;
    height: 2px;
    top: 11px;
    left: -24px;
    background-color: var(--color-industry);
}
/* buttons */
.btn-accent {
    color: #FFF;
    background-color: var(--color-accent);
}
.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active {
    color: #FFF;
    background-color: var(--color-accent-70);
}
/* varios */
.rounded-x {
    border-radius: .75rem !important;
}
ul {
    padding-left: 0 !important;
}
.login-bg {
    background-image: url('../images/contact-bg-top.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: .25rem;
}
.border-left {
    border-left: 4px solid var(--color-industry);
    padding-left: 1rem;
}
.border-gray-x {
    border: 8px solid var(--color-gray-80);
}
.no-list-style {
    list-style: none;
}
/* ===================== start -> Promotions banner ===================== */
.promo-banner {
    padding: .5rem 0;
    background-color: #fff;
}
.promo-banner .slider {
    background-image: url(../images/promo-banner-bg.jpg);
    background-size: cover;
    background-position: center;
    border-radius: .25rem;
}
.swiper-slide {
    height: auto;
}
/* ===================== end-> Promotions banner ===================== */

/* ===================== start-> Contact info ===================== */
.contact-info {
    background-color: #000;
}
.contact-info .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.contact-info .contact-links,
.contact-info .social-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
.contact-info .contact-links li .feather,
.contact-info .social-links li .feather  {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.contact-info .contact-links li a,
.contact-info .social-links li a {
    display: block;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: all .25s;
}
.contact-info .contact-links {
    flex: 1;
}
.contact-info .contact-links li {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
}
.contact-info .contact-links li .feather {
    margin-right: .5rem;
}
.contact-info .contact-links li a {
    display: flex;
    padding: .65rem .75rem .65rem .25rem;
    font-size: 14px;
    text-decoration: none !important;
    transition: all .25s ease;
}
.contact-info .contact-links li a:hover span:last-child {
    text-decoration: underline !important;
}
.contact-info .contact-links li a span:last-child {
    color: #72CCD6 !important;
    font-weight: bold;
}
.contact-info .social-links li a {
    padding: .65rem .75rem;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
}
.contact-info .social-links li:hover a {
    color: #FFF;
}
.contact-info .social-links li a::after {
    content: '';
    position: absolute;
    height: 28px;
    width: 28px;
    top: calc(50% - 14px);
    left: calc(50% - 13px);
    border-radius: .5rem;
    background-color: rgba(255, 255, 255, .45);
    /* background-color: #FFF; */
}
.contact-info .social-links li a .feather {
    position: relative;
    top: -2px;
    left: 1px;
}
/* ===================== end-> Contact info ===================== */

/* ===================== start-> Nav ===================== */
.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: #fff;
    margin-bottom: 1rem;
}
.navbar .container {
    justify-content: flex-start !important;
}
/* navbar-menu */
.navbar .navbar-menu {
    margin-right: 1rem;
}
.navbar .navbar-menu .desktop-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}
.navbar .navbar-menu .desktop-menu li a {
    display: block;
    padding: .75rem .85rem;
    color: #323432;
    font-size: .85rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: background-color .25s;
}
.navbar .navbar-menu .desktop-menu li:hover a {
    color: #000;
    transition: all .25s ease;
}
/* navbar-offcanvas */
.offcanvas .navbar-search input {
    border-right: none;
}
.offcanvas .navbar-search input:focus ~ .btn {
    border-color: #323432;
}
.offcanvas .navbar-search .btn,
.offcanvas .navbar-search .btn:focus {
    border-color: #dee2e6;
    border-left: none;
}
.offcanvas .navbar-search .btn:hover .feather {
    fill: #72CCD6;
    transition: all .25s ease;
}
.offcanvas .navbar-search .btn .feather {
    /* width: 32px;
    height: 32px; */
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: #f2f3f2;
}
/* navbar-user */
.navbar .navbar-user {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
}
.navbar .navbar-user a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    line-height: 1rem;
    text-decoration: none;
}
.navbar .navbar-user a .icon {
    margin-right: .5rem;
}
.navbar .navbar-user a .icon .feather {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: #f2f3f2;
}
.navbar .navbar-user a:hover .icon .feather {
    fill: #72CCD6;
    transition: all .25s ease;
}
/* mobile-menu */
#offcanvasMenu {
    background-color: #F2F2F2;
}
#offcanvasMenu .offcanvas-header {
    background-color: #232323;
    color: #FFF;
}
#offcanvasMenu .offcanvas-header .btn {
    background-color: var(--color-industry);
}
#offcanvasMenu .offcanvas-header .btn:hover {
    background-color: var(--color-industry-65);
}
#offcanvasMenu .offcanvas-header .btn .feather {
    color: var(--color-dark) !important;
}
#offcanvasMenu .offcanvas-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* mobile-menu-list */
#offcanvasMenu .offcanvas-body .mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
#offcanvasMenu .offcanvas-body .mobile-menu-list .menu-item {
    display: inline-block;
    width: 100%;
    background-color: #FFF;
    border-radius: .25rem;
}
#offcanvasMenu .offcanvas-body .mobile-menu-list .menu-item:not(:last-child) {
    margin-bottom: .75rem;
}
#offcanvasMenu .offcanvas-body .mobile-menu-list .menu-item .item-link {
    display: block;
    padding: 0.375rem 0.75rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    color: #232323;
}
/* mobile-social-list */
#offcanvasMenu .offcanvas-body .mobile-social-list {
    display: flex;
    justify-content: center;
    align-items: center;
}
#offcanvasMenu .offcanvas-body .mobile-social-list .social-link {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    text-decoration: none;
    color: #232323;
    transition: all .25s ease;
}
#offcanvasMenu .offcanvas-body .mobile-social-list .social-link:hover {
    color: #323432;
}
#offcanvasMenu .offcanvas-body .mobile-social-list .vr {
    align-self: center;
    height: 50%;
}
/* ===================== end-> Nav ===================== */

/* ===================== start-> Store features ===================== */
.store-features {
    background-color: #F2F2F2;
}
.store-features ul {
    margin-bottom: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0;
    list-style: none;
}
.store-features ul li .feather {
    width: 20px;
}
.store-features ul li {
    position: relative;
    white-space: nowrap;
    z-index: 1;
}
.store-features .list > li::before {
    content: '';
    display: block;
    position: absolute;
    width: 1000px;
    height: calc(100% + 3px);
    top: -2px;
    right: 0;
    background-color: #CBCDCB;
    z-index: -1;
}
.ticker {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}
.ticker-list {
    display: inline-block;
    padding-left: 100%; /* Initial space */
    animation: ticker 15s linear infinite;
}
.ticker-list:hover {
    animation-play-state: paused;
}
.ticker-list li {
    display: inline;
    padding: 0 20px;
}
@keyframes ticker {
    0% {
      transform: translate(0);
    }
    100% {
      transform: translate(-50%);
    }
  }
/* ===================== end-> Store features ===================== */

/* ===================== start-> Category links ===================== */
.category-links {
    margin-bottom: 1rem;
}
.category-links .container {
    display: flex;
    justify-content: space-between;
}
.category-links-container   {
    display: flex;
    overflow: auto;
    padding: .5rem 0;
}
.category-links-container::-webkit-scrollbar {
    display: none;
}
.category-links .card {
    min-width: 200px;
    border: none;
    background-color: var(--color-industry);
}
.category-links .card:not(:last-child) {
    margin-right: 1rem;
}
/* ===================== start-> Category links ===================== */

/* ===================== start-> Page hero ===================== */
.page-hero {
    margin-bottom: 1.5rem;
}
.page-hero .floating-container {
    position: relative;
    overflow: hidden;
}
.page-hero .floating-container .floating-image {
    position: absolute;
    width: 500px;
    height: 500px;
    transition: all 0.5s ease;
}
.page-hero .floating-container .content {
    position: relative;
}
@keyframes float {
    0% {
        top: 0;
        left: 0;
        transform: translate(0, 0);
    }
    25% {
        top: 0;
        left: calc(100% - 100px); /* Mueve a la derecha */
        transform: translate(0, 0);
    }
    50% {
        top: calc(100% - 100px); /* Mueve hacia abajo */
        left: calc(100% - 100px);
        transform: translate(0, 0);
    }
    75% {
        top: calc(100% - 100px); /* Mueve a la izquierda */
        left: 0;
        transform: translate(0, 0);
    }
    100% {
        top: 0; /* Regresa a la posición inicial */
        left: 0;
        transform: translate(0, 0);
    }
}

.page-hero .carousel {
    width: 100%;
    height: 400px;
    background-color: #F2F2F2;
    border-radius: .75rem;
    overflow: hidden;
}
.page-hero .carousel .carousel-inner {
    width: 100%;
    height: 100%;
}
.page-hero .carousel .carousel-inner .carousel-item {
    width: 100%;
    height: 100%;
}
.page-hero .carousel .carousel-inner .carousel-item > div {
    padding: 0px 60px;
}
.carousel-control-next, .carousel-control-prev {
	width: 50px !important;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(255, 255, 255, 0.25); /* Color de fondo (opcional) */
}

.carousel-control-prev-icon {
    background-image: none; /* Eliminar imagen predeterminada */
    border-left: 4px solid #FFF;
    height: 30px;
    width: 30px;
}

.carousel-control-next-icon {
    background-image: none; /* Eliminar imagen predeterminada */
    border-right: 4px solid #FFF;
    height: 30px;
    width: 30px;
}
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 1);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}
.carousel-control-prev-icon {
    background-image: url('../images/chevron-left-white.svg') !important;
}
.carousel-control-next-icon {
    background-image: url('../images/chevron-right-white.svg') !important;
}
.carousel-control-prev:hover .carousel-control-prev-icon {
    background-image: url('../images/chevron-left-white.svg') !important;
}
.carousel-control-next:hover .carousel-control-next-icon {
    background-image: url('../images/chevron-right-white.svg') !important;
}
.page-hero nav,
.page-hero nav a {
    color: rgba(255, 255, 255, .75) !important;
}
/* ===================== end-> Page hero ===================== */

/* MAIN - PAGE CONTENT */

/* ===================== start-> Featured products ===================== */
#featured-products.section-content .section-header .nav .nav-item:not(:last-child) {
    margin-right: .5rem;
}
#featured-products.section-content .section-header .nav .nav-item .nav-link {
    color: #727472 !important;
}
#featured-products.section-content .section-header .nav .nav-item:hover .nav-link {
    color: #FF4858 !important;
    background-color: #F2F2F2;
}
#featured-products.section-content .section-header .nav .nav-item .nav-link.active {
    color: #FF4858 !important;
    background-color: #F2F2F2;
}
/* ===================== end-> Featured products ===================== */

/* ===================== start-> Store Advantages ===================== */
#store-advantages {
    background-color: #F2F2F2;
}
/* ===================== end-> Store Advantages ===================== */

/* ===================== start-> Contact Us ===================== */
#contact-us {
    background-image: linear-gradient(175deg, rgba(50,52,50,.5), rgba(50,52,50,.9)), url('../images/contact-us-bg.jpg');
}
/* ===================== end-> Contact Us ===================== */

/* ===================== start-> About Us ===================== */
#about-us {
    background-image: url('../images/about-us-section-bg.jpg');
    background-color: #FFC107;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
#about-us.section-content {
    padding: 6.25rem 0 !important;
}
/* ===================== end-> About Us ===================== */

/* ===================== start-> Featured Brands ===================== */

/* ===================== end-> Featured Brands ===================== */

/* ===================== start-> About Page ===================== */
#welcome .img-container {
    position: relative;
    height: 100%;
    min-height: 400px;
}
#welcome .img-container .img-left {
    position: absolute;
    float: left;
    top: 0;
    left: 0;
    width: 60%;
    height: 60%;
    overflow: hidden;
    z-index: 1;
    animation: mover 2s ease-in-out infinite alternate;
}
#welcome .img-container .img-right {
    position: absolute;
    float: right;
    bottom: 0;
    right: 0;
    width: 60%;
    height: 60%;
    overflow: hidden;
    z-index: 0;
}
@keyframes mover {
    from {
        left: -10px; /* Empieza fuera de la izquierda */
    }
    to {
        left: 5%; /* Termina fuera de la derecha */
    }
}
#about-us-page .card {
    position: relative;
    /* overflow: hidden; */
}
#about-us-page .card .card-body {
    overflow: hidden;
}
#about-us-page .card .card-body h2,
#about-us-page .card .card-body p,
#about-us-page .card .card-body ul {
    list-style: none;
    position: relative;
    z-index: 1;
}
#about-us-page .card .card-body img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}
#about-us-page .card-icon {
    left: 56px;
}
#contact-us-page .section-content {
    background-color: var(--color-dark);
    background-image: url('../images/contac-us-img.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
#what-we-do .img-container {
    position: relative;
    height: 100%;
    min-height: 424px;
    overflow: hidden;
}

#what-we-do .img-left {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    height: 80%;
    z-index: 0;
    overflow: hidden;
}
#what-we-do .img-left img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
#what-we-do .img-right {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;

    width: 60%;
    height: 100%;
}
#what-we-do .img-right img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* ===================== end-> About Page ===================== */

/* ===================== start-> Contact Page ===================== */
#location-info iframe {
    border-radius: .75rem;
}
/* ===================== end-> Contact Page ===================== */

/* FOOTER - PAGE FOOTER */

/* ===================== start-> Quick Links ===================== */
#quick-links {
    background-color: #323432;
}
/* social links */
#quick-links .social-links {
    list-style-type: none;
    padding: 0;
    display: flex;
    gap: 15px;
}
#quick-links .social-links li {
    display: inline;
}
#quick-links .social-links a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
    transition: all .25s ease;
}
#quick-links .social-links a:hover {
    color: rgba(255, 255, 255, 1);

}
/*  */
#quick-links .nav.flex-column .nav-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    transition: all .25s ease;
}
#quick-links .nav.flex-column .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.5) !important;
    transition: all .25s ease;
}
#quick-links .nav.flex-column .nav-item:hover {
    border-color: rgba(255, 255, 255, 1) !important;
}
#quick-links .nav.flex-column .nav-item:hover .nav-link {
    color: rgba(255, 255, 255, 1) !important;
}
#quick-links .nav .nav-item .nav-link .feather {
    width: 16px !important;
    height: 16px !important;
}
.copyright-info {
    background-color: #232323;
}


#quick-links .nav .nav-item:hover .nav-link {
    color: rgba(255, 255, 255, .75) !important;
}
/* ===================== end-> Quick Links ===================== */

/* WOOCOMMERCE */

/* ===================== start-> Woocommerce ===================== */
/* My account menu */
.woocommerce-MyAccount-navigation {
    padding: 1rem;
    background-color: #fff;
    border-radius: .75rem;
}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link::before {
    display: inline-block;
    font-family: 'Bootstrap-icons';
    font-size: 1.25rem;
    position: absolute;
    top: 50%;
    left: .75rem;
    transform: translateY(-50%);
    margin-right: 1rem;
}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--dashboard::before {
    content: '\F580';
}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--orders::before {
    content: '\F1C7';
}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--edit-address::before {
    content: '\F3E8';
}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--edit-account::before {
    content: '\F8A7';
}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout::before {
    content: '\F1C3';
}
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.woocommerce-MyAccount-navigation ul li {
    display: inline-block;
    position: relative;
    width: 100%;
    background-color: var(--color-gray-95);
    border-radius: .25rem;
}
.woocommerce-MyAccount-navigation ul li:not(:last-child) {
    margin-bottom: .75rem;
}
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 0.375rem 0.75rem;
    padding-left: 2.5rem;
    text-decoration: none;
    font-weight: bold;
    color: var(--color-dark);
    transition: all .25s ease;
}
.woocommerce-MyAccount-navigation ul li a:hover {
    padding-left: 3rem;
}
/* Buttons */
.woocommerce-Button.button,
.wc-block-cart__submit-container a {
    background-color: var(--color-dark) !important;
    color: #fff !important;
}
.button {
    color: var(--color-dark) !important;
    background-color: transparent !important;    
    font-weight: normal !important;
    border: 1px solid var(--color-dark) !important;
    border-radius: .375em !important;
    transition: all .25s ease;
}
.button:hover {
    color: #fff !important;
    background-color: var(--color-dark) !important;

}
.wc-block-components-totals-coupon__button {
    color: #FFF;
    background-color: var(--color-dark) !important;
    border-radius: .25rem !important;
    border: none !important;
}
.wc-block-components-totals-coupon__button:hover {
    color: #FFF;
    background-color: var(--color-dark-20) !important;
}
.wc-block-components-totals-coupon__button[disabled] {
    color: var(--color-dark) !important;
    background-color: var(--color-gray) !important;
}
/* Estilo de campos de entrada de WooCommerce */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea {
    border: 1px solid #ced4da;
    border-radius: 0.375em;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
}

.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce textarea:focus {
    border-color: var(--color-gray);
    outline: 0;                /* Sin contorno */
    box-shadow: none;          /* Sin sombra al enfocar */
}

/* Product Details Page */
/* Onsale tag */
.woocommerce span.onsale {
    top: 12px;
    left: 12px;
    display: inline-block;        /* Permite que el contenedor se ajuste al contenido */
    padding: 5px;                /* Espacio alrededor del texto */
    background-color: var(--color-accent);  /* Color de fondo */
    color: white;                /* Color del texto */
    border-radius: 50%;          /* Hace que los bordes sean redondeados */
    text-align: center;          /* Centra el texto */
    width: 70px;                 /* Ancho fijo para un círculo */
    height: 70px;                /* Altura fija para un círculo */
    line-height: 60px;           /* Centra verticalmente el texto */
    font-weight: bold;      
}
/* Tabs */
.woocommerce-tabs.wc-tabs-wrapper .tabs.wc-tabs {
    margin-bottom: 0 !important;
}
.woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 1.5rem !important;
    background-color: #fff;
    border-bottom-left-radius: .75rem;
    border-bottom-right-radius: .75rem;
    border-top-right-radius: .75rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs::before {
    border: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li:not(.active) {
    background-color: var(--color-gray-80);
}
/* Product gallery */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    border-radius: .75rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
/* Product summary */
.summary.entry-summary .product_title {
    font-size: 2rem;
    font-weight: bold;
}
.summary.entry-summary .price {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    color: var(--color-dark) !important;
    font-weight: bold;
    margin-bottom: 0;
}
.summary.entry-summary .price ins {
    text-decoration: none !important;
}
.summary.entry-summary .price del,
.summary.entry-summary .price ins {
    display: flex !important;
    align-items: center !important;
}
.summary.entry-summary .price del .woocommerce-Price-amount.amount {
    font-size: 14px;
    font-weight: normal;
}
.summary.entry-summary .price ins .woocommerce-Price-amount.amount {
    margin-right: .25rem;
}
.summary.entry-summary .cart {
    /* padding-top: .35rem !important; */
    padding-bottom: .35rem !important;
    margin-bottom: 0 !important;
}
.summary.entry-summary .cart .quantity {
    margin-right: 12px !important;
}
.summary.entry-summary .cart .quantity input {
    border: none;
}
.summary.entry-summary .cart .single_add_to_cart_button.button.alt {
    font-size: 1rem;
    font-weight: normal;
    text-transform: uppercase;
    color: #fff !important;
    background-color: var(--color-dark) !important;
    transition: all .25s ease;
}
.summary.entry-summary .cart .single_add_to_cart_button.button.alt:hover {
    color: #fff !important;
    background-color: var(--color-dark-20) !important;
}
.summary.entry-summary .stock.in-stock {
    color: green !important;
}
.summary.entry-summary .stock.out-of-stock {
    color: red !important;
}
/* .summary.entry-summary .cart .single_variation_wrap .woocommerce-variation-availability .stock.in-stock {
    color: green !important;
}
.summary.entry-summary .cart .single_variation_wrap .woocommerce-variation-availability .stock.out-of-stock {
    color: red !important;
} */
.summary.entry-summary .cart .variations .cfvsw-swatches-container.cfvsw-product-container[swatches-attr="attribute_pa_color"] .cfvsw-swatches-option,
.summary.entry-summary .cart .variations .cfvsw-swatches-container.cfvsw-product-container[swatches-attr="attribute_pa_color"] .cfvsw-swatches-option.cfvsw-swatches-blur-cross-disable::before {
    background-color: transparent !important;
}
.summary.entry-summary .cart .variations .cfvsw-swatches-container.cfvsw-product-container[swatches-attr="attribute_pa_color"] .cfvsw-swatches-option .cfvsw-swatch-inner {
    border: none !important;
}
.summary.entry-summary .cart .variations .cfvsw-swatches-container.cfvsw-product-container .cfvsw-label-option.cfvsw-swatches-blur-cross-disable {
    overflow: hidden !important;
}
.summary.entry-summary .cart .variations .cfvsw-swatches-container .cfvsw-label-option:not(.cfvsw-swatches-disabled):hover {
    background-color: var(--color-dark);
    color: #fff;
}
.summary.entry-summary .cart .variations .cfvsw-swatches-container .cfvsw-label-option.cfvsw-selected-swatch {
    background-color: var(--color-dark);
    color: #fff;
}
.summary.entry-summary .cart .variations .cfvsw-swatches-container .cfvsw-swatches-option, 
.summary.entry-summary .cart .variations .cfvsw-swatches-container .cfvsw-label-option {
    border: none !important;
} 
.summary.entry-summary .cart .variations .reset_variations {
    margin-left: .75rem;
}
/* Product meta  */
.summary.entry-summary .product_meta {
    display: flex;
    flex-direction: column;
    padding-bottom: .35rem;
}
.summary.entry-summary .product_meta .sku_wrapper,
.summary.entry-summary .product_meta .posted_in,
.summary.entry-summary .product_meta .tagged_as {
    font-weight: bold;
}
.summary.entry-summary .product_meta .sku_wrapper span,
.summary.entry-summary .product_meta .posted_in a,
.summary.entry-summary .product_meta .tagged_as a {
    font-weight: normal;
}
.summary.entry-summary .product_meta .technical_sheet {
    margin-top: 1rem;
}
/* .summary.entry-summary .product_meta a {
    text-decoration: none !important;
} */
/* Divider */
.summary.entry-summary .divider {
    margin: 1.5rem 0;
    width: 50%;
    height: 1px;
    background-color: var(--color-gray-80);
}
/* Related products */
.related.products {
    display: none !important;
}
/* Messages */
.woocommerce-notices-wrapper ul li {
    padding-left: 3rem !important;
}
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    color: var(--color-dark) !important;
    background-color: #fff !important;
    border-top: none;
    border-radius: .75rem;

    outline: none; /* Elimina el contorno */
    box-shadow: 0 0 0;
}
/* Cart Page */
.wc-block-components-main {
    padding: 1rem !important;
    background-color: #fff;
    border-radius: .75rem;
}
/* .wc-block-components-main table tbody tr:last-child {
    border-bottom: 1px solid transparent !important;
} */
.wc-block-cart__submit a {
    color: #fff;
    background-color: var(--color-dark);
    border-radius: .375rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .25s ease;
}
.wc-block-cart__submit a:hover,
.wc-block-cart__submit a:focus {
    color: #fff;
    background-color: var(--color-dark-20) !important;
    outline: none !important;
    box-shadow: 0 0 0 !important;
}
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-totals-block {
    margin-top: 0 !important;
}
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
    border-radius: .75rem !important;
}
/* Woocommerce Pagination */
.woocommerce-pagination ul.page-numbers {
    border: none !important;
    padding: .5rem !important;
    background-color: #FFF !important;
    border-radius: .25rem !important;
}
.woocommerce-pagination .page-numbers li {
    background-color: #FFF;
    border-right: none !important;
    border-radius: .25rem;
}
.woocommerce-pagination .page-numbers li:not(:last-child) {
    margin-right: .5rem;
}
.woocommerce-pagination .page-numbers li .page-numbers {
    padding: .375rem .75rem;
}
.woocommerce-pagination .page-numbers li .page-numbers:hover {
    color: var(--color-dark) !important;
    background-color: var(--color-gray-95) !important;
}
.woocommerce-pagination .page-numbers li .page-numbers.current {
    color: #FFF !important;
    background-color: var(--color-dark) !important;
    transition: all .25s ease;
}
.woocommerce-pagination .page-numbers li a {
    color: var(--color-dark);
}
.woocommerce-pagination .page-numbers li a:hover,
.woocommerce-pagination .page-numbers li a:focus,
.woocommerce-pagination .page-numbers li a:active {
    color: var(--color-dark) !important;
    background-color: var(--color-gray-95) !important;
}

/* ===================== end-> Woocommerce ===================== */