/* =========================================================
   MIKE STORE
   TIENDA ONLINE
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #ffffff;
    color: #111827;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   TOPBAR - ESTILO 
========================================================= */

.mike-topbar {
    position: relative;

    width: 100%;
    height: 38px;

    overflow: hidden;

    background: #eeeeee;
    color: #111111;

    display: flex;
    align-items: center;

    border: 0;

    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   VENTANA DEL TICKER
========================================================= */

.mike-topbar__viewport {
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   PISTA EN MOVIMIENTO
========================================================= */

.mike-topbar__track {
    display: flex;
    align-items: center;

    width: max-content;

    will-change: transform;

    animation: mikeTopbarTicker 30s linear infinite;
}


/* =========================================================
   CADA GRUPO
========================================================= */

.mike-topbar__group {
    flex-shrink: 0;

    width: 100vw;
    height: 38px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}


/* =========================================================
   TEXTOS
========================================================= */

.mike-topbar__group span {
    display: block;

    padding: 0 28px;

    color: #111111;

    /*
       Apariencia más condensada como 
    */
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    font-stretch: condensed;

    line-height: 38px;

    text-align: center;
    white-space: nowrap;

    letter-spacing: -0.25px;
}


/* =========================================================
   MOVIMIENTO CONTINUO
========================================================= */

@keyframes mikeTopbarTicker {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100vw);
    }

}


/* =========================================================
   PAUSA AL PASAR EL MOUSE
========================================================= */

.mike-topbar:hover .mike-topbar__track {
    animation-play-state: paused;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .mike-topbar__group {
        width: 1400px;
        grid-template-columns: repeat(4, 350px);
    }

    .mike-topbar__track {
        animation-duration: 34s;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

    .mike-topbar {
        height: 34px;
    }

    .mike-topbar__group {
        width: 1200px;
        height: 34px;

        grid-template-columns: repeat(4, 300px);
    }

    .mike-topbar__group span {
        padding: 0 20px;

        font-size: 11px;
        line-height: 34px;
    }

}


/* =========================================================
   HEADER / NAVBAR - ESTILO 
========================================================= */

.mike-navbar {
    position: relative;
    width: 100%;
    height: 69px;

    background: #ffffff;

    /*  NO TIENE LÍNEA SEPARADORA AQUÍ */
    border-bottom: 1px solid #222222;

    z-index: 100;
}

.mike-navbar.mike-navbar--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    z-index: 9999;

    /* Transparencia solamente cuando hacemos scroll */
    background: rgba(255, 255, 255, 0.62);

    /* Efecto vidrio */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    /* Separación muy sutil */
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.mike-navbar__inner {
    position: relative;

    width: 100%;
    height: 69px;

    margin: 0 auto;
    padding: 0 30px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;

    gap: 20px;
}


/* =========================================================
   MENÚ IZQUIERDO
========================================================= */

.mike-navbar__menu {
    height: 100%;

    display: flex;
    align-items: center;

    gap: 5px;

    white-space: nowrap;
}

.mike-navbar__menu a {
    position: relative;

    display: flex;
    align-items: center;

    padding: 9px 11px;

    color: #050505;

    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.45px;

    text-transform: uppercase;

    border-radius: 999px;

    transition:
        background-color .18s ease,
        color .18s ease;
}

.mike-navbar__menu a:hover {
    opacity: 1;
    color: #ffffff;
    background: #000000;
    border-radius: 999px;
    
}


/* =========================================================
    NO USA SUBRAYADO AZUL EN EL MENÚ
========================================================= */

.mike-navbar__menu a::after {
    display: none;
}

.mike-navbar__menu a.active {
    color: #050505;
}

.mike-navbar__menu a.active:hover {
    color: #ffffff;
    background: #000000;
}


/* =========================================================
   LOGO CENTRAL
========================================================= */

.mike-navbar__logo {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 2;
}

.mike-navbar__logo a {
    display: block;
    color: #000000;
}


/* LOGO MIKE */

.mike-logo-text {
    height: 57px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #000000;
}

.mike-logo-m {
    display: block;

    font-family: "Arial Black", Arial, sans-serif;

    font-size: 55px;
    font-weight: 900;

    line-height: .85;

    letter-spacing: -6px;
}

.mike-logo-side {
    height: 50px;

    margin-left: 7px;
    padding-left: 7px;

    border-left: 2px solid #000000;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    color: #000000;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;

    line-height: 1;
}

.mike-logo-side b {
    font-weight: 400;
}


/* =========================================================
   ZONA DERECHA
========================================================= */

.mike-navbar__tools {
    grid-column: 3;

    min-width: 0;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 24px;
}


/* =========================================================
   BUSCADOR
========================================================= */

.mike-search {
    width: 181px;
    height: 43px;

    padding: 0 5px 0 17px;

    display: flex;
    align-items: center;

    background: #f1f1f1;

    border: 0;
    border-radius: 999px;
}

.mike-search:focus-within {
    background: #eeeeee;

    border: 0;
    box-shadow: none;
}

.mike-search input {
    min-width: 0;
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #111111;

    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
}

.mike-search input::placeholder {
    color: #777777;
    opacity: 1;
}

.mike-search button {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    background: transparent;

    color: #050505;

    font-size: 19px;

    cursor: pointer;
}


/* =========================================================
   CUENTA / CARRITO
========================================================= */

.mike-tool {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #050505;

    text-decoration: none;
}


/*
    SOLO MUESTRA LOS ICONOS.
   Ocultamos "Mi cuenta" y "Mi carrito".
*/

.mike-tool > span {
    display: none;
}

.mike-tool > i {
    font-size: 20px;
    font-weight: 400;
}

.mike-tool:hover {
    color: #050505;
    opacity: .65;
}


/* =========================================================
   CARRITO
========================================================= */

.mike-cart {
    margin-left: 2px;
}

.mike-cart__icon {
    position: relative;

    width: 29px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.mike-cart__icon > i {
    color: #050505;
    font-size: 23px;
	
}

.mike-cart__count {
    position: absolute;

    top: -2px;
    right: -9px;

    min-width: 17px;
    height: 17px;

    padding: 0 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 999px;

    background: #000000;
    color: #ffffff;

    font-size: 9px;
    font-weight: 700;

    line-height: 17px;
}


/* =========================================================
   RESPONSIVE HEADER
========================================================= */

@media (max-width: 1250px) {

    .mike-navbar__inner {
        padding: 0 20px;
    }

    .mike-navbar__menu {
        gap: 16px;
    }

    .mike-navbar__menu a {
        font-size: 11px;
    }

    .mike-search {
        width: 165px;
    }

}

/* =========================================================
   ESPACIO TEMPORAL
   Después será reemplazado por HERO
   ========================================================= */

#mike-hero {
    min-height: 260px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );
}


/* =========================================================
   RESPONSIVE INICIAL
   Lo perfeccionaremos al terminar la plantilla.
   ========================================================= */

@media (max-width: 1250px) {

    .mike-navbar__menu {
        gap: 15px;
    }

    .mike-navbar__menu a {
        font-size: 11px;
    }

    .mike-search {
        width: 190px;
    }

    .mike-tool span {
        display: none;
    }
}

/* =========================================================
   HERO PRINCIPAL - MIKE STORE
   ESTILO VISUAL TIPO 
========================================================= */

.mike-hero {
    width: 100%;
    padding: 0 22px;
    background: #ffffff;
}


/* =========================================================
   SLIDER
========================================================= */

.mike-hero-slider {
    position: relative;

    width: 100%;
    height: clamp(430px, 60vh, 540px);

    overflow: hidden;

    background: #eeeeee;

    border-radius: 0 0 16px 16px;
}


/* =========================================================
   SLIDES
========================================================= */

.mike-hero-slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .65s ease,
        visibility .65s ease;
}


.mike-hero-slide.active {
    opacity: 1;
    visibility: visible;

    z-index: 2;
}


/* =========================================================
   IMAGEN
========================================================= */

.mike-hero-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   SOMBRA SOBRE LA IMAGEN
   MUCHO MÁS SUAVE QUE LA ANTERIOR
========================================================= */

.mike-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .38) 0%,
            rgba(0, 0, 0, .18) 28%,
            rgba(0, 0, 0, .03) 55%,
            rgba(0, 0, 0, 0) 75%
        );
}


/* =========================================================
   CONTENIDO
   ABAJO A LA IZQUIERDA COMO LA REFERENCIA
========================================================= */

.mike-hero-content {
    position: absolute;

    z-index: 5;

    left: 32px;
    bottom: 50px;

    top: auto;

    max-width: 570px;

    transform: none;

    color: #ffffff;
}


/* =========================================================
   TEXTO PEQUEÑO SUPERIOR
========================================================= */

.mike-hero-label {
    display: block;

    min-height: 0;

    margin: 0 0 10px;
    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 0;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    color: #ffffff;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0;

    text-transform: uppercase;
}


/* =========================================================
   TÍTULO PRINCIPAL
========================================================= */

.mike-hero-content h1,
.mike-hero-content h2 {
    max-width: 520px;

    margin: 0 0 26px;

    color: #ffffff;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 40px;
    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -0.8px;

    text-transform: uppercase;

    text-shadow: none;
}


/*
   Eliminamos la diferencia de peso
   que tenía STRONG anteriormente
*/

.mike-hero-content h1 strong,
.mike-hero-content h2 strong {
    font-weight: inherit;
}


/* =========================================================
   EL PÁRRAFO ANTERIOR YA NO SE UTILIZA
========================================================= */

.mike-hero-content p {
    display: none;
}


/* =========================================================
   BOTÓN
========================================================= */

.mike-hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 200px;
    height: 52px;

    padding: 0 28px;

    background: #ffffff;
    color: #080808;

    border: 0;
    border-radius: 999px;

    box-shadow: none;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: -0.3px;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        background-color .2s ease,
        color .2s ease;
}


.mike-hero-button:hover {
    transform: none;

    background: #000000;
    color: #ffffff;

    box-shadow: none;
}


/* =========================================================
   OCULTAR COMPLETAMENTE FLECHAS ANTERIORES
========================================================= */

.mike-hero-arrow,
.mike-hero-prev,
.mike-hero-next {
    display: none !important;
}


/* =========================================================
   OCULTAR INDICADORES ANTERIORES
========================================================= */

.mike-hero-dots,
.mike-hero-dot {
    display: none !important;
}


/* =========================================================
   INDICADOR MINIMALISTA
========================================================= */

.mike-hero-indicator {
    position: absolute;

    z-index: 10;

    left: 50%;
    bottom: 11px;

    width: 8px;
    height: 8px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;
}


.mike-hero-indicator span {
    display: block;

    width: 8px;
    height: 8px;

    background: #050505;

    border-radius: 50%;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .mike-hero {
        padding: 0 14px;
    }

    .mike-hero-slider {
        height: 500px;
        border-radius: 0 0 14px 14px;
    }

    .mike-hero-content {
        left: 28px;
        bottom: 42px;

        max-width: 470px;
    }

    .mike-hero-content h1,
    .mike-hero-content h2 {
        font-size: 38px;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 600px) {

    .mike-hero {
    width: 100%;
    padding: 0;
    margin: 0;
}

.mike-hero-slider {
    width: 100%;
    height: 460px;
    border-radius: 0;
}

    .mike-hero-image {
        object-position: center;
    }

    .mike-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(0,0,0,.48) 0%,
                rgba(0,0,0,.10) 55%,
                rgba(0,0,0,0) 80%
            );
    }

    .mike-hero-content {
        left: 22px;
        right: 22px;
        bottom: 38px;

        max-width: none;
    }

    .mike-hero-label {
        margin-bottom: 8px;

        font-size: 11px;
    }

    .mike-hero-content h1,
    .mike-hero-content h2 {
        margin-bottom: 20px;

        font-size: 31px;

        line-height: 1.02;

        letter-spacing: -.8px;
    }

    .mike-hero-button {
        min-width: 175px;
        height: 49px;

        padding: 0 24px;

        font-size: 12px;
    }

}

/* =========================================================
   PASO 4 - BENEFICIOS MIKE STORE
========================================================= */

/*.mike-beneficios {
    width: 100%;
    padding: 34px 24px;
    background: #ffffff;
}

.mike-beneficios-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    background: #f7f8fa;
    border: 1px solid #edf0f4;
    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 8px 30px rgba(15, 23, 42, 0.04);
}

.mike-beneficio-item {
    position: relative;

    display: flex;
    align-items: center;

    gap: 17px;

    min-height: 112px;
    padding: 24px 28px;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


/* SEPARADORES */
/*
.mike-beneficio-item:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 25%;

    width: 1px;
    height: 50%;

    background: #dfe4ea;
}
*/

/* ICONO */
/*
.mike-beneficio-icon {
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;
    border: 1px solid #e2e7ee;

    font-size: 21px;
    color: #071426;

    transition: all 0.25s ease;
}
*/

/* INFORMACIÓN */
/*
.mike-beneficio-info {
    min-width: 0;
}

.mike-beneficio-info h3 {
    margin: 0 0 6px;

    color: #071426;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.3px;
}

.mike-beneficio-info p {
    margin: 0;

    color: #687386;

    font-size: 12px;
    line-height: 1.45;
}
*/

/* HOVER */
/*
.mike-beneficio-item:hover {
    background: #ffffff;
}

.mike-beneficio-item:hover .mike-beneficio-icon {
    background: #1769ff;
    border-color: #1769ff;
    color: #ffffff;

    transform: translateY(-2px);
}
*/

/* =========================================================
   TABLET
========================================================= */
/*
@media (max-width: 1100px) {

    .mike-beneficios-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .mike-beneficio-item:nth-child(2)::after {
        display: none;
    }

    .mike-beneficio-item:nth-child(-n+2) {
        border-bottom: 1px solid #e5e9ef;
    }
}
*/

/* =========================================================
   CELULAR
========================================================= */
/*
@media (max-width: 650px) {

    .mike-beneficios {
        padding: 18px 14px;
    }

    .mike-beneficios-container {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }

    .mike-beneficio-item {
        min-height: 92px;
        padding: 18px 20px;
    }

    .mike-beneficio-item::after {
        display: none !important;
    }

    .mike-beneficio-item:not(:last-child) {
        border-bottom: 1px solid #e5e9ef;
    }

    .mike-beneficio-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;

        font-size: 18px;
    }

    .mike-beneficio-info h3 {
        font-size: 12px;
    }

    .mike-beneficio-info p {
        font-size: 11px;
    }
}
*/
/* =========================================================
   PASO 5 - LIQUIDACIÓN
   ESTRUCTURA VISUAL TIPO 
========================================================= */

.mike-liquidacion {
    width: 100%;
    margin: 0;
    padding: 40px 32px 65px;

    background: #ffffff;
}


/* =========================================================
   CONTENEDOR PRINCIPAL
   TEXTO + 4 PRODUCTOS
========================================================= */

.mike-liquidacion-container {
    width: 100%;
    max-width: 1540px;

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        350px
        repeat(4, minmax(0, 1fr));

    column-gap: 12px;
    align-items: center;

    /* ELIMINAMOS COMPLETAMENTE EL BANNER ANTERIOR */
    min-height: 0;

    overflow: visible;

    background: #ffffff;

    border: 0;
    border-radius: 0;

    box-shadow: none;
}


/* ELIMINAMOS DECORACIONES DEL DISEÑO AZUL */

.mike-liquidacion-container::before,
.mike-liquidacion-container::after {
    display: none;
    content: none;
}


/* =========================================================
   INFORMACIÓN IZQUIERDA
========================================================= */

.mike-liquidacion-info {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    padding: 0 30px 0 20px;

    background: transparent;

    color: #080808;
}


/* TÍTULO */

.mike-liquidacion-info h2 {
    margin: 0 0 24px;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 24px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.5px;

    text-transform: uppercase;
}


/* DESCRIPCIÓN */

.mike-liquidacion-info p {
    max-width: 290px;

    margin: 0 0 38px;

    color: #444444;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.65;
}


/* =========================================================
   BOTÓN NEGRO
========================================================= */

.mike-liquidacion-btn {
    min-width: 200px;
    height: 55px;

    padding: 0 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #000000;
    color: #ffffff;

    border: 0;
    border-radius: 999px;

    box-shadow: none;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.mike-liquidacion-btn:hover {
    color: #ffffff;
    background: #000000;

    opacity: .8;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   TARJETA PRODUCTO
========================================================= */

.mike-liquidacion-card {
    min-width: 0;

    margin: 0;
    padding: 0;

    background: transparent;

    text-align: center;
}


/* =========================================================
   ÁREA DE IMAGEN
========================================================= */

.mike-liquidacion-imagen {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #f5f5f5;

    border-radius: 9px;

    text-decoration: none;
}


/* =========================================================
   IMAGEN DEL PRODUCTO
========================================================= */

.mike-liquidacion-imagen img {
    display: block;

    width: 92%;
    height: 92%;

    object-fit: contain;
    object-position: center;
}


/* =========================================================
   ETIQUETA DESCUENTO
========================================================= */

.mike-liquidacion-descuento {
    position: absolute;

    top: 10px;
    left: 10px;

    z-index: 5;

    min-width: 47px;
    height: 36px;

    padding: 0 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #000000;
    color: #ffffff;

    border-radius: 999px;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 800;

    line-height: 1;
}


/* =========================================================
   INFORMACIÓN DE PRODUCTO
========================================================= */

.mike-liquidacion-detalle {
    padding: 20px 8px 0;

    text-align: center;
}


/* NOMBRE */

.mike-liquidacion-detalle h3 {
    min-height: 42px;

    margin: 0 0 10px;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.25;

    letter-spacing: -0.3px;
}


/* =========================================================
   PRECIOS
========================================================= */

.mike-liquidacion-precios {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 4px;

    white-space: nowrap;
}

.mike-precio-anterior {
    color: #777777;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 400;

    text-decoration: line-through;
}

.mike-liquidacion-precios strong {
    color: #080808;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .mike-liquidacion {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mike-liquidacion-container {
        grid-template-columns:
            260px
            repeat(4, minmax(190px, 1fr));

        overflow-x: auto;
    }

    .mike-liquidacion-info {
        padding-left: 10px;
        padding-right: 20px;
    }

}




/* =========================================================
   PASO 6 - CATEGORÍAS / ESTILO 
========================================================= */

.mike-categorias {
    width: 100%;
    padding: 38px 52px 55px;
    background: #ffffff;
}


/* =========================================================
   TÍTULO
========================================================= */

.mike-categorias-header {
    width: 100%;
    margin: 0 0 24px;
    padding: 0;

    display: block;
}

.mike-categorias-header h2 {
    margin: 0;
    padding: 0;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 24px;
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.5px;

    text-transform: uppercase;
}


/* =========================================================
   SLIDER
========================================================= */

.mike-categorias-slider {
    position: relative;

    width: 100%;
    margin: 0;
    padding: 0;
}


/* =========================================================
   VENTANA
========================================================= */

.mike-categorias-viewport {
    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


/* =========================================================
   TRACK
========================================================= */

.mike-categorias-track {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin: 0;
    padding: 0;

    will-change: transform;

    transition:
        transform .65s cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   TARJETA
   3 CATEGORÍAS VISIBLES
========================================================= */

.mike-categoria-card {
    flex: 0 0 calc((100% - 20px) / 3);

    min-width: 0;

    display: block;

    margin: 0;
    padding: 0;

    color: #080808;

    text-decoration: none;
}


/* =========================================================
   IMAGEN
========================================================= */

.mike-categoria-imagen {
    position: relative;

    width: 100%;
    aspect-ratio: 4 / 5;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #f3f3f3;

    border-radius: 9px;
}


/* =========================================================
   FOTO
========================================================= */

.mike-categoria-imagen img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform .45s ease;
}


.mike-categoria-card:hover .mike-categoria-imagen img {
    transform: scale(1.02);
}


/* =========================================================
   NOMBRE DE CATEGORÍA
========================================================= */

.mike-categoria-card h3 {
    margin: 20px 0 0;
    padding: 0;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 18px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.3px;

    text-align: center;
    text-transform: uppercase;
}


/* =========================================================
   FLECHAS
========================================================= */

.mike-categorias-arrow {
    position: absolute;

    top: calc(50% - 20px);

    z-index: 20;

    width: 54px;
    height: 54px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: #000000;
    color: #ffffff;

    font-size: 18px;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.mike-categorias-arrow:hover {
    background: #000000;

    transform:
        translateY(-50%)
        scale(1.04);
}


/* IZQUIERDA */

.mike-categorias-prev {
    left: 10px;
}


/* DERECHA */

.mike-categorias-next {
    right: 10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .mike-categorias {
        padding:
            35px 25px
            50px;
    }

    .mike-categoria-card {
        flex-basis:
            calc((100% - 10px) / 2);
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 650px) {

    .mike-categorias {
        width: 100%;
        padding: 38px 19px 48px;
    }

    .mike-categorias-header {
        margin-bottom: 25px;
    }

    .mike-categorias-header h2 {
    font-family: "Roboto Condensed", sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.25px !important;

    color: #080808 !important;

    margin: 0;
    text-align: center;
}

    .mike-categorias-track {
        gap: 10px;
    }

    .mike-categoria-card {
        flex: 0 0 calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
        min-width: calc((100% - 10px) / 2);
    }

    .mike-categoria-imagen {
        width: 100%;
        aspect-ratio: 4 / 5;
        border-radius: 9px;
    }

    .mike-categoria-card h3 {
    font-family: "Roboto Condensed", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.15px !important;

    color: #080808 !important;

    margin: 17px 0 0;
    text-align: center;
}

    .mike-categorias-arrow {
        width: 46px;
        height: 46px;

        top: 50%;

        background: #000000;
        color: #ffffff;

        font-size: 15px;
    }

    .mike-categorias-prev {
        left: 0;
    }

    .mike-categorias-next {
        right: 0;
    }

}

/* =========================================================
   PASO 7 - CATÁLOGO HOMBRE / ESTILO 
========================================================= */

#mike-catalogo-hombre {
    position: relative;

    width: calc(100% - 104px);

    margin: 0 auto;

    padding: 10px 0 55px;

    background: #ffffff;

    overflow: visible;

    border-top: 1px solid #222222;
}

#mike-catalogo-hombre .mike-catalog-inner {
    width: calc(100% - 70px);
    max-width: 1540px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    align-items: center;
    gap: 30px;
}


/* =========================
   TÍTULO LATERAL
========================= */

#mike-catalogo-hombre .mike-catalog-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
}

#mike-catalogo-hombre .mike-catalog-title h2 {
    margin: 0;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 24px;
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.5px;

    text-transform: uppercase;
    white-space: nowrap;
}


/* =========================
   CONTENEDOR DEL SLIDER
========================= */

#mike-catalogo-hombre .mike-products-slider {
    position: relative;
    width: 100%;
}

#mike-catalogo-hombre .mike-products-viewport {
    width: 100%;
    overflow: hidden;
}

#mike-catalogo-hombre .mike-products-track {
    display: flex;
    gap: 12px;
    transition: transform 0.55s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}


/* =========================
   PRODUCTO
========================= */

#mike-catalogo-hombre .mike-product-card {
    flex: 0 0 calc((100% - 24px) / 3);
    min-width: 0;
    text-align: center;
}

#mike-catalogo-hombre .mike-product-image {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 1 / 1.08;

    background: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
}

#mike-catalogo-hombre .mike-product-image img {
    display: block;
    width: 90%;
    height: 90%;
    object-fit: contain;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}

#mike-catalogo-hombre .mike-product-image:hover img {
    transform: scale(1.035);
}


/* =========================
   INFORMACIÓN PRODUCTO
========================= */

#mike-catalogo-hombre .mike-product-info {
    padding: 18px 8px 0;
}

#mike-catalogo-hombre .mike-product-info h3 {
    margin: 0 0 8px;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.2;
    letter-spacing: -0.35px;
}

#mike-catalogo-hombre .mike-product-price {
    margin: 0;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 700;

    line-height: 1;
    letter-spacing: -0.25px;
}


/* =========================
   FLECHAS
========================= */

#mike-catalogo-hombre .mike-products-arrow {
    position: absolute;
    top: 43%;
    transform: translateY(-50%);

    z-index: 20;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;
    border-radius: 50%;

    background: #000000;
    color: #ffffff;

    font-size: 16px;
    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

#mike-catalogo-hombre .mike-products-arrow:hover {
    transform: translateY(-50%) scale(1.06);
}

#mike-catalogo-hombre .mike-products-prev {
    left: -21px;
}

#mike-catalogo-hombre .mike-products-next {
    right: -21px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    #mike-catalogo-hombre .mike-catalog-inner {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 20px;
    }

    #mike-catalogo-hombre .mike-catalog-title h2 {
        font-size: 23px;
    }

    #mike-catalogo-hombre .mike-product-card {
        flex: 0 0 calc((100% - 12px) / 2);
    }
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

    #mike-catalogo-hombre {
        padding: 45px 0 55px;
    }

    #mike-catalogo-hombre .mike-catalog-inner {
        width: calc(100% - 30px);
        display: block;
    }

    #mike-catalogo-hombre .mike-catalog-title {
        justify-content: flex-start;
        min-height: auto;
        margin-bottom: 25px;
    }

    #mike-catalogo-hombre .mike-catalog-title h2 {
        font-size: 24px;
        white-space: normal;
    }

    #mike-catalogo-hombre .mike-product-card {
        flex: 0 0 82%;
    }

    #mike-catalogo-hombre .mike-products-track {
        gap: 12px;
    }

    #mike-catalogo-hombre .mike-products-prev {
        left: 8px;
    }

    #mike-catalogo-hombre .mike-products-next {
        right: 8px;
    }

    #mike-catalogo-hombre .mike-products-arrow {
        width: 40px;
        height: 40px;
    }
}

/* =========================================================
   CATÁLOGO HOMBRE - MÓVIL DEFINITIVO
========================================================= */

@media (max-width: 767px) {

    #mike-catalogo-hombre {
        width: 100%;
        margin: 0;
        padding: 38px 0 48px;

        border-top: 1px solid #222222;

        overflow: hidden;
    }


    /* =========================
       ESTRUCTURA
    ========================= */

    #mike-catalogo-hombre .mike-catalog-inner {
        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;

        display: block;
    }


    /* =========================
       TÍTULO
    ========================= */

    #mike-catalogo-hombre .mike-catalog-title {
        width: 100%;
        min-height: 0;

        margin: 0 0 30px;
        padding: 0 18px;

        display: flex;
        align-items: center;
        justify-content: center;

        text-align: center;
    }

    #mike-catalogo-hombre .mike-catalog-title h2 {
        margin: 0;

        color: #080808;

        font-family:
            "Roboto Condensed",
            "Arial Narrow",
            Arial,
            sans-serif;

        font-size: 18px;
        font-weight: 800;

        line-height: 1;

        letter-spacing: -0.45px;

        text-align: center;
        white-space: nowrap;
    }


    /* =========================
       SLIDER
    ========================= */

    #mike-catalogo-hombre .mike-products-slider {
        position: relative;

        width: 100%;

        margin: 0;
        padding: 0 14px;
    }

    #mike-catalogo-hombre .mike-products-viewport {
        width: 100%;

        overflow: hidden;
    }

    #mike-catalogo-hombre .mike-products-track {
        display: flex;
        align-items: stretch;

        gap: 10px;

        transition:
            transform .55s cubic-bezier(.22,.61,.36,1);

        will-change: transform;
    }


    /* =========================
       DOS PRODUCTOS VISIBLES
    ========================= */

    #mike-catalogo-hombre .mike-product-card {
        flex: 0 0 calc((100% - 10px) / 2);

        width: calc((100% - 10px) / 2);
        min-width: calc((100% - 10px) / 2);

        margin: 0;
        padding: 0;

        text-align: center;
    }


    /* =========================
       IMAGEN
    ========================= */

    #mike-catalogo-hombre .mike-product-image {
        width: 100%;
        aspect-ratio: 1 / 1;

        overflow: hidden;

        border-radius: 8px;
    }

    #mike-catalogo-hombre .mike-product-image img {
        display: block;

        width: 92%;
        height: 92%;

        margin: auto;

        object-fit: contain;
        object-position: center;
    }


    /* =========================
       INFORMACIÓN
    ========================= */

    #mike-catalogo-hombre .mike-product-info {
        padding: 14px 3px 0;

        text-align: center;
    }

    #mike-catalogo-hombre .mike-product-info h3,
    #mike-catalogo-hombre .mike-product-info h2 {
        min-height: 0;

        margin: 0 0 8px;

        color: #080808;

        font-family:
            "Roboto Condensed",
            "Arial Narrow",
            Arial,
            sans-serif;

        font-size: 13px;
        font-weight: 700;

        line-height: 1.25;

        letter-spacing: -0.2px;

        text-align: center;
    }

    #mike-catalogo-hombre .mike-product-price {
        color: #080808;

        font-family:
            "Roboto Condensed",
            "Arial Narrow",
            Arial,
            sans-serif;

        font-size: 13px;
        font-weight: 700;

        line-height: 1.2;

        text-align: center;
    }


    /* =========================
       FLECHAS
    ========================= */

    #mike-catalogo-hombre .mike-products-arrow {
        position: absolute;

        top: 42%;

        width: 36px;
        height: 36px;

        display: flex;
        align-items: center;
        justify-content: center;

        transform: translateY(-50%);

        background: #000000;
        color: #ffffff;

        border: 0;
        border-radius: 50%;

        font-size: 12px;

        z-index: 20;
    }

    #mike-catalogo-hombre .mike-products-prev {
        left: 8px;
    }

    #mike-catalogo-hombre .mike-products-next {
        right: 8px;
    }
}


/* =========================================================
   CATÁLOGO HOMBRE - MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 420px) {

    #mike-catalogo-hombre .mike-products-slider {
        padding-left: 12px;
        padding-right: 12px;
    }

    #mike-catalogo-hombre .mike-products-track {
        gap: 8px;
    }

    #mike-catalogo-hombre .mike-product-card {
        flex-basis: calc((100% - 8px) / 2);

        width: calc((100% - 8px) / 2);
        min-width: calc((100% - 8px) / 2);
    }
}

/* =========================================================
   PASO 8 - CATÁLOGO MUJER
========================================================= */

#mike-catalogo-mujer {
    width: 100%;
    margin-top: 0px;
    padding: 0 3.2%;
}


/* =========================================================
   TÍTULO
========================================================= */

#mike-catalogo-mujer .mike-product-catalog-header {
    width: 100%;
    text-align: center;

    margin: 0 0 30px;
}

#mike-catalogo-mujer .mike-product-catalog-header h2 {
    margin: 0;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 24px;
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.5px;

    text-transform: uppercase;
}


/* =========================================================
   SLIDER
========================================================= */

#mike-catalogo-mujer .mike-products-slider {
    position: relative;
    width: 100%;
}


/* =========================================================
   VENTANA
========================================================= */

#mike-catalogo-mujer .mike-products-viewport {
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   TRACK
========================================================= */

#mike-catalogo-mujer .mike-products-track {
    display: flex;
    gap: 12px;
    width: max-content;
}


/* =========================================================
   PRODUCTOS
   4 visibles como referencia 
========================================================= */

#mike-catalogo-mujer .mike-product-card {
    flex: 0 0 calc((91vw - 36px) / 4);
}


/* =========================================================
   IMAGEN
========================================================= */

#mike-catalogo-mujer .mike-product-image {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #f5f5f5;
    border-radius: 10px;
}

#mike-catalogo-mujer .mike-product-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   INFORMACIÓN
========================================================= */

#mike-catalogo-mujer .mike-product-info {
    text-align: center;
    padding: 18px 8px 0;
}

#mike-catalogo-mujer .mike-product-info h3 {
    margin: 0 0 8px;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.2;
    letter-spacing: -0.35px;
}

#mike-catalogo-mujer .mike-product-price {
    margin: 0;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 700;

    line-height: 1;
    letter-spacing: -0.25px;
}


/* =========================================================
   FLECHAS
========================================================= */

#mike-catalogo-mujer .mike-products-arrow {
    position: absolute;

    top: 43%;

    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 50%;

    background: #000;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 10;

    transform: translateY(-50%);
}

#mike-catalogo-mujer .mike-products-prev {
    left: -7px;
}

#mike-catalogo-mujer .mike-products-next {
    right: -7px;
}


/* =========================================================
   CATÁLOGO MUJER - MÓVIL
========================================================= */

@media (max-width: 700px) {

    #mike-catalogo-mujer {
        width: 100%;
        padding: 45px 15px 55px;
        margin: 0;
    }

    #mike-catalogo-mujer .mike-product-catalog-header {
        margin: 0 0 25px;
        text-align: center;
    }

    #mike-catalogo-mujer .mike-product-catalog-header h2 {
        font-family: "Roboto Condensed", sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: -0.5px !important;
        color: #080808 !important;
        text-align: center;
    }

    #mike-catalogo-mujer .mike-products-viewport {
        width: 100%;
        overflow: hidden;
    }

    #mike-catalogo-mujer .mike-products-track {
        display: flex;
        gap: 12px;
        width: auto;
    }

    #mike-catalogo-mujer .mike-product-card {
        flex: 0 0 calc((100% - 12px) / 2);
        width: calc((100% - 12px) / 2);
        min-width: calc((100% - 12px) / 2);
    }

    #mike-catalogo-mujer .mike-product-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 10px;
    }

    #mike-catalogo-mujer .mike-product-info {
        padding: 17px 5px 0;
        text-align: center;
    }

    #mike-catalogo-mujer .mike-product-info h3 {
        font-family: "Roboto Condensed", sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.15px !important;
        color: #080808 !important;
    }

    #mike-catalogo-mujer .mike-product-price {
        font-family: "Roboto Condensed", sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #080808 !important;
    }

    #mike-catalogo-mujer .mike-products-arrow {
        width: 36px;
        height: 36px;
        background: #000000;
        color: #ffffff;
        font-size: 12px;
    }

    #mike-catalogo-mujer .mike-products-prev {
        left: 0;
    }

    #mike-catalogo-mujer .mike-products-next {
        right: 0;
    }
}

/* =========================================================
   PASO 9 - MARCAS + NAVEGACIÓN
========================================================= */

.mike-marcas {
    width: 100%;
    padding: 65px 3.2rem 4rem;
    background: #ffffff;
}

.mike-marcas-inner {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    border-top: 1px solid #222;
    padding-top: 1.2rem;
}


/* =========================================================
   SLIDER DE MARCAS
========================================================= */

.mike-marcas-slider {
    position: relative;
    width: 100%;
}

.mike-marcas-viewport {
    width: 100%;
    overflow: hidden;
}

.mike-marcas-track {
    display: flex;
    align-items: center;
    gap: 0;
    will-change: transform;
}


/* =========================================================
   MARCA
========================================================= */

.mike-marca-item {
    flex: 0 0 20%;
    min-width: 20%;
    height: 130px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
}

.mike-marca-item img {
    display: block;

    max-width: 135px;
    max-height: 75px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   NAVEGACIÓN INFERIOR
========================================================= */

.mike-marcas-menu {
    width: 100%;
    max-width: 850px;

    margin: 3.2rem auto 0;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    column-gap: 3.5rem;
}

.mike-marcas-menu-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mike-marcas-menu-col h3 {
    margin: 0 0 1.15rem;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.25px;

    text-transform: uppercase;
}

.mike-marcas-menu-col a {
    display: block;

    margin-bottom: 0.72rem;

    color: #777777;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.25px;

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.mike-marcas-menu-col a:hover {
    color: #000000;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .mike-marcas {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .mike-marca-item {
        flex: 0 0 33.333%;
        min-width: 33.333%;
    }

    .mike-marcas-menu {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 2.5rem;
    }

}


@media (max-width: 575px) {

    .mike-marca-item {
        flex: 0 0 33.333333%;
        min-width: 33.333333%;
        height: 110px;
    }

    .mike-marca-item img {
        width: auto;
        height: auto;
        max-width: 90px;
        max-height: 55px;
        object-fit: contain;
    }

    /* MENÚ INFERIOR - 2 COLUMNAS EN MÓVIL */
    .mike-marcas-menu {
        width: 100%;
        max-width: 100%;

        margin: 3rem auto 0;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 18px;
        row-gap: 55px;

        text-align: center;
    }

    .mike-marcas-menu-col {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;

        text-align: center;
    }

    .mike-marcas-menu-col h3 {
        margin: 0 0 22px;

        font-family:
            "Roboto Condensed",
            "Arial Narrow",
            Arial,
            sans-serif;

        font-size: 14px;
        font-weight: 800;
        line-height: 1;

        letter-spacing: -0.2px;
        text-transform: uppercase;

        color: #080808;

        text-align: center;
    }

    .mike-marcas-menu-col a {
        display: block;

        width: 100%;
        margin: 0 0 15px;

        font-family:
            "Roboto Condensed",
            "Arial Narrow",
            Arial,
            sans-serif;

        font-size: 14px;
        font-weight: 400;
        line-height: 1.2;

        color: #8d8d8d;

        text-align: center;
        text-decoration: none;
    }

    .mike-marcas-menu-col a:last-child {
        margin-bottom: 0;
    }

}

/* =========================================================
   MIKE STORE - VIDEO + INSTAGRAM
========================================================= */

#mike-social {
    width: 100%;
    background: #fff;
}


/* =========================
   VIDEO
========================= */

.mike-social-video {
    width: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: 0 0 14px 14px;
    background: #000;
}

.mike-social-video-player {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 5.5;
    object-fit: cover;
    background: #000;
}


/* =========================
   INSTAGRAM
========================= */

.mike-social-instagram {
    min-height: 195px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    background: #fff;

    padding: 42px 20px 48px;
}

.mike-social-instagram h2 {
    margin: 0 0 27px;

    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: -0.35px;

    color: #080808;

    text-align: center;
    text-transform: uppercase;

    white-space: nowrap;
}

.mike-social-instagram-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 60%;
    max-width: 300px;
    min-width: 0;

    height: 56px;

    margin: 0 auto;
    padding: 0 20px;

    border: 0;
    border-radius: 999px;

    background: #000000;
    color: #ffffff;

    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: -0.2px;

    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

.mike-social-instagram-btn:hover {
    background: #000000;
    color: #ffffff;

    opacity: .8;
    transform: none;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {

    /* VIDEO */
    .mike-social-video {
    width: 100%;
    margin: 45px auto 0;

    border-radius: 14px;
    overflow: hidden;

    background: #000;
}

    .mike-social-video-player {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    border-radius: 14px;
    background: #000;
}

    /* INSTAGRAM */
    .mike-social-instagram {
        min-height: 0;

        padding: 42px 20px 58px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        text-align: center;
    }

    .mike-social-instagram h2 {
        margin: 0 0 28px;

        font-family:
            "Roboto Condensed",
            "Arial Narrow",
            Arial,
            sans-serif;

        font-size: 15px;
        font-weight: 800;
        line-height: 1.05;

        letter-spacing: -0.4px;

        color: #080808;
        text-align: center;
    }

    .mike-social-instagram-btn {
        width: 62%;
        min-width: 0;
        max-width: 330px;

        height: 58px;

        padding: 0 20px;

        border-radius: 999px;

        font-size: 13px;
        font-weight: 800;
    }
}

/* =========================================================
   BENEFICIOS FOOTER - MIKE STORE
   ESTRUCTURA 
========================================================= */

#mike-beneficios-footer {
    width: 100%;
    padding: 8px 0 0;
    margin: 0;
    background: #ffffff;
}


/* =========================================================
   CONTENEDOR
   DOS LÍNEAS HORIZONTALES - SIN CAJA
========================================================= */

#mike-beneficios-footer .mike-beneficios-container {
    width: calc(100% - 344px);
    max-width: 1288px;
    height: 88px;

    margin: 0 auto;
    padding: 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;

    /* IMPORTANTE: eliminar diseño anterior */
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;

    /* ÚNICAMENTE LAS DOS LÍNEAS */
    border-top: 1px solid #222222;
    border-bottom: 1px solid #222222;
}


/* =========================================================
   CADA BENEFICIO
========================================================= */

#mike-beneficios-footer .mike-beneficio {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
}


/* =========================================================
   ICONO
========================================================= */

#mike-beneficios-footer .mike-beneficio-icono {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;

    color: #111111;
    font-size: 25px;
    line-height: 1;
}

/* =========================================================
   ICONOS SVG - ESTILO 
========================================================= */

#mike-beneficios-footer .mike-beneficio-icono svg {
    display: block;

    width: 32px;
    height: 32px;

    overflow: visible;

    color: #080808;
}


/* =========================================================
   TEXTO
========================================================= */

#mike-beneficios-footer .mike-beneficio span {
    display: block;

    margin: 0;
    padding: 0;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 600;

    line-height: 1;
    letter-spacing: -0.25px;

    white-space: nowrap;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    #mike-beneficios-footer .mike-beneficios-container {
        width: calc(100% - 100px);
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 768px) {

    #mike-beneficios-footer {
        width: 100%;
        padding: 35px 0 0;
        background: #ffffff;
        overflow: hidden;
    }

    #mike-beneficios-footer .mike-beneficios-container {
        width: calc(100% - 58px);
        height: 180px;

        margin: 0 auto;
        padding: 18px 0;

        display: flex;
        align-items: center;

        overflow-x: hidden;
        overflow-y: hidden;

        border-top: 1px solid #222222;
        border-bottom: 1px solid #222222;

        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    #mike-beneficios-footer .mike-beneficio {
        flex: 0 0 50%;
        min-width: 50%;

        margin: 0;
        padding: 0 6px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 10px;

        text-align: center;
    }

    #mike-beneficios-footer .mike-beneficio-icono {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    #mike-beneficios-footer .mike-beneficio-icono svg {
        width: 34px;
        height: 34px;
    }

    #mike-beneficios-footer .mike-beneficio span {
        width: 100%;
        max-width: 130px;

        margin: 0;

        font-family:
            "Roboto Condensed",
            "Arial Narrow",
            Arial,
            sans-serif;

        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;

        color: #080808;

        text-align: center;
        white-space: normal;
    }
}

/* =========================================================
   FOOTER - MIKE STORE
   DISEÑO TIPO TIENDA PREMIUM
========================================================= */

#mike-footer {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: #111111;
}


/* =========================================================
   FOOTER PRINCIPAL
========================================================= */

#mike-footer .mike-footer-main {
    width: 100%;
    background: #ffffff;
}

#mike-footer .mike-footer-grid {
    width: calc(100% - 344px);
    max-width: 1288px;

    margin: 0 auto;
    padding: 58px 8px 60px;

    display: grid;
    grid-template-columns:
        1.05fr
        1fr
        1fr
        1fr
        1.15fr;

    column-gap: 65px;
    align-items: start;
}


/* =========================================================
   LOGO
========================================================= */

#mike-footer .mike-footer-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    width: 105px;

    margin: 0 0 44px;
    padding: 0;

    text-decoration: none;
}

#mike-footer .mike-footer-logo img {
    display: block;

    width: 105px;
    height: 70px;

    object-fit: contain;
    object-position: left center;
}

/* STORE E.I.R.L. */

#mike-footer .mike-footer-logo-subtitle {
    display: block;

    width: 105px;

    margin-top: -5px;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 600;

    line-height: 1;

    letter-spacing: 2.1px;

    text-align: center;
    white-space: nowrap;
}


/* =========================================================
   TÍTULOS
========================================================= */

#mike-footer h3 {
    margin: 0 0 22px;
    padding: 0;

    color: #080808;

    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}


/* =========================================================
   ENLACES GENERALES
========================================================= */

#mike-footer .mike-footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#mike-footer .mike-footer-col > a {
    display: inline-block;

    margin: 0 0 12px;

    color: #151515;
    text-decoration: none;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;

    transition: opacity .2s ease;
}

#mike-footer .mike-footer-col > a:hover {
    opacity: .55;
}


/* =========================================================
   REDES SOCIALES
========================================================= */

#mike-footer .mike-footer-social {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 30px;
}

#mike-footer .mike-footer-social a {
    width: 47px;
    height: 47px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d5d5d5;
    border-radius: 50%;

    color: #111111;
    text-decoration: none;

    font-size: 19px;

    background: #ffffff;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

#mike-footer .mike-footer-social a:hover {
    background: #111111;
    color: #ffffff;
    border-color: #111111;
}


/* =========================================================
   CONTACTO
========================================================= */

#mike-footer .mike-footer-contacto {
    margin-top: 0;
}

#mike-footer .mike-footer-contacto h3 {
    margin-bottom: 16px;
}

#mike-footer .mike-footer-contacto > a {
    display: flex;
    align-items: center;
    gap: 7px;

    margin: 0 0 10px;

    color: #111111;
    text-decoration: none;

    font-size: 13px;
    line-height: 1.2;
}

#mike-footer .mike-footer-contacto i {
    width: 15px;
    text-align: center;
    font-size: 14px;
}


/* =========================================================
   LIBRO DE RECLAMACIONES
========================================================= */

#mike-footer .mike-footer-reclamaciones {
    width: 120px;

    display: flex !important;
    flex-direction: column;
    align-items: center;

    margin-top: 0 !important;

    color: #0876c9 !important;
    text-align: center;
    text-decoration: none !important;
}

#mike-footer .mike-footer-reclamaciones i {
    order: 2;

    margin-top: 7px;

    color: #111111;
    font-size: 50px;
}

#mike-footer .mike-footer-reclamaciones span {
    order: 1;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.05;
}


/* =========================================================
   NEWSLETTER
========================================================= */

#mike-footer .mike-footer-newsletter p {
    max-width: 230px;

    margin: 0 0 25px;

    color: #111111;

    font-size: 13px;
    line-height: 1.55;
}

#mike-footer .mike-footer-form {
    width: 100%;
    max-width: 240px;
}

#mike-footer .mike-footer-form > input[type="email"] {
    width: 100%;
    height: 50px;

    margin: 0 0 14px;
    padding: 0 20px;

    border: 0;
    outline: none;
    border-radius: 28px;

    background: #f0f0f0;
    color: #333333;

    text-align: center;

    font-size: 12px;
    font-weight: 500;

    box-sizing: border-box;
}

#mike-footer .mike-footer-form > input[type="email"]::placeholder {
    color: #777777;
}


/* =========================================================
   PRIVACIDAD
========================================================= */

#mike-footer .mike-footer-privacy {
    display: flex;
    align-items: flex-start;
    gap: 6px;

    margin: 0 0 17px;

    color: #777777;

    font-size: 11px;
    line-height: 1.3;

    cursor: pointer;
}

#mike-footer .mike-footer-privacy input {
    margin: 1px 0 0;
}

#mike-footer .mike-footer-privacy a {
    color: #777777;
    text-decoration: underline;
}


/* =========================================================
   BOTÓN SUSCRIBIRME
========================================================= */

#mike-footer .mike-footer-form button {
    width: 100%;
    height: 52px;

    padding: 0;

    border: 0;
    border-radius: 28px;

    background: #050505;
    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

#mike-footer .mike-footer-form button:hover {
    opacity: .88;
    transform: translateY(-1px);
}


/* =========================================================
   PARTE INFERIOR GRIS
========================================================= */

/* ==============================
   FOOTER BOTTOM
   ============================== */

.mike-footer-bottom {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 40px 20px 38px !important;

    background: #f5f5f5;
    text-align: center;
}

/* LOGOS DE MEDIOS DE PAGO */
.mike-footer-payments {
    display: flex;
    justify-content: center;
    align-items: center;

    /* separación horizontal */
    gap: 6px;

    /* MUY IMPORTANTE:
       poco espacio hacia las políticas */
    margin: 0 0 14px 0;
}

.mike-footer-payments img {
    display: block;
    width: auto;
    max-width: 430px;
    height: auto;
}

/* POLÍTICAS */
.mike-footer-policies {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;

    margin: 0 0 14px 0;
}

.mike-footer-policies a {
    color: #222;
    font-size: 12px;
    font-weight: 400;
    text-decoration: underline;
}

/* COPYRIGHT */
.mike-footer-copy {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 35px;

    margin: 0;
    font-size: 11px;
    color: #222;
}

.mike-footer-copy a {
    color: #000;
    font-weight: 700;
    text-decoration: underline;
}




/* =========================================================
   MEDIOS DE PAGO
========================================================= */

#mike-footer .mike-footer-payments {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 7px;

    margin: 0 0 20px !important;
    padding: 0 !important;

    height: auto !important;
    min-height: 0 !important;
}

/* =====================================================
   MEDIOS DE PAGO - FOOTER
===================================================== */

.mike-footer-payments {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
}

.mike-footer-payments .mike-payment-item {
    width: 58px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 4px;

    padding: 3px 5px;
    box-sizing: border-box;
}

.mike-footer-payments .mike-payment-item img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   POLÍTICAS
========================================================= */

#mike-footer .mike-footer-legal {
    text-align: center;
}

#mike-footer .mike-footer-policies {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 26px;

    margin: 0 0 14px !important;
    padding: 0 !important;

    height: auto !important;
    min-height: 0 !important;
}

#mike-footer .mike-footer-policies a {
    color: #333333;
    text-decoration: underline;

    font-size: 11px;
}


/* =========================================================
   COPYRIGHT
========================================================= */

#mike-footer .mike-footer-copy {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 32px;

    color: #333333;

    font-size: 10px;
}

#mike-footer .mike-footer-copy strong {
    color: #111111;
    text-decoration: underline;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    #mike-footer .mike-footer-grid {
        width: calc(100% - 100px);
        column-gap: 35px;
    }

}


@media (max-width: 900px) {

    #mike-footer .mike-footer-grid {
        width: calc(100% - 50px);

        grid-template-columns: repeat(2, 1fr);

        row-gap: 45px;
    }

    #mike-footer .mike-footer-newsletter {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   FOOTER MIKE STORE - MÓVIL
========================================================= */

@media (max-width: 600px) {

    #mike-footer .mike-footer-grid {
        width: 100%;
        padding: 55px 38px 60px;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 35px;
        row-gap: 62px;

        align-items: start;
    }


    /* =====================================================
       LOGO + REDES + CONTACTO
       PRIMERA COLUMNA
    ===================================================== */

    #mike-footer .mike-footer-brand {
        grid-column: 1;
        grid-row: 1;

        display: flex;
        flex-direction: column;
        align-items: center;

        text-align: center;
    }


    /* LOGO CENTRADO ARRIBA OCUPANDO VISUALMENTE EL FOOTER */

    #mike-footer .mike-footer-logo {
        position: relative;

        width: 145px;

        margin: 0 0 58px;

        align-self: center;

        transform: translateX(50%);
    }

    #mike-footer .mike-footer-logo img {
        width: 145px;
        height: auto;

        object-fit: contain;
        object-position: center;
    }

    #mike-footer .mike-footer-logo-subtitle {
        width: 145px;

        margin-top: 2px;

        font-size: 12px;
        letter-spacing: 2.4px;

        text-align: center;
    }


    /* =====================================================
       TÍTULOS
    ===================================================== */

    #mike-footer h3 {
        margin: 0 0 25px;

        font-family:
            "Arial Narrow",
            "Roboto Condensed",
            Arial,
            sans-serif;

        font-size: 14px;
        font-weight: 800;
        line-height: 1;

        color: #080808;

        text-align: center;
    }


    /* =====================================================
       REDES
    ===================================================== */

    #mike-footer .mike-footer-social {
        display: flex;
        justify-content: center;

        gap: 8px;

        margin: 0 0 36px;
    }

    #mike-footer .mike-footer-social a {
        width: 47px;
        height: 47px;

        display: flex;
        align-items: center;
        justify-content: center;

        border: 1px solid #d2d2d2;
        border-radius: 50%;

        font-size: 18px;
    }


    /* =====================================================
       CONTACTO
    ===================================================== */

    #mike-footer .mike-footer-contacto {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;

        text-align: center;
    }

    #mike-footer .mike-footer-contacto h3 {
        margin-bottom: 20px;
    }

    #mike-footer .mike-footer-contacto > a {
        display: flex;
        align-items: center;
        justify-content: center;

        gap: 8px;

        margin-bottom: 12px;

        font-size: 13px;
        line-height: 1.2;

        white-space: nowrap;
    }


    /* =====================================================
       USUARIO - COLUMNA DERECHA
    ===================================================== */

    #mike-footer .mike-footer-col:nth-child(2) {
        grid-column: 2;
        grid-row: 1;

        padding-top: 203px;

        align-items: center;

        text-align: center;
    }


    /* =====================================================
       TIENDA
    ===================================================== */

    #mike-footer .mike-footer-col:nth-child(3) {
        grid-column: 1;
        grid-row: 2;

        align-items: center;

        text-align: center;
    }


    /* =====================================================
       AYUDA
    ===================================================== */

    #mike-footer .mike-footer-col:nth-child(4) {
        grid-column: 2;
        grid-row: 2;

        align-items: center;

        text-align: center;
    }


    /* =====================================================
       ENLACES
    ===================================================== */

    #mike-footer .mike-footer-col > a {
        width: 100%;

        margin: 0 0 15px;

        font-family:
            "Arial Narrow",
            "Roboto Condensed",
            Arial,
            sans-serif;

        font-size: 14px;
        font-weight: 400;
        line-height: 1.2;

        color: #080808;

        text-align: center;
    }


    /* =====================================================
       LIBRO DE RECLAMACIONES
    ===================================================== */

    #mike-footer .mike-footer-reclamaciones {
        width: 120px;

        margin: 3px auto 0 !important;

        display: flex;
        flex-direction: column;
        align-items: center;

        text-align: center;
    }

    #mike-footer .mike-footer-reclamaciones span {
        font-size: 13px;
        font-weight: 700;
        line-height: .95;

        color: #0876c9;
    }

    #mike-footer .mike-footer-reclamaciones i {
        margin-top: 8px;

        font-size: 50px;

        color: #111111;
    }


    /* =====================================================
       SUSCRÍBETE
       OCUPA LAS DOS COLUMNAS
    ===================================================== */

    #mike-footer .mike-footer-newsletter {
        grid-column: 1 / -1;
        grid-row: 3;

        width: 100%;
        max-width: 100%;

        margin: 5px auto 0;

        display: flex;
        flex-direction: column;
        align-items: center;

        text-align: center;
    }

    #mike-footer .mike-footer-newsletter h3 {
        margin-bottom: 27px;
    }

    #mike-footer .mike-footer-newsletter p {
        width: 100%;
        max-width: 330px;

        margin: 0 auto 25px;

        font-size: 14px;
        line-height: 1.55;

        text-align: center;
    }

    #mike-footer .mike-footer-form {
        width: 100%;
        max-width: 330px;
    }

    #mike-footer .mike-footer-form > input[type="email"] {
        width: 100%;
        height: 55px;

        text-align: center;

        border-radius: 999px;
    }

    #mike-footer .mike-footer-privacy {
        margin: 16px 0 22px;

        justify-content: flex-start;

        text-align: left;
    }

    #mike-footer .mike-footer-form button {
        width: 100%;
        height: 57px;

        border-radius: 999px;
    }


    /* =====================================================
       FOOTER INFERIOR
    ===================================================== */

    #mike-footer .mike-footer-policies,
    #mike-footer .mike-footer-copy {
        flex-direction: column;
        gap: 12px;
    }

}

/* =========================================================
   AJUSTE FINAL - MIKE FOOTER MAIN
   REFERENCIA VISUAL 
========================================================= */

/* TIPOGRAFÍA GENERAL DEL FOOTER PRINCIPAL */
#mike-footer .mike-footer-main {
    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;
}


/* =========================================================
   DISTRIBUCIÓN PRINCIPAL
========================================================= */

#mike-footer .mike-footer-grid {
    padding-top: 58px;
    padding-bottom: 60px;

    column-gap: 65px;
}


/* =========================================================
   LOGO MIKE STORE
   Conservamos identidad MIKE
========================================================= */

#mike-footer .mike-footer-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    width: 135px;
    height: auto;

    margin: 0 0 44px;
    padding: 0;

    text-decoration: none;
}

#mike-footer .mike-footer-logo img {
    display: block;

    width: 135px;
    height: 90px;

    object-fit: contain;
    object-position: left center;
}

#mike-footer .mike-footer-logo-subtitle {
    display: block;

    width: 135px;

    margin-top: -5px;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 600;

    line-height: 1;

    letter-spacing: 2.1px;

    text-align: center;
    white-space: nowrap;
}


/* =========================================================
   TODOS LOS TÍTULOS
   USUARIO / TIENDA / AYUDA / SUSCRÍBETE
   SÍGUENOS / CONTACTO
========================================================= */

#mike-footer h3 {
    margin: 0 0 22px;

    color: #050505;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.25px;

    text-transform: uppercase;
}


/* =========================================================
   ENLACES DE USUARIO / TIENDA / AYUDA
========================================================= */

#mike-footer .mike-footer-col > a {
    margin: 0 0 11px;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 400;

    line-height: 1.15;
    letter-spacing: -0.25px;
}


/* =========================================================
   REDES SOCIALES
========================================================= */

#mike-footer .mike-footer-social {
    gap: 9px;
    margin-bottom: 30px;
}

#mike-footer .mike-footer-social a {
    width: 47px;
    height: 47px;

    border: 1px solid #d5d5d5;
    border-radius: 50%;

    background: #ffffff;
    color: #080808;

    font-size: 18px;
}


/* =========================================================
   CONTACTO
========================================================= */

#mike-footer .mike-footer-contacto h3 {
    margin-bottom: 16px;
}

#mike-footer .mike-footer-contacto > a {
    gap: 7px;

    margin-bottom: 9px;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.15;
    letter-spacing: -0.2px;
}

#mike-footer .mike-footer-contacto i {
    width: 15px;

    color: #080808;

    font-size: 13px;
}


/* =========================================================
   LIBRO DE RECLAMACIONES
========================================================= */

#mike-footer .mike-footer-reclamaciones {
    width: 120px;

    margin-top: 0 !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;
}

#mike-footer .mike-footer-reclamaciones span {
    color: #0876c9;

    font-size: 13px;
    font-weight: 700;

    line-height: .95;
    letter-spacing: -0.2px;
}

#mike-footer .mike-footer-reclamaciones i {
    margin-top: 7px;

    color: #111111;

    font-size: 50px;
}


/* =========================================================
   SUSCRÍBETE - TEXTO
========================================================= */

#mike-footer .mike-footer-newsletter p {
    max-width: 215px;

    margin: 0 0 24px;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.45;
    letter-spacing: -0.2px;
}


/* =========================================================
   FORMULARIO NEWSLETTER
========================================================= */

#mike-footer .mike-footer-form {
    width: 100%;
    max-width: 225px;
}


/* CAMPO EMAIL */

#mike-footer .mike-footer-form > input[type="email"] {
    width: 100%;
    height: 49px;

    margin-bottom: 14px;
    padding: 0 18px;

    border: 0;
    border-radius: 999px;

    background: #f0f0f0;
    color: #777777;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 400;

    line-height: 1;
    letter-spacing: -0.2px;

    text-align: center;
}

#mike-footer .mike-footer-form > input[type="email"]::placeholder {
    color: #777777;
    opacity: 1;
}


/* =========================================================
   CHECKBOX + POLÍTICA
========================================================= */

#mike-footer .mike-footer-privacy {
    gap: 5px;

    margin: 0 0 17px;

    color: #777777;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 400;

    line-height: 1.2;
    letter-spacing: -0.15px;
}

#mike-footer .mike-footer-privacy input {
    width: 12px;
    height: 12px;

    margin: 0;
}

#mike-footer .mike-footer-privacy a {
    color: #777777;

    text-decoration: underline;
}


/* =========================================================
   BOTÓN SUSCRIBIRME - ESTILO 
========================================================= */

#mike-footer .mike-footer-form button {
    width: 100%;
    height: 51px;

    padding: 0;

    border: 0;
    border-radius: 999px;

    background: #000000;
    color: #ffffff;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.25px;

    text-transform: uppercase;

    cursor: pointer;

    transition: opacity .2s ease;
}

#mike-footer .mike-footer-form button:hover {
    background: #000000;
    color: #ffffff;

    opacity: .80;

    transform: none;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    #mike-footer .mike-footer-grid {
        column-gap: 35px;
    }

}

@media (max-width: 600px) {

    #mike-footer h3 {
        font-size: 12px;
    }

    #mike-footer .mike-footer-col > a {
        font-size: 13px;
    }

    #mike-footer .mike-footer-newsletter p {
        font-size: 12px;
    }

}

/* =========================================
   MEDIOS DE PAGO - FOOTER
========================================= */

.mike-footer-payments {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mike-footer-payment-strip {
    display: block;
    width: 420px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* =========================================================
   AJUSTE DEFINITIVO FOOTER INFERIOR - ALTURA TIPO 
========================================================= */

#mike-footer .mike-footer-bottom {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 28px 20px 22px !important;

    background: #f5f5f5;
}

#mike-footer .mike-footer-payments {
    margin: 0 0 16px !important;
    padding: 0 !important;

    height: 40px !important;
    min-height: 40px !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#mike-footer .mike-footer-payment-strip {
    display: block !important;

    width: 490px !important;
    max-width: none !important;
    height: 50px !important;

    object-fit: contain !important;

    transform: scale(3.10);
    transform-origin: center center;
}

#mike-footer .mike-footer-policies {
    margin: 0 0 12px !important;
    padding: 0 !important;
}

#mike-footer .mike-footer-copy {
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   PÁGINA CATEGORÍA / TIENDA
   BLOQUE CONSOLIDADO - REFERENCIA VISUAL 
========================================================= */

#mike-categoria-page {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 32px 80px;
    box-sizing: border-box;
    background: #ffffff;
}

/* CABECERA */
#mike-categoria-page .mike-shop-header {
    width: 100%;
    padding: 20px 0 12px;
    text-align: center;
}

#mike-categoria-page .mike-shop-header-title {
    text-align: center;
}

#mike-categoria-page .mike-shop-header-title span {
    display: block;

    margin: 0 0 5px 0;

    color: #8c8c8c;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 11px;
    font-weight: 400;
    line-height: 1;

    letter-spacing: -0.2px;

    text-transform: uppercase;
}

#mike-categoria-page .mike-shop-header-title h1 {
    margin: 0;

    color: #050505;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 28px;
    font-weight: 700;

    line-height: 0.95;
    letter-spacing: -1px;

    transform: scaleX(0.90);
    transform-origin: center;

    text-transform: uppercase;
}

/* TOOLBAR */
#mike-categoria-page .mike-shop-toolbar {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 0 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
}

#mike-categoria-page .mike-shop-results {
    padding-bottom: 7px;
    color: #111111;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
}

#mike-categoria-page .mike-shop-controls {
    width: 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

#mike-categoria-page .mike-shop-per-page,
#mike-categoria-page .mike-shop-order,
#mike-categoria-page .mike-shop-controls select,
#mike-categoria-page .mike-shop-bottom-control select {
    height: 42px;
    min-width: 0;

    padding: 0 40px 0 18px;

    border: 1px solid #777777;
    border-radius: 3px;

    background: #ffffff;
    color: #111111;

    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 14px;

    outline: none;
    cursor: pointer;
}

/* CANTIDAD DE PRODUCTOS - MÁS GRANDE COMO  */
#mike-categoria-page .mike-shop-controls .mike-shop-per-page {
    width: 240px;
    height: 46px;

    font-size: 15px;
    font-weight: 700;

    border-color: #555555;
}


/* ORDENAMIENTO - MÁS PEQUEÑO COMO  */
#mike-categoria-page .mike-shop-controls .mike-shop-order {
    width: 205px;
    height: 38px;

    font-size: 13px;
    font-weight: 400;
}

/* GRID DE PRODUCTOS */
#mike-categoria-page .mike-products-grid {
    width: 100%;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 18px;
}

#mike-categoria-page .mike-product-card {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    text-align: center;
}

#mike-categoria-page .mike-product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f6;
    border-radius: 7px;
}

#mike-categoria-page .mike-product-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    transform: scale(1.10);
}



#mike-categoria-page .mike-product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaaaaa;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
}

/* OFERTA */
#mike-categoria-page .mike-product-badge {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 5;
    min-width: 55px;
    height: 31px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    color: #ffffff;
    border-radius: 999px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/* INFORMACIÓN DEL PRODUCTO */
#mike-categoria-page .mike-product-info {
    padding: 9px 5px 0;
    text-align: center;
}

#mike-categoria-page .mike-product-info h2 {
    margin: 0 0 7px;
    color: #050505;
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.4px;
}

#mike-categoria-page .mike-product-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #050505;
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

#mike-categoria-page .mike-product-old-price {
    margin-right: 0;
    color: #777777;
    font-size: 13px;
    font-weight: 400;
    text-decoration: line-through;
}

#mike-categoria-page .mike-product-price strong {
    color: #050505;
    font-size: 14px;
    font-weight: 800;
}

/* =========================================================
   PAGINACIÓN - AJUSTE VISUAL TIPO 
========================================================= */

#mike-categoria-page .mike-shop-pagination {
    width: 100%;

    margin: 48px 0 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0;
}

#mike-categoria-page .mike-shop-pagination button,
#mike-categoria-page .mike-shop-pagination span {
    width: 46px;
    height: 50px;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    color: #080808;

    border: 1px solid #e2e2e2;
    border-right: 0;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
}

#mike-categoria-page .mike-shop-pagination button:last-child {
    border-right: 1px solid #e2e2e2;
}

#mike-categoria-page .mike-shop-pagination button.active {
    background: #000000;
    color: #ffffff;

    border-color: #000000;

    font-weight: 700;
}

#mike-categoria-page .mike-shop-pagination span {
    cursor: default;
}


/* =========================================================
   SELECTOR INFERIOR - AJUSTE VISUAL TIPO 
========================================================= */

#mike-categoria-page .mike-shop-bottom-control {
    width: 100%;

    margin-top: -52px;
    padding: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#mike-categoria-page .mike-shop-bottom-control .mike-shop-per-page {
    width: 215px;
    height: 46px;

    padding: 0 42px 0 20px;

    background: #ffffff;
    color: #080808;

    border: 1px solid #777777;
    border-radius: 3px;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 500;

    line-height: 1;

    outline: none;
    cursor: pointer;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
    #mike-categoria-page .mike-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    #mike-categoria-page {
        padding-left: 15px;
        padding-right: 15px;
    }


    /* =========================
       TÍTULO NUEVO
    ========================= */

    #mike-categoria-page .mike-shop-header {
        padding-top: 32px;
        padding-bottom: 24px;
        text-align: center;
    }

    #mike-categoria-page .mike-shop-header h1 {
        margin: 0;
        font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
        font-size: 24px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.5px;
        text-align: center;
        text-transform: uppercase;
        color: #080808;
    }


    /* =========================
       BARRA MOSTRANDO / FILTROS
    ========================= */

    #mike-categoria-page .mike-shop-toolbar {
        width: 100%;
        margin-bottom: 24px;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 14px;
    }


    /* TEXTO "MOSTRANDO..." */

    #mike-categoria-page .mike-shop-result-count {
        width: 100%;
        margin: 0;

        font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.2;

        color: #777777;
        text-align: center;
    }


    /* CONTENEDOR DE LOS 2 SELECTORES */

    #mike-categoria-page .mike-shop-controls {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }


    /* SELECTORES */

    #mike-categoria-page .mike-shop-controls select {
        width: 100%;
        height: 43px;

        padding: 0 30px 0 12px;

        background-color: #ffffff;

        border: 1px solid #dddddd;
        border-radius: 0;

        font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
        font-size: 11px;
        font-weight: 400;

        color: #555555;
    }


    /* =========================
       PRODUCTOS
    ========================= */

    #mike-categoria-page .mike-products-grid {
        width: 100%;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 10px;
        row-gap: 28px;
    }


    /* IMAGEN */

    #mike-categoria-page .mike-product-image {
        width: 100%;
        aspect-ratio: 1 / 1;

        border-radius: 7px;
    }

    #mike-categoria-page .mike-product-image img {
        width: 88%;
        height: 88%;

        object-fit: contain;
        object-position: center;
    }


    /* INFORMACIÓN */

    #mike-categoria-page .mike-product-info {
        padding: 11px 3px 0;

        text-align: center;
    }


    /* NOMBRE PRODUCTO */

    #mike-categoria-page .mike-product-info h2 {
        margin: 0 0 7px;

        font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;

        font-size: 13px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.3px;

        color: #080808;
    }


    /* PRECIO */

    #mike-categoria-page .mike-product-price {
        gap: 4px;

        font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;

        font-size: 12px;
        font-weight: 700;
        line-height: 1;

        color: #080808;
    }

    #mike-categoria-page .mike-product-price strong {
        font-size: 12px;
        font-weight: 700;
    }

    #mike-categoria-page .mike-product-old-price {
        font-size: 11px;
        font-weight: 400;
    }

    #mike-categoria-page .mike-shop-bottom-control {
        margin-top: 30px;
    }

    #mike-categoria-page .mike-shop-bottom-control .mike-shop-per-page {
        width: 100%;
    }
}

@media (max-width: 480px) {

    #mike-categoria-page .mike-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #mike-categoria-page .mike-shop-header-title h1 {
        font-size: 25px;
    }
}

/* =========================================================
   FICHA PRODUCTO - MIKE STORE
   NUEVA ESTRUCTURA
========================================================= */

#mike-product-page {
    width: 100%;
    background: #ffffff;
}


/* =========================================================
   FICHA PRINCIPAL
========================================================= */

#mike-product-page .mike-yolu-product {
    width: calc(100% - 70px);
    max-width: 1093px;

    margin: 0 auto;
    padding: 32px 0 42px;

    display: grid;
    grid-template-columns: 638px 400px;

    column-gap: 55px;

    justify-content: center;
    align-items: start;
}


/* =========================================================
   GALERÍA
========================================================= */

#mike-product-page .mike-yolu-gallery {
    width: 638px;

    display: grid;
    grid-template-columns: 126px 500px;

    column-gap: 10px;

    align-items: start;
}


/* =========================================================
   MINIATURAS PRODUCTO - ESTILO 
========================================================= */

#mike-product-page .mike-yolu-thumbs {
    width: 126px;

    display: flex;
    flex-direction: column;

    gap: 10px;
}


/* CAJA DE CADA MINIATURA */

#mike-product-page .mike-yolu-thumb {
    position: relative;

    width: 126px;
    height: 117.5px;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #f7f7f7;

    border: 1px solid #d6d6d6;
    border-radius: 5px;

    box-shadow: none;

    cursor: pointer;

    transition:
        border-color .18s ease,
        opacity .18s ease;
}


/* MINIATURA SELECCIONADA */

#mike-product-page .mike-yolu-thumb.active {
    border: 1px solid #999999;
    box-shadow: none;
}


/* IMAGEN DENTRO DE LA MINIATURA */

#mike-product-page .mike-yolu-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;
    object-position: center;

    transform: none;
}

/* HOVER MUY SUAVE */

#mike-product-page .mike-yolu-thumb:hover {
    border-color: #aaaaaa;
    box-shadow: none;
}


/* =========================================================
   IMAGEN PRINCIPAL
========================================================= */

#mike-product-page .mike-yolu-photo {
    position: relative;

    width: 500px;
    height: 500px;

    margin: 0;
    padding: 0;

    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
	
	/* CURVA ELEGANTE */
    border-radius: 14px;

    

    cursor: zoom-in;
	
	transition:
        box-shadow .28s ease,
        transform .28s ease;
}


#mike-product-page .mike-yolu-photo > img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;

    margin: 0;
    padding: 0;

    object-fit: contain;
    object-position: center;

    transform: scale(1.07);
    transform-origin: center center;
	
	transition: transform 0.28s ease;
    will-change: transform;
}



#mike-product-page .mike-yolu-photo.is-zooming > img {
    transform: scale(3.55);
}


#mike-product-page .mike-yolu-no-image {
    color: #999999;

    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   INFORMACIÓN DERECHA
========================================================= */

#mike-product-page .mike-yolu-info {
    width: 400px;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* NOMBRE */

#mike-product-page .mike-yolu-name {
    margin: 0;
    padding: 0;

    color: #111111;

    font-family:
        "Arial Narrow",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 23px;
    font-weight: 800;

    line-height: 1.15;
    letter-spacing: -0.4px;
}


/* =========================================================
   PRECIO
========================================================= */

#mike-product-page .mike-yolu-price {
    margin-top: 27px;

    display: flex;
    align-items: center;

    gap: 10px;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 700;

    line-height: 1;
}


#mike-product-page .mike-yolu-price-old {
    color: #777777;
    text-decoration: line-through;
}


#mike-product-page .mike-yolu-price-current {
    color: #222222;
}


#mike-product-page .mike-yolu-final-price {
    margin-top: 13px;

    color: #ff0000;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 400;

    line-height: 1;
}


/* =========================================================
   SEPARADOR
========================================================= */

#mike-product-page .mike-yolu-line {
    width: 340px;
    height: 1px;

    margin-top: 31px;

    background: #bdbdbd;
}


/* =========================================================
   TALLAS - ESTILO YOLU
========================================================= */

#mike-product-page .mike-yolu-variants {
    width: 100%;
    margin-top: 48px;

    display: flex;
    align-items: flex-start;
}


/* TEXTO TALLAS EUR */

#mike-product-page .mike-yolu-variants-title {
    flex: 0 0 auto;

    margin-right: 16px;
    padding-top: 11px;

    color: #111111;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 800;

    line-height: 1;

    white-space: nowrap;
}


/* CONTENEDOR DE TALLAS */

#mike-product-page .mike-yolu-sizes {
    display: flex;
    align-items: flex-start;

    flex-wrap: nowrap;

    gap: 5px;

    min-width: 0;
}


/* CUADROS DE TALLA */

#mike-product-page .mike-yolu-sizes > button:not(.mike-clear-size) {
    position: relative;

    flex: 0 0 35px;

    width: 35px;
    min-width: 35px;
    height: 35px;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #8f8f8f;
    border-radius: 3px;

    background: #ffffff;
    color: #111111;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    overflow: visible;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        color .18s ease;
}


/* =========================================================
   HOVER TALLAS - EFECTO TIPO YOLU
========================================================= */

#mike-product-page
.mike-yolu-sizes
> button:not(.mike-clear-size):not(.selected):hover {

    background: #ffffff;
    color: #111111;

    border-color: #b8b8b8;

    box-shadow:
        0 0 0 3px #e1e1e1;
}


/* =========================================================
   TOOLTIP NEGRO SUPERIOR
========================================================= */

#mike-product-page
.mike-yolu-sizes
> button:not(.mike-clear-size)::before {

    content: attr(data-size);

    position: absolute;

    left: 50%;
    bottom: calc(100% + 9px);

    transform:
        translateX(-50%)
        translateY(3px);

    min-width: 35px;
    height: 31px;

    padding: 0 7px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #111111;
    color: #ffffff;

    border-radius: 2px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 30;

    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility .16s ease;
}


/* TRIÁNGULO DEL TOOLTIP */

#mike-product-page
.mike-yolu-sizes
> button:not(.mike-clear-size)::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: calc(100% + 4px);

    transform:
        translateX(-50%)
        translateY(3px);

    width: 0;
    height: 0;

    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #111111;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 30;

    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility .16s ease;
}


/* MOSTRAR TOOLTIP */

#mike-product-page
.mike-yolu-sizes
> button:not(.mike-clear-size):hover::before,
#mike-product-page
.mike-yolu-sizes
> button:not(.mike-clear-size):hover::after {

    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   TALLA SELECCIONADA
========================================================= */

#mike-product-page
.mike-yolu-sizes
> button:not(.mike-clear-size).selected {

    background: #111111;
    color: #ffffff;

    border-color: #111111;

    box-shadow: none;
}


/* =========================================================
   LIMPIAR
========================================================= */

#mike-product-page .mike-clear-size {
    flex: 0 0 auto;

    width: auto;
    min-width: auto;
    height: 35px;

    margin: 0 0 0 4px;
    padding: 0 5px;

    border: 0;

    background: transparent;
    color: #e83e5a;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 400;

    line-height: 35px;

    cursor: pointer;

    white-space: nowrap;
}

#mike-product-page .mike-clear-size:hover {
    color: #111111;
    text-decoration: underline;
}


/* =========================================================
   CANTIDAD
========================================================= */

#mike-product-page .mike-yolu-quantity {
    width: 132px;
    height: 43px;

    margin: 35px 0 12px;

    display: grid;
    grid-template-columns: 43px 46px 43px;

    border: 1px solid #333333;
    border-radius: 999px;

    overflow: hidden;
}


#mike-product-page .mike-yolu-quantity button {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    background: #ffffff;
    color: #000000;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    font-weight: 400;

    cursor: pointer;
}


#mike-product-page .mike-yolu-quantity button:hover {
    background: transparent;
    color: #999999;
}


#mike-product-page .mike-yolu-quantity input {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: #ffffff;
    color: #000000;

    text-align: center;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;

    appearance: textfield;
    -moz-appearance: textfield;
}


#mike-product-page .mike-yolu-quantity input::-webkit-inner-spin-button,
#mike-product-page .mike-yolu-quantity input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}


/* =========================================================
   AÑADIR AL CARRITO
========================================================= */

#mike-product-page .mike-yolu-add-cart {
    width: 100%;
    height: 55px;

    margin: 0 0 31px;
    padding: 0;

    border: 0;
    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #000000;
    color: #ffffff;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 800;

    line-height: 1;

    cursor: pointer;
}


#mike-product-page .mike-yolu-add-cart:disabled {
    background: #8e8e8e;
    color: #ffffff;

    opacity: 1;

    cursor: not-allowed;
}


/* =========================================================
   CARACTERÍSTICAS
========================================================= */

#mike-product-page .mike-yolu-features {
    margin: 0;

    color: #666666;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.65;
}


#mike-product-page .mike-yolu-features strong {
    color: #555555;
    font-weight: 700;
}


#mike-product-page .mike-yolu-features ul {
    margin: 7px 0 0;
    padding-left: 18px;
}


/* =========================================================
   ACORDEONES
========================================================= */

#mike-product-page .mike-yolu-accordions {
    width: 100%;

    margin-top: 28px;

    display: flex;
    flex-direction: column;

    gap: 10px;
}


#mike-product-page .mike-product-accordion-item {
    width: 100%;
}


#mike-product-page .mike-product-accordion {
    width: 100%;
    min-height: 51px;

    margin: 0;
    padding: 0 22px;

    border: 0;
    border-radius: 999px;

    background: #f1f1f1;
    color: #111111;

    display: flex;
    align-items: center;
    justify-content: space-between;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}


#mike-product-page .mike-product-accordion i {
    font-size: 10px;

    transition: transform .2s ease;
}


#mike-product-page .mike-product-accordion.active i {
    transform: rotate(180deg);
}


#mike-product-page .mike-product-accordion-content {
    display: none;

    padding: 14px 20px 8px;

    color: #707070;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;

    line-height: 1.6;
}


#mike-product-page .mike-product-accordion-content.active {
    display: block;
}


#mike-product-page .mike-product-accordion-content p {
    margin: 0 0 8px;
}


#mike-product-page .mike-product-accordion-content ul {
    margin: 5px 0 10px;
    padding-left: 17px;
}


/* =========================================================
   LÍNEA ANTES DE PRODUCTOS RELACIONADOS
========================================================= */

#mike-product-page .mike-product-bottom-separator {
    width: calc(100% - 70px);
    max-width: 1280px;

    height: 1px;

    margin: 0 auto;

    background: #d0d0d0;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1150px) {

    #mike-product-page .mike-yolu-product {
        width: calc(100% - 40px);

        grid-template-columns:
            minmax(0, 1fr)
            370px;

        column-gap: 35px;
    }

    #mike-product-page .mike-yolu-gallery {
        width: 100%;

        grid-template-columns:
            80px
            minmax(0, 1fr);

        column-gap: 12px;
    }

    #mike-product-page .mike-yolu-thumbs {
        width: 80px;
    }

    #mike-product-page .mike-yolu-thumb {
        width: 80px;
        height: 80px;
    }

    #mike-product-page .mike-yolu-photo {
        width: 100%;
        height: auto;

        aspect-ratio: 1 / 1;
    }

    #mike-product-page .mike-yolu-info {
        width: 100%;
    }
}


@media (max-width: 820px) {

    #mike-product-page .mike-yolu-product {
        width: calc(100% - 30px);

        padding: 30px 0 45px;

        grid-template-columns: 1fr;

        row-gap: 35px;
    }

    #mike-product-page .mike-yolu-info {
        width: 100%;
    }

    #mike-product-page .mike-yolu-line {
        width: 100%;
    }
}


@media (max-width: 520px) {

    #mike-product-page .mike-yolu-product {
        width: 100%;
        padding: 18px 15px 40px;
        row-gap: 24px;
    }

    /* GALERÍA */
    #mike-product-page .mike-yolu-gallery {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    #mike-product-page .mike-yolu-photo {
        order: 1;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 8px;
        overflow: hidden;
    }

    #mike-product-page .mike-yolu-photo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* MINIATURAS */
    #mike-product-page .mike-yolu-thumbs {
        order: 2;
        width: 100%;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    #mike-product-page .mike-yolu-thumbs::-webkit-scrollbar {
        display: none;
    }

    #mike-product-page .mike-yolu-thumb {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
    }

    /* INFORMACIÓN */
    #mike-product-page .mike-yolu-info {
        width: 100%;
        padding: 0;
    }

    #mike-product-page .mike-yolu-name {
        margin: 0 0 12px;
        font-size: 22px;
        line-height: 1.15;
    }

    #mike-product-page .mike-yolu-price {
        margin-bottom: 18px;
    }

    #mike-product-page .mike-yolu-final-price {
        font-size: 21px;
    }

    #mike-product-page .mike-yolu-line {
        width: 100%;
    }

    /* VARIANTES / TALLAS */
    #mike-product-page .mike-yolu-variants {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    #mike-product-page .mike-yolu-variants-title {
        margin: 0 0 12px;
        padding: 0;
    }

    #mike-product-page .mike-yolu-sizes {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* CANTIDAD */
    #mike-product-page .mike-yolu-quantity {
        margin-top: 18px;
    }

    /* BOTÓN COMPRAR */
    #mike-product-page .mike-yolu-add-cart {
        width: 100%;
        min-height: 52px;
        margin-top: 16px;
    }

    /* BENEFICIOS */
    #mike-product-page .mike-yolu-features {
        width: 100%;
        margin-top: 22px;
    }

    /* ACORDEONES */
    #mike-product-page .mike-yolu-accordions {
        width: 100%;
        margin-top: 20px;
    }

    #mike-product-page .mike-product-accordion {
        min-height: 52px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #mike-product-page .mike-product-accordion-content {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* =========================================================
   PRODUCTO - TAMBIÉN PODRÍA GUSTARTE
   ========================================================= */

.mike-related-products{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 65px 0 95px;
	
	
}

.mike-related-title{
    width: 100%;
    text-align: center;

    /* Distancia título → productos como Yolu */
    margin: 0 0 65px !important;
}

.mike-related-title h2{
    display: inline-block;

    margin: 0;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 24px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -1px;

    text-transform: uppercase;

    /* Condensamos físicamente la letra para acercarla a Yolu */
    transform: scaleX(0.89);
    transform-origin: center center;
}

@media (max-width: 520px) {

    /* ==========================================
       TAMBIÉN PODRÍA GUSTARTE - MÓVIL
    ========================================== */

    #mike-product-page .mike-related-products {
        width: 100%;
        padding: 38px 15px 45px;
        overflow: hidden;
    }

    #mike-product-page .mike-related-products h2 {
        margin: 0 0 25px;
        font-size: 21px;
        line-height: 1.1;
        font-weight: 700;
        text-align: center;
    }

    #mike-product-page .mike-related-slider {
        position: relative;
        width: 100%;
    }

    #mike-product-page .mike-related-viewport {
        width: 100%;
        overflow: hidden;
    }

    #mike-product-page .mike-related-track {
        display: flex;
        gap: 10px;
    }

    #mike-product-page .mike-related-card {
        flex: 0 0 calc((100% - 10px) / 2);
        min-width: 0;
        text-align: center;
    }

    #mike-product-page .mike-related-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 7px;
        background: #f6f6f6;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #mike-product-page .mike-related-image img {
        display: block;
        width: 88%;
        height: 88%;
        object-fit: contain;
        object-position: center;
    }

    #mike-product-page .mike-related-card h3 {
        margin: 12px 3px 0;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
    }

    #mike-product-page .mike-related-price {
        margin-top: 7px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
        text-align: center;
    }

    #mike-product-page .mike-related-prev,
    #mike-product-page .mike-related-next {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #000;
        color: #fff;
        font-size: 12px;
    }

    #mike-product-page .mike-related-prev {
        left: 7px;
    }

    #mike-product-page .mike-related-next {
        right: 7px;
    }
}


/* =========================================================
   CARRUSEL
   ========================================================= */

.mike-related-carousel{
    position: relative;
    width: 100%;
}

.mike-related-track{
    display: flex;
    gap: 12px;
    width: 100%;
    overflow: hidden;
    scroll-behavior: smooth;
}


/* =========================================================
   TARJETAS
   ========================================================= */

.mike-related-card{
    flex: 0 0 calc((100% - 36px) / 4);
    min-width: 0;
    text-align: center;
}

.mike-related-link{
    display: block;
    color: #000;
    text-decoration: none;
}


/* =========================================================
   IMAGEN
   ========================================================= */

.mike-related-image{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mike-related-image img{
    display: block;
    width: 88%;
    height: 88%;
    object-fit: contain;
    object-position: center;
    transform: none;
}

.mike-related-image > span:not(.mike-related-discount){
    font-size: 13px;
    font-weight: 400;
    color: #aaa;
}


/* =========================================================
   DESCUENTO
   ========================================================= */

.mike-related-discount{
    position: absolute;
    top: 10px;
    left: 10px;

    min-width: 50px;
    height: 36px;
    padding: 0 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #000;
    color: #fff;

    border-radius: 22px;

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   NOMBRE
   ========================================================= */

.mike-related-card h3{
    margin: 15px 8px 7px;

    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.2;
    letter-spacing: -0.25px;
}


/* =========================================================
   PRECIOS
   ========================================================= */

.mike-related-price,
.mike-related-prices{
    color: #080808;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 15px;
    line-height: 1.2;
    letter-spacing: -0.2px;
}

.mike-related-price{
    font-weight: 700;
}

.mike-related-old-price{
    margin-right: 4px;

    color: #999999;

    font-size: 15px;
    font-weight: 400;

    text-decoration: line-through;
}

.mike-related-sale-price{
    color: #080808;

    font-size: 15px;
    font-weight: 700;
}


/* =========================================================
   FLECHAS DEL CARRUSEL
   ========================================================= */

.mike-related-arrow{
    position: absolute;
    top: 43%;
    transform: translateY(-50%);

    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 50%;

    background: #000;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 10;

    font-size: 13px;
}

.mike-related-prev{
    left: -18px;
}

.mike-related-next{
    right: -18px;
}

.mike-related-arrow:hover{
    background: #222;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px){

    .mike-related-products{
        padding-left: 18px;
        padding-right: 18px;
    }

    .mike-related-card{
        flex: 0 0 calc((100% - 12px) / 2);
    }

    .mike-related-prev{
        left: 4px;
    }

    .mike-related-next{
        right: 4px;
    }
}


@media (max-width: 560px){

    .mike-related-title h2{
        font-size: 22px;
    }

    .mike-related-card{
        flex: 0 0 82%;
    }
}

/* ==========================================
   ENLACE COMPLETO TARJETA PRODUCTO
========================================== */

.mike-product-card-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.mike-product-card-link:hover,
.mike-product-card-link:focus,
.mike-product-card-link:visited {
    color: inherit;
    text-decoration: none;
}

/* =========================================================
   PRODUCTO - BOTÓN CARRITO DESHABILITADO / HABILITADO
========================================================= */

/* Estado inicial: ninguna talla seleccionada */
button.mike-add-cart:disabled {
    background-color: #858585 !important;
    color: #ffffff !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

/* Estado activo: talla seleccionada */
button.mike-add-cart.active:not(:disabled) {
    background-color: #000000 !important;
    color: #ffffff !important;
    cursor: pointer;
    opacity: 1 !important;
}

/* =========================================================
   MIKE STORE - CARRITO LATERAL
========================================================= */

/* Fondo oscuro cuando se abre el carrito */
.mike-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.30);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
    z-index: 9998;
}

.mike-cart-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* Panel lateral */
.mike-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;

    width: 390px;
    max-width: 100%;
    height: 100vh;

    background: #fff;

    transform: translateX(100%);
    transition: transform .32s ease;

    z-index: 9999;

    display: flex;
    flex-direction: column;

    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
}

.mike-cart-drawer.active {
    transform: translateX(0);
}


/* =========================================================
   CABECERA
========================================================= */

.mike-cart-header {
    position: relative;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    padding: 22px 24px 12px;
}

.mike-cart-header h3 {
    display: none;
}

.mike-cart-close {
    width: 34px;
    height: 34px;

    padding: 0;
    border: 0;
    background: transparent;

    font-size: 28px;
    line-height: 1;
    font-weight: 500;

    color: #777;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.mike-cart-close:hover {
    color: #000;
}


/* =========================================================
   CONTENIDO
========================================================= */

.mike-cart-body {
    padding: 4px 26px 0;
    flex: 1;
    overflow-y: auto;
}


/* Producto */
.mike-cart-item {
    position: relative;

    display: grid;
    grid-template-columns: 78px 1fr 28px;
    gap: 18px;
    align-items: center;

    padding: 18px 0 22px;

    border-bottom: 1px solid #dedede;
}


/* Imagen */
.mike-cart-item-image {
    width: 78px;
    height: 78px;

    background: #f6f6f6;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.mike-cart-item-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* Información */
.mike-cart-item-info {
    min-width: 0;
}

.mike-cart-item-info h4 {
    margin: 0 0 12px;

    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;

    color: #111;

    text-transform: uppercase;
}

.mike-cart-item-meta {
    display: flex;
    align-items: center;

    font-size: 13px;
    color: #444;
}


/* Eliminar */
.mike-cart-remove {
    width: 24px;
    height: 24px;

    padding: 0;

    border: 1px solid #ddd;
    border-radius: 50%;

    background: transparent;

    color: #aaa;

    font-size: 17px;
    line-height: 1;

    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}

.mike-cart-remove:hover {
    color: #000;
    border-color: #999;
}


/* =========================================================
   PIE / SUBTOTAL
========================================================= */

.mike-cart-footer {
    padding: 0 26px 30px;
    background: #fff;
}

.mike-cart-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 24px 0;

    border-bottom: 1px solid #dedede;

    font-size: 15px;
    color: #111;
}

.mike-cart-subtotal strong {
    font-weight: 700;
}


/* =========================================================
   BOTONES
========================================================= */

.mike-cart-actions {
    padding-top: 20px;
}

.mike-cart-btn {
    width: 100%;
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    background: #000;
    color: #fff;

    border-radius: 30px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .2s ease,
        transform .2s ease;
}

.mike-cart-btn:hover {
    background: #222;
    color: #fff;
}

.mike-cart-btn:active {
    transform: scale(.99);
}


/* Evita scroll de la página cuando el panel está abierto */
body.mike-cart-open {
    overflow: hidden;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 600px) {

    .mike-cart-drawer {
        width: 90%;
    }

    .mike-cart-header {
        padding: 18px 18px 8px;
    }

    .mike-cart-body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mike-cart-footer {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 22px;
    }

    .mike-cart-item {
        grid-template-columns: 68px 1fr 26px;
        gap: 12px;
    }

    .mike-cart-item-image {
        width: 68px;
        height: 68px;
    }

}

/* =========================================================
   MIKE STORE - AJUSTE FINAL CARRITO LATERAL ESTILO YOLU
========================================================= */

.mike-cart-drawer {
    width: 375px;
    max-width: 100%;
}


/* CABECERA / X */
.mike-cart-header {
    padding: 17px 17px 0;
    min-height: 45px;
}

.mike-cart-close {
    width: 25px;
    height: 25px;

    font-size: 25px;
    font-weight: 600;

    color: #777;
}


/* =========================================================
   CUERPO
========================================================= */

.mike-cart-body {
    flex: none;

    padding: 0 27px;

    overflow: visible;
}


/* PRODUCTO */
.mike-cart-item {
    grid-template-columns: 78px 1fr 23px;

    gap: 18px;

    align-items: center;

    padding: 12px 0 20px;

    border-bottom: 1px solid #d9d9d9;
}


/* IMAGEN */
.mike-cart-item-image {
    width: 78px;
    height: 78px;

    background: #f7f7f7;
}

.mike-cart-item-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* NOMBRE */
.mike-cart-item-info h4 {
    margin: 0 0 9px;

    font-size: 13px;
    line-height: 1.45;

    font-weight: 700;

    color: #111;
}


/* CANTIDAD X PRECIO */
.mike-cart-item-meta {
    font-size: 12px;
    line-height: 1.4;

    color: #555;
}


/* X DEL PRODUCTO */
.mike-cart-remove {
    width: 21px;
    height: 21px;

    border: 1px solid #dedede;

    font-size: 15px;

    color: #aaa;
}


/* =========================================================
   SUBTOTAL Y BOTONES
========================================================= */

.mike-cart-footer {
    padding: 0 27px 25px;

    background: #fff;
}


/* SUBTOTAL */
.mike-cart-subtotal {
    padding: 23px 0 22px;

    border-bottom: 1px solid #d9d9d9;

    font-size: 13px;
}

.mike-cart-subtotal strong {
    font-weight: 700;
}


/* ESPACIO ANTES DE BOTONES */
.mike-cart-actions {
    padding-top: 20px;
}


/* BOTONES GENERALES */
.mike-cart-btn {
    min-height: 57px;

    margin-bottom: 11px;

    border-radius: 30px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0;

    box-sizing: border-box;
}


/* VER CARRITO - COMO YOLU */
.mike-cart-btn-view {
    background: #fff;

    color: #111;

    border: 1px solid #111;
}

.mike-cart-btn-view:hover {
    background: #f5f5f5;

    color: #111;
}


/* FINALIZAR COMPRA */
.mike-cart-btn-checkout {
    background: #000;

    color: #fff;

    border: 1px solid #000;
}

.mike-cart-btn-checkout:hover {
    background: #191919;

    color: #fff;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

    .mike-cart-drawer {
        width: 90%;
    }

}

/* =========================================================
   MIKE STORE
   DETALLES FINALES DRAWER CARRITO - ESTILO YOLU
========================================================= */


/* CURVA SUPERIOR E INFERIOR IZQUIERDA DEL PANEL */
.mike-cart-drawer {
    border-radius: 18px 0 0 18px;
    overflow: hidden;
}


/* =========================================================
   BOTÓN VER CARRITO
   NORMAL: BLANCO
   HOVER: NEGRO
========================================================= */

.mike-cart-btn-view {
    background: #fff;
    color: #111;
    border: 1px solid #111;

    transition:
        background-color .22s ease,
        color .22s ease,
        border-color .22s ease;
}

.mike-cart-btn-view:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}


/* =========================================================
   BOTÓN FINALIZAR COMPRA
   NORMAL: NEGRO
   HOVER: BLANCO
========================================================= */

.mike-cart-btn-checkout {
    background: #000;
    color: #fff;
    border: 1px solid #000;

    transition:
        background-color .22s ease,
        color .22s ease,
        border-color .22s ease;
}

.mike-cart-btn-checkout:hover {
    background: #fff;
    color: #111;
    border-color: #111;
}

/* =========================================
   CENTRADO INFORMACIÓN TARJETA CATEGORÍA
========================================= */

#mike-categoria-page .mike-product-info {
    width: 100%;
    text-align: center;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

#mike-categoria-page .mike-product-info h2,
#mike-categoria-page .mike-product-price {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
}

/* =========================================================
   MINIATURAS GALERÍA PRODUCTO - ESTILO YOLU
========================================================= */

#mike-product-page .mike-yolu-thumb {
    opacity: 0.35;
    transition: opacity 0.22s ease;
}

/* La seleccionada siempre queda totalmente visible */
#mike-product-page .mike-yolu-thumb.is-active {
    opacity: 1 !important;
}

/* Al pasar el mouse se ilumina */
#mike-product-page .mike-yolu-thumb:hover {
    opacity: 1;
}

/* =========================================================
   MIKE STORE - LIGHTBOX / VISOR DE PRODUCTO
========================================================= */

.mike-product-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px 90px;

    background: rgba(0, 0, 0, 0.88);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


/* MODAL ABIERTO */

.mike-product-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   CONTENEDOR DE LA IMAGEN AMPLIADA
========================================================= */

.mike-lightbox-content {
    position: relative;

    width: min(92vw, 1200px);
    height: 88vh;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    border-radius: 0;
    overflow: hidden;
}


/* =========================================================
   IMAGEN AMPLIADA - OCUPA TODO EL VISOR
========================================================= */

#mikeLightboxImage {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    user-select: none;
}


/* =========================================================
   BOTÓN CERRAR
========================================================= */

.mike-lightbox-close {
    position: absolute;

    top: 22px;
    right: 30px;

    z-index: 5;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    background: transparent;

    color: #ffffff;

    font-size: 42px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.mike-lightbox-close:hover {
    opacity: 0.65;
    transform: scale(1.08);
}


/* =========================================================
   FLECHAS
========================================================= */

.mike-lightbox-arrow {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    z-index: 5;

    width: 55px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    background: transparent;

    color: #ffffff;

    font-size: 32px;

    cursor: pointer;

    opacity: 0.85;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.mike-lightbox-arrow:hover {
    opacity: 1;
}

.mike-lightbox-prev {
    left: 25px;
}

.mike-lightbox-next {
    right: 25px;
}


/* =========================================================
   CONTADOR
========================================================= */

.mike-lightbox-counter {
    position: absolute;

    left: 50%;
    bottom: 15px;

    transform: translateX(-50%);

    padding: 7px 13px;

    border-radius: 20px;

    background: rgba(0, 0, 0, 0.65);

    color: #ffffff;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.5px;
}


/* =========================================================
   CURSOR SOBRE IMAGEN PRINCIPAL
========================================================= */

#mike-product-page .mike-yolu-photo {
    cursor: zoom-in;
}


/* =========================================================
   EVITAR SCROLL CUANDO EL VISOR ESTÁ ABIERTO
========================================================= */

body.mike-lightbox-open {
    overflow: hidden;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .mike-product-lightbox {
        padding: 60px 45px;
    }

    .mike-lightbox-content {
        width: 100%;
        height: 75vh;
    }

    .mike-lightbox-prev {
        left: 5px;
    }

    .mike-lightbox-next {
        right: 5px;
    }

    .mike-lightbox-arrow {
        width: 40px;
        font-size: 25px;
    }

    .mike-lightbox-close {
        top: 12px;
        right: 14px;
    }
}

/* =========================================================
   USUARIO AUTENTICADO - HEADER
========================================================= */

.mike-tool .mike-account-name {
    display: inline-block;
    margin-left: 7px;

    color: #050505;

    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;

    line-height: 1;
    white-space: nowrap;
}

/* =====================================================
   LOGO OFICIAL MIKE STORE - HEADER
===================================================== */

.mike-navbar__logo a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mike-navbar__logo-img {
    display: block;
    width: auto;
    height: 58px;
    object-fit: contain;
}

/* =========================================================
   MIKE STORE - BUSCADOR EN VIVO
========================================================= */

#mike-live-catalog {
    position: relative;
    transition: opacity .16s ease;
}

#mike-live-catalog.mike-catalog-loading {
    opacity: .55;
}


/* Indicador pequeño de búsqueda */

.mike-search-loading {
    position: fixed;

    top: 215px;
    left: 50%;

    transform: translate(-50%, -6px);

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 16px;

    background: #fff;

    border: 1px solid #e8e8e8;
    border-radius: 30px;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, .08);

    font-size: 12px;
    font-weight: 600;

    opacity: 0;
    visibility: hidden;

    z-index: 999;

    transition:
        opacity .15s ease,
        transform .15s ease;
}

.mike-search-loading.active {
    opacity: 1;
    visibility: visible;

    transform: translate(-50%, 0);
}


/* Spinner */

.mike-search-spinner {
    width: 14px;
    height: 14px;

    border: 2px solid #dedede;
    border-top-color: #111;

    border-radius: 50%;

    animation:
        mikeSearchSpin .55s linear infinite;
}

@keyframes mikeSearchSpin {

    to {
        transform: rotate(360deg);
    }

}

/* =========================================================
   MIKE STORE - TEXTO BUSCADOR ESTILO YOLU
========================================================= */

.mike-search input {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    color: #555;
}

.mike-search input::placeholder {
    font-size: 15px;
    font-weight: 600;
    color: #777;
    opacity: 1;
}

/* =========================================================
   PAGINACIÓN MIKE STORE - ESTILO YOLU
========================================================= */

#mike-categoria-page .mike-shop-pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 64px auto 0;
    padding: 0;

    gap: 0;
}


/* NÚMEROS Y FLECHA */
#mike-categoria-page .mike-shop-pagination a,
#mike-categoria-page .mike-pagination-dots {
    width: 42px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 1px solid #e5e5e5;
    border-right: 0;

    background: #fff;

    color: #111;
    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    line-height: 1;
}


/* PRIMER ELEMENTO */
#mike-categoria-page .mike-shop-pagination > *:first-child {
    border-radius: 0;
}


/* ÚLTIMO ELEMENTO */
#mike-categoria-page .mike-shop-pagination > *:last-child {
    border-right: 1px solid #e5e5e5;
}


/* PÁGINA ACTIVA */
#mike-categoria-page .mike-shop-pagination a.active {
    background: #000;
    border-color: #000;

    color: #fff;
    font-weight: 700;
}


/* TRES PUNTOS */
#mike-categoria-page .mike-pagination-dots {
    cursor: default;
}


/* FLECHA */
#mike-categoria-page .mike-shop-pagination .mike-pagination-next {
    font-size: 20px;
    font-weight: 400;
}


/* HOVER */
#mike-categoria-page .mike-shop-pagination a:not(.active):hover {
    background: #f5f5f5;
}

/* =========================================================
   MIKE STORE - WHATSAPP FLOTANTE
========================================================= */

.mike-whatsapp-widget {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 9999;
}


/* BOTÓN */

.mike-whatsapp-button {
    width: 62px;
    height: 62px;

    border: 0;
    border-radius: 50%;

    background: #25d366;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 32px;

    cursor: pointer;

    box-shadow: 0 5px 18px rgba(0,0,0,.20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.mike-whatsapp-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}


/* VENTANA */

.mike-whatsapp-panel {
    position: absolute;

    right: 0;
    bottom: 76px;

    width: 340px;

    background: #fff;

    border-radius: 14px;

    box-shadow: 0 8px 35px rgba(0,0,0,.20);

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px) scale(.97);

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s;
}


/* ABIERTO */

.mike-whatsapp-panel.active {
    opacity: 1;
    visibility: visible;

    transform: translateY(0) scale(1);
}


/* CABECERA */

.mike-whatsapp-header {
    background: #075e54;
    color: #fff;

    padding: 20px 20px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.mike-whatsapp-header strong {
    display: block;

    font-size: 17px;
    font-weight: 700;

    margin-bottom: 5px;
}

.mike-whatsapp-header span {
    display: block;

    font-size: 12px;

    opacity: .9;
}


/* CERRAR */

.mike-whatsapp-close {
    border: 0;
    background: transparent;

    color: #fff;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}


/* CUERPO */

.mike-whatsapp-body {
    padding: 10px;
}


/* ASESOR */

.mike-whatsapp-advisor {
    min-height: 70px;

    padding: 10px;

    display: flex;
    align-items: center;

    gap: 12px;

    color: #111;
    text-decoration: none;

    border-radius: 9px;

    transition: background .2s ease;
}

.mike-whatsapp-advisor:hover {
    background: #f4f4f4;
}


/* AVATAR */

.mike-advisor-avatar {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    border-radius: 50%;

    background: #eeeeee;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    font-weight: 700;

    color: #333;
}


/* INFORMACIÓN */

.mike-advisor-info {
    flex: 1;
}

.mike-advisor-info strong {
    display: block;

    font-size: 14px;
    font-weight: 700;

    margin-bottom: 3px;
}

.mike-advisor-info span {
    display: block;

    font-size: 12px;

    color: #777;
}


/* WHATSAPP ASESOR */

.mike-whatsapp-advisor > i {
    color: #25d366;

    font-size: 24px;
}


/* MÓVIL */

@media (max-width: 480px) {

    .mike-whatsapp-widget {
        right: 16px;
        bottom: 16px;
    }

    .mike-whatsapp-panel {
        width: calc(100vw - 32px);
        max-width: 340px;
    }

    .mike-whatsapp-button {
        width: 58px;
        height: 58px;

        font-size: 29px;
    }
}

/* =========================================================
   MENSAJE FLOTANTE WHATSAPP
========================================================= */

.mike-whatsapp-hint {
    position: absolute;
    right: 76px;
    bottom: 5px;

    width: 175px;
    padding: 11px 14px;

    background: #fff;
    border-radius: 10px;

    box-shadow: 0 4px 18px rgba(0,0,0,.14);

    cursor: pointer;

    opacity: 1;
    visibility: visible;

    transition:
        opacity .2s ease,
        transform .2s ease;

    animation: mikeWhatsappHintIn .35s ease;
}

.mike-whatsapp-hint::after {
    content: "";

    position: absolute;
    right: -7px;
    bottom: 18px;

    width: 14px;
    height: 14px;

    background: #fff;

    transform: rotate(45deg);
}

.mike-whatsapp-hint strong {
    position: relative;
    z-index: 1;

    display: block;

    margin-bottom: 3px;

    color: #111;

    font-size: 13px;
    font-weight: 700;
}

.mike-whatsapp-hint span {
    position: relative;
    z-index: 1;

    display: block;

    color: #777;

    font-size: 11px;
    font-weight: 400;
}

@keyframes mikeWhatsappHintIn {

    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 480px) {

    .mike-whatsapp-hint {
        right: 70px;
        width: 155px;
    }

}

/* =========================================================
   FOTO ASESORES WHATSAPP
========================================================= */

.mike-advisor-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    border-radius: 50%;
    overflow: hidden;

    background: #eeeeee;
}

.mike-advisor-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;
}

/* =========================================================
   MIKE STORE - BUSCADOR DESPLEGABLE ESTILO YOLU
========================================================= */

.mike-search {
    position: relative;
}


/* PANEL */

.mike-search-suggestions {
    position: absolute;

    top: calc(100% + 8px);
    right: -2px;
    left: auto;

    width: 330px;
    max-width: calc(100vw - 30px);

    background: #fff;

    border: 1px solid #eeeeee;
    border-radius: 0 0 6px 6px;

    box-shadow: 0 7px 20px rgba(0,0,0,.10);

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-3px);

    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility .15s ease;

    z-index: 10000;
}


.mike-search-suggestions.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* =========================================================
   PRODUCTO
========================================================= */

.mike-search-suggestion-item {
    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        auto;

    align-items: center;

    width: 100%;
    min-height: 64px;

    padding: 8px 13px;

    column-gap: 11px;

    color: #111;
    text-decoration: none;

    border-bottom: 1px solid #eeeeee;

    box-sizing: border-box;

    transition: background .15s ease;
}


.mike-search-suggestion-item:hover {
    background: #f7f7f7;
}


/* =========================================================
   IMAGEN
========================================================= */

.mike-search-suggestion-image {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    border: 1px solid #e6e6e6;
    border-radius: 3px;

    overflow: hidden;
}


.mike-search-suggestion-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   INFORMACIÓN
========================================================= */

.mike-search-suggestion-info {
    min-width: 0;

    display: flex;
    align-items: center;
}


/* NOMBRE */

.mike-search-suggestion-name {
    display: block;

    min-width: 0;

    color: #111;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* PRECIO */

.mike-search-suggestion-price {
    display: block;

    margin: 0 0 0 8px;

    color: #555;

    font-size: 11px;
    font-weight: 400;

    white-space: nowrap;
}


/* =========================================================
   VER TODOS
========================================================= */

.mike-search-suggestions-all {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 12px;

    background: #fff;

    color: #555;

    font-size: 10px;
    font-weight: 500;

    text-decoration: none;
    text-transform: uppercase;

    border: 0;
}


.mike-search-suggestions-all:hover {
    background: #f7f7f7;
    color: #111;
}


/* =========================================================
   SIN RESULTADOS
========================================================= */

.mike-search-suggestions-empty {
    padding: 20px 15px;

    text-align: center;

    color: #666;

    font-size: 12px;
}


/* =========================================================
   CARGANDO
========================================================= */

.mike-search-suggestions-loading {
    min-height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #777;

    font-size: 11px;
}


.mike-search-suggestions-spinner {
    width: 13px;
    height: 13px;

    border: 2px solid #ddd;
    border-top-color: #111;
    border-radius: 50%;

    animation:
        mikeSuggestionsSpin .55s linear infinite;
}


@keyframes mikeSuggestionsSpin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 480px) {

    .mike-search-suggestions {
        width: min(330px, calc(100vw - 24px));
    }

}

/* =========================================================
   WHATSAPP - FONDO DE CONVERSACIÓN
========================================================= */

.mike-whatsapp-body {
    position: relative;

    padding: 12px;

    background-color: #efeae2;

    background-image:
        linear-gradient(
            rgba(239, 234, 226, .12),
            rgba(239, 234, 226, .12)
        ),
        url("../img/whatsapp/fondo-whatsapp.png");

    background-repeat: repeat;

    background-position: center top;

    /*
     * Tu imagen es bastante grande.
     * La reducimos para que el patrón se aprecie
     * correctamente dentro del panel.
     */
    background-size: 300px auto;
}

/* =========================================================
   MIKE STORE
   HEADER + MENÚ RESPONSIVE
========================================================= */

/* ELEMENTOS MÓVILES OCULTOS EN ESCRITORIO */
.mike-mobile-menu-btn,
.mike-mobile-overlay,
.mike-mobile-drawer {
    display: none;
}


/* =========================================================
   TABLET / MÓVIL
========================================================= */

@media (max-width: 1100px) {

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .mike-navbar {
        width: 100%;
        height: auto;
        background: #fff;
        border-bottom: 1px solid #d9d9d9;
    }

    .mike-navbar__inner {
        position: relative;

        width: 100%;
        height: 72px;

        padding: 0 20px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        box-sizing: border-box;
    }


    /* MENÚ DE ESCRITORIO */

    .mike-navbar__menu {
        display: none !important;
    }


    /* BOTÓN HAMBURGUESA */

    .mike-mobile-menu-btn {
        position: relative;

        width: 44px;
        height: 44px;

        flex: 0 0 44px;

        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        background: transparent;
        color: #111;

        border: 0;

        font-size: 27px;

        cursor: pointer;

        z-index: 5;
    }


    /* LOGO */

    .mike-navbar__logo {
        position: absolute;

        left: 50%;
        top: 50%;

        transform: translate(-50%, -50%);

        margin: 0;

        z-index: 4;
    }

    .mike-navbar__logo a {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mike-navbar__logo-img {
        display: block;

        width: auto;
        height: 54px;

        max-width: 145px;

        object-fit: contain;
    }


    /* HERRAMIENTAS DERECHA */

    .mike-navbar__tools {
        width: auto;
        height: 100%;

        margin-left: auto;

        display: flex;
        align-items: center;

        gap: 18px;
    }


    /* BUSCADOR DE ESCRITORIO */

    .mike-navbar__tools .mike-search {
        display: none !important;
    }


    /* CUENTA */

    .mike-navbar__tools .mike-tool:not(.mike-cart) {
        display: none;
    }


    /* CARRITO */

    .mike-navbar__tools .mike-cart {
        display: flex;
        align-items: center;

        margin: 0;
    }

    .mike-navbar__tools .mike-cart > span {
        display: none;
    }

    .mike-cart__icon {
        position: relative;

        width: 35px;
        height: 40px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mike-cart__icon > i {
        font-size: 29px;
    }


    /* -----------------------------------------------------
       FONDO OSCURO
    ----------------------------------------------------- */

    .mike-mobile-overlay {
        position: fixed;

        inset: 0;

        display: block;

        background: rgba(0, 0, 0, .55);

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transition:
            opacity .28s ease,
            visibility .28s ease;

        z-index: 19998;
    }

    .mike-mobile-overlay--open {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;
    }


    /* -----------------------------------------------------
       DRAWER
    ----------------------------------------------------- */

    .mike-mobile-drawer {
        position: fixed;

        top: 0;
        left: 0;

        width: min(86vw, 390px);
        height: 100dvh;

        display: flex;
        flex-direction: column;

        background: #fff;

        transform: translateX(-105%);

        visibility: hidden;

        transition:
            transform .30s ease,
            visibility .30s ease;

        overflow-y: auto;
        overscroll-behavior: contain;

        z-index: 19999;

        box-shadow:
            10px 0 30px
            rgba(0, 0, 0, .12);
    }

    .mike-mobile-drawer--open {
        transform: translateX(0);
        visibility: visible;
    }


    /* BLOQUEAR PÁGINA */

    body.mike-mobile-menu-open {
        overflow: hidden;
    }


    /* -----------------------------------------------------
       CABECERA DRAWER
    ----------------------------------------------------- */

    .mike-mobile-drawer__header {
        position: relative;

        min-height: 76px;

        padding: 0 24px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        border-bottom: 1px solid #e7e7e7;

        font-size: 14px;
        font-weight: 800;

        letter-spacing: .5px;
    }

    .mike-mobile-drawer__close {
        width: 42px;
        height: 42px;

        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        background: transparent;
        color: #111;

        border: 0;

        font-size: 26px;

        cursor: pointer;
    }


    /* -----------------------------------------------------
       BUSCADOR DEL DRAWER
    ----------------------------------------------------- */

    .mike-mobile-drawer__search {
        padding: 16px 20px;

        border-bottom: 1px solid #ececec;
    }

    .mike-mobile-drawer__search form {
        position: relative;

        width: 100%;
        height: 48px;

        display: flex;
        align-items: center;

        background: #f2f2f2;

        border-radius: 25px;

        overflow: hidden;
    }

    .mike-mobile-drawer__search input {
        width: 100%;
        height: 100%;

        padding: 0 52px 0 20px;

        background: transparent;

        border: 0;
        outline: none;

        color: #111;

        font-family: inherit;
        font-size: 14px;
    }

    .mike-mobile-drawer__search input::placeholder {
        color: #777;
    }

    .mike-mobile-drawer__search button {
        position: absolute;

        top: 0;
        right: 4px;

        width: 44px;
        height: 48px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        background: transparent;
        color: #111;

        border: 0;

        font-size: 18px;

        cursor: pointer;
    }


    /* -----------------------------------------------------
       LINKS PRINCIPALES
    ----------------------------------------------------- */

    .mike-mobile-drawer__nav {
        width: 100%;

        display: flex;
        flex-direction: column;
    }

    .mike-mobile-drawer__nav a {
        width: 100%;
        min-height: 61px;

        padding: 0 24px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        box-sizing: border-box;

        color: #111;
        text-decoration: none;

        border-bottom: 1px solid #e9e9e9;

        font-size: 14px;
        font-weight: 800;
    }

    .mike-mobile-drawer__nav a i {
        color: #777;

        font-size: 11px;
    }


    /* -----------------------------------------------------
       CUENTA
    ----------------------------------------------------- */

    .mike-mobile-drawer__secondary {
        width: 100%;

        background: #f7f7f7;

        border-bottom: 1px solid #e7e7e7;
    }

    .mike-mobile-drawer__secondary a {
        min-height: 64px;

        padding: 0 24px;

        display: flex;
        align-items: center;

        gap: 13px;

        color: #111;
        text-decoration: none;

        font-size: 14px;
        font-weight: 700;
    }

    .mike-mobile-drawer__secondary i {
        width: 22px;

        font-size: 20px;
        text-align: center;
    }


    /* -----------------------------------------------------
       PIE DRAWER
    ----------------------------------------------------- */

    .mike-mobile-drawer__footer {
        margin-top: auto;

        padding: 24px;

        background: #fafafa;

        border-top: 1px solid #ededed;
    }

    .mike-mobile-drawer__footer p {
        margin: 0 0 5px;

        color: #111;

        font-size: 14px;
        font-weight: 900;

        letter-spacing: .5px;
    }

    .mike-mobile-drawer__footer span {
        color: #777;

        font-size: 12px;
        line-height: 1.5;
    }

}

/* =========================================================
   BUSCADOR MÓVIL
========================================================= */

.mike-mobile-searchbar {
    display: none;
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 700px) {

    html,
    body {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }


    /* HEADER */

    .mike-navbar__inner {
        height: 72px;

        padding: 0 19px;
    }


    /* HAMBURGUESA */

    .mike-mobile-menu-btn {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 27px;
    }


    /* LOGO */

    .mike-navbar__logo-img {
        height: 52px;
        max-width: 125px;
    }


    /* CARRITO */

    .mike-navbar__tools {
        gap: 0;
    }

    .mike-cart__icon {
        width: 38px;
        height: 42px;
    }

    .mike-cart__icon > i {
        font-size: 28px;
    }


    /* DRAWER */

    .mike-mobile-drawer {
        width: 84vw;
        max-width: 360px;
    }


    /* BUSCADOR MÓVIL */

    .mike-mobile-searchbar {
        width: 100%;

        padding: 10px 18px 12px;

        display: block;

        background: #fff;

        box-sizing: border-box;

        border-bottom: 1px solid #e5e5e5;
    }

    .mike-mobile-searchbar__form {
        width: 100%;
        height: 48px;

        display: flex;
        align-items: center;

        background: #f2f2f2;

        border-radius: 28px;

        overflow: hidden;
    }

    .mike-mobile-searchbar__form button {
        width: 54px;
        height: 48px;

        flex: 0 0 54px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        border: 0;
        background: transparent;

        color: #111;

        font-size: 20px;

        cursor: pointer;
    }

    .mike-mobile-searchbar__form input {
        min-width: 0;
        width: 100%;
        height: 48px;

        padding: 0 18px 0 0;

        border: 0;
        outline: none;

        background: transparent;

        color: #111;

        font-family: inherit;
        font-size: 15px;
    }

    .mike-mobile-searchbar__form input::placeholder {
        color: #777;
    }

}


/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media (max-width: 420px) {

    .mike-navbar__inner {
        height: 68px;

        padding-left: 14px;
        padding-right: 14px;
    }

    .mike-navbar__logo-img {
        height: 48px;
        max-width: 110px;
    }

    .mike-mobile-menu-btn {
        font-size: 25px;
    }

    .mike-cart__icon > i {
        font-size: 26px;
    }

    .mike-mobile-drawer {
        width: 88vw;
    }

    .mike-mobile-drawer__header {
        min-height: 68px;

        padding-left: 20px;
        padding-right: 16px;
    }

    .mike-mobile-drawer__nav a {
        min-height: 58px;

        padding-left: 20px;
        padding-right: 20px;

        font-size: 13px;
    }


    /* BUSCADOR MÓVIL PEQUEÑO */

    .mike-mobile-searchbar {
        padding: 9px 14px 11px;
    }

    .mike-mobile-searchbar__form {
        height: 46px;
    }

    .mike-mobile-searchbar__form button,
    .mike-mobile-searchbar__form input {
        height: 46px;
    }

}

/* =========================================================
   MIKE STORE - DRAWER MÓVIL REFINADO
========================================================= */

@media (max-width: 700px) {

    /* PANEL */

    .mike-mobile-drawer {
        width: 84%;
        max-width: none;
        background: #fff;
        box-shadow: none;
    }


    /* CABECERA */

    .mike-mobile-drawer__header {
        position: relative;

        width: 100%;
        height: 82px;
        min-height: 82px;

        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #fff;

        border-bottom: 1px solid #e5e5e5;
    }


    /* LOGO CENTRAL */

    .mike-mobile-drawer__logo {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mike-mobile-drawer__logo img {
        display: block;

        width: auto;
        height: 49px;
        max-width: 120px;

        object-fit: contain;
    }


    /* X */

    .mike-mobile-drawer__close {
        position: absolute;

        top: 50%;
        right: 20px;

        width: 36px;
        height: 36px;

        transform: translateY(-50%);

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        background: transparent;
        border: 0;

        color: #111;

        font-size: 25px;
    }


    /* NAVEGACIÓN */

    .mike-mobile-drawer__nav {
        width: 100%;

        display: block;

        background: #fff;
    }

    .mike-mobile-drawer__nav a {
        width: 100%;
        min-height: 53px;

        padding: 0 22px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        box-sizing: border-box;

        background: #fff;

        border-bottom: 1px solid #e3e3e3;

        color: #111;
        text-decoration: none;

        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0;
    }

    .mike-mobile-drawer__nav a i {
        color: #111;

        font-size: 12px;
        font-weight: 400;
    }


    /* SECUNDARIO */

    .mike-mobile-drawer__secondary {
        width: 100%;

        background: #f3f3f3;

        border: 0;
    }

    .mike-mobile-drawer__secondary a {
        width: 100%;
        min-height: 54px;

        padding: 0 22px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        box-sizing: border-box;

        gap: 0;

        background: #f3f3f3;

        border-bottom: 1px solid #dedede;

        color: #111;
        text-decoration: none;

        font-size: 13px;
        font-weight: 600;
    }

    .mike-mobile-drawer__secondary a i {
        width: auto;

        color: #111;

        font-size: 12px;
        font-weight: 400;
    }


    /* REDES */

    .mike-mobile-drawer__social {
        padding: 21px 22px 30px;

        background: #fff;
    }

    .mike-mobile-drawer__social p {
        margin: 0 0 17px;

        color: #111;

        font-size: 13px;
        font-weight: 700;
    }

    .mike-mobile-drawer__social-links {
        display: flex;
        align-items: center;

        gap: 8px;
    }

    .mike-mobile-drawer__social-links a {
        min-width: 0;
        height: 44px;

        padding: 0 12px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 7px;

        background: #f1f1f1;

        border-radius: 12px;

        color: #111;
        text-decoration: none;

        font-size: 11px;
        font-weight: 700;
    }

    .mike-mobile-drawer__social-links i {
        font-size: 21px;
    }


    /* YA NO EXISTEN EN EL NUEVO DRAWER */

    .mike-mobile-drawer__search,
    .mike-mobile-drawer__footer {
        display: none !important;
    }


    /* OSCURECIMIENTO DEL SITIO */

    .mike-mobile-overlay {
        background: rgba(0, 0, 0, .58);
    }

}

/* =========================================================
   FLECHAS DRAWER MÓVIL
========================================================= */

@media (max-width: 700px) {

    .mike-mobile-chevron {
        width: 11px;
        height: 11px;

        display: block;
        flex: 0 0 11px;

        margin-right: 2px;

        border-right: 1.5px solid #111;
        border-bottom: 1.5px solid #111;

        transform: rotate(45deg) translateY(-3px);

        box-sizing: border-box;
    }

}

/* =========================================================
   MIKE STORE - ACORDEONES DRAWER MÓVIL
========================================================= */

@media (max-width: 700px) {

    /* BOTÓN */

    .mike-mobile-accordion-btn {
        width: 100%;
        min-height: 53px;

        padding: 0 22px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        box-sizing: border-box;

        border: 0;
        border-bottom: 1px solid #e3e3e3;

        background: #fff;
        color: #111;

        font-family: inherit;
        font-size: 13px;
        font-weight: 700;

        text-align: left;
        cursor: pointer;
    }


    /* ZONA SECUNDARIA */

    .mike-mobile-accordion-btn--secondary {
        min-height: 54px;

        background: #f3f3f3;

        font-weight: 600;
    }


    /* BOTÓN ABIERTO */

    .mike-mobile-accordion-btn--open {
        background: #050505;
        color: #fff;
    }


    /* FLECHA */

    .mike-mobile-accordion-btn
    .mike-mobile-chevron {
        transition: transform .22s ease;
    }

    .mike-mobile-accordion-btn--open
    .mike-mobile-chevron {
        border-color: #fff;

        transform:
            rotate(225deg)
            translate(-2px, -1px);
    }


    /* SUBMENÚ */

    .mike-mobile-submenu {
        display: none;

        width: 100%;

        background: #fff;
    }

    .mike-mobile-submenu--open {
        display: block;
    }


    /* ENLACES INTERIORES */

    .mike-mobile-submenu a {
        width: 100%;
        min-height: 52px;

        padding: 0 44px;

        display: flex;
        align-items: center;

        box-sizing: border-box;

        background: #fff;
        color: #111;

        border-bottom: 1px solid #e5e5e5;

        text-decoration: none;

        font-size: 12.5px;
        font-weight: 700;
    }


    /* SUBMENÚS DE LA ZONA GRIS */

    .mike-mobile-submenu--secondary a {
        background: #f3f3f3;
    }

}

/* =========================================================
   PREGUNTAS FRECUENTES - MIKE STORE
========================================================= */

.mike-faq-page {
    width: 100%;
    background: #fff;
}

.mike-faq-hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 72px 30px 48px;
    text-align: center;
}

.mike-faq-hero > span {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #777;
}

.mike-faq-hero h1 {
    margin: 0;
    color: #111;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
}

.mike-faq-hero p {
    max-width: 620px;
    margin: 18px auto 0;
    color: #666;
    font-size: 15px;
    line-height: 1.7;
}

.mike-faq-container {
    width: calc(100% - 60px);
    max-width: 920px;
    margin: 0 auto;
    padding-bottom: 90px;
}

.mike-faq-group {
    margin-bottom: 45px;
}

.mike-faq-group h2 {
    margin: 0 0 15px;
    color: #111;
    font-size: 20px;
    font-weight: 700;
}

.mike-faq-item {
    border-top: 1px solid #dedede;
}

.mike-faq-item:last-child {
    border-bottom: 1px solid #dedede;
}

.mike-faq-question {
    width: 100%;
    min-height: 65px;
    padding: 18px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 0;
    background: transparent;
    color: #111;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.mike-faq-icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.mike-faq-icon::before,
.mike-faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #111;
    transform: translate(-50%, -50%);
    transition: transform .2s ease;
}

.mike-faq-icon::before {
    width: 14px;
    height: 1px;
}

.mike-faq-icon::after {
    width: 1px;
    height: 14px;
}

.mike-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .25s ease;
}

.mike-faq-answer > div {
    min-height: 0;
    overflow: hidden;
    color: #666;
    font-size: 14px;
    line-height: 1.75;
}

.mike-faq-item--open .mike-faq-answer {
    grid-template-rows: 1fr;
}

.mike-faq-item--open .mike-faq-answer > div {
    padding: 0 42px 22px 5px;
}

.mike-faq-item--open .mike-faq-icon::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


/* =========================================================
   PREGUNTAS FRECUENTES - MÓVIL
========================================================= */

@media (max-width: 700px) {

    .mike-faq-hero {
        padding: 45px 20px 35px;
    }

    .mike-faq-hero h1 {
        font-size: 29px;
    }

    .mike-faq-hero p {
        margin-top: 14px;
        font-size: 13.5px;
        line-height: 1.65;
    }

    .mike-faq-container {
        width: calc(100% - 40px);
        padding-bottom: 60px;
    }

    .mike-faq-group {
        margin-bottom: 35px;
    }

    .mike-faq-group h2 {
        font-size: 18px;
    }

    .mike-faq-question {
        min-height: 61px;
        padding: 16px 2px;
        font-size: 13.5px;
    }

    .mike-faq-item--open
    .mike-faq-answer > div {
        padding: 0 30px 20px 2px;
    }

}

/* =========================================================
   PÁGINAS LEGALES - MIKE STORE
========================================================= */

.mike-legal-page {
    width: 100%;
    background: #fff;
    color: #222;
}

.mike-legal-hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 72px 30px 48px;
    text-align: center;
}

.mike-legal-hero > span {
    display: block;
    margin-bottom: 10px;
    color: #777;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.mike-legal-hero h1 {
    margin: 0;
    color: #111;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
}

.mike-legal-hero p {
    max-width: 650px;
    margin: 18px auto 0;
    color: #666;
    font-size: 15px;
    line-height: 1.7;
}

.mike-legal-container {
    width: calc(100% - 60px);
    max-width: 920px;
    margin: 0 auto;
    padding-bottom: 90px;
}

.mike-legal-intro {
    margin-bottom: 45px;
    padding: 25px 28px;
    background: #f6f6f6;
    border-radius: 8px;
}

.mike-legal-intro p {
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.8;
}

.mike-legal-section {
    padding: 0 0 35px;
    margin-bottom: 35px;
    border-bottom: 1px solid #e5e5e5;
}

.mike-legal-section:last-child {
    border-bottom: 0;
}

.mike-legal-section h2 {
    margin: 0 0 16px;
    color: #111;
    font-size: 19px;
    font-weight: 700;
}

.mike-legal-section p {
    margin: 0 0 14px;
    color: #555;
    font-size: 14px;
    line-height: 1.8;
}

.mike-legal-section ul {
    margin: 18px 0 0;
    padding-left: 20px;
}

.mike-legal-section li {
    margin-bottom: 9px;
    color: #555;
    font-size: 14px;
    line-height: 1.65;
}

.mike-legal-contact {
    margin-top: 20px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f6f6f6;
    border-radius: 8px;
}

.mike-legal-contact i {
    font-size: 21px;
}

.mike-legal-contact div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mike-legal-contact span {
    color: #777;
    font-size: 11px;
}

.mike-legal-contact strong {
    color: #111;
    font-size: 14px;
}


/* MÓVIL */

@media (max-width: 700px) {

    .mike-legal-hero {
        padding: 45px 20px 35px;
    }

    .mike-legal-hero h1 {
        font-size: 29px;
    }

    .mike-legal-hero p {
        font-size: 13.5px;
    }

    .mike-legal-container {
        width: calc(100% - 40px);
        padding-bottom: 60px;
    }

    .mike-legal-intro {
        margin-bottom: 35px;
        padding: 20px;
    }

    .mike-legal-section {
        padding-bottom: 28px;
        margin-bottom: 28px;
    }

    .mike-legal-section h2 {
        font-size: 17px;
    }

    .mike-legal-section p,
    .mike-legal-section li {
        font-size: 13.5px;
    }

}

/* =========================================================
   MIKE STORE - SLIDER LIQUIDACIÓN
========================================================= */

.mike-liquidacion-slider {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.mike-liquidacion-viewport {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.mike-liquidacion-track {
    display: flex;
    align-items: stretch;
    gap: 22px;
    width: max-content;
    transition: transform 0.45s ease;
    will-change: transform;
}

/*
 * Tarjetas dentro del nuevo slider.
 * En escritorio mostramos varias tarjetas.
 */
.mike-liquidacion-track .mike-liquidacion-card {
    flex: 0 0 230px;
    width: 230px;
    min-width: 230px;
}

/* =========================================================
   FLECHAS
========================================================= */

.mike-liquidacion-arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 8;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);
    color: #111;

    font-size: 14px;
    cursor: pointer;

    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}

.mike-liquidacion-arrow:hover {
    background: #111;
    color: #fff;
}

.mike-liquidacion-prev {
    left: -18px;
}

.mike-liquidacion-next {
    right: -18px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .mike-liquidacion-track {
        gap: 18px;
    }

    .mike-liquidacion-track .mike-liquidacion-card {
        flex-basis: 210px;
        width: 210px;
        min-width: 210px;
    }

    .mike-liquidacion-prev {
        left: 4px;
    }

    .mike-liquidacion-next {
        right: 4px;
    }
}

/* =========================================================
   LIQUIDACIÓN - MÓVIL DEFINITIVO
========================================================= */

@media (max-width: 767px) {

    .mike-liquidacion {
        width: 100%;
        margin: 0;
        padding: 42px 0 48px;
        background: #ffffff;
    }

    .mike-liquidacion-container {
        width: 100%;
        max-width: none;

        display: block;

        margin: 0;
        padding: 0;

        overflow: hidden;
    }


    /* =========================
       INFORMACIÓN
    ========================= */

    .mike-liquidacion-info {
        width: 100%;
        max-width: none;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        margin: 0 0 34px;
        padding: 0 20px;

        text-align: center;
    }

    .mike-liquidacion-info h2 {
        width: 100%;

        margin: 0 0 24px;

        color: #050505;

        font-family:
            "Arial Narrow",
            Arial,
            sans-serif;

        font-size: 17px;
        font-weight: 800;
        line-height: 1;

        letter-spacing: -0.7px;

        text-align: center;
        white-space: nowrap;
    }

    .mike-liquidacion-info p {
        width: 100%;
        max-width: 350px;

        margin: 0 auto 32px;

        color: #666666;

        font-family:
            "Arial Narrow",
            Arial,
            sans-serif;

        font-size: 14px;
        font-weight: 400;
        line-height: 1.55;

        letter-spacing: -0.35px;

        text-align: center;
    }

    .mike-liquidacion-btn {
        width: calc(100% - 74px);
        max-width: 300px;
        min-width: 0;
        height: 54px;

        margin: 0 auto;
        padding: 0 20px;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #000000;
        color: #ffffff;

        border: 0;
        border-radius: 999px;

        font-family:
            "Arial Narrow",
            Arial,
            sans-serif;

        font-size: 13px;
        font-weight: 800;

        text-align: center;
    }


    /* =========================
       SLIDER
    ========================= */

    .mike-liquidacion-slider {
        position: relative;

        width: 100%;

        margin: 0;
        padding: 0 20px;
    }

    .mike-liquidacion-viewport {
        width: 100%;
        min-width: 0;

        overflow: hidden;
    }

    .mike-liquidacion-track {
        display: flex;
        align-items: stretch;

        width: max-content;

        gap: 10px;

        transition: transform .45s ease;
        will-change: transform;
    }


    /* DOS PRODUCTOS VISIBLES */

    .mike-liquidacion-track .mike-liquidacion-card {
        flex: 0 0 calc((100vw - 50px) / 2);

        width: calc((100vw - 50px) / 2);
        min-width: calc((100vw - 50px) / 2);

        margin: 0;
    }


    /* =========================
       PRODUCTO
    ========================= */

    .mike-liquidacion-imagen {
        width: 100%;
        aspect-ratio: 1 / 1;

        border-radius: 9px;
    }

    .mike-liquidacion-imagen img {
        width: 92%;
        height: 92%;

        object-fit: contain;
    }

    .mike-liquidacion-descuento {
        top: 8px;
        left: 8px;

        min-width: 43px;
        height: 33px;

        padding: 0 8px;

        font-size: 11px;
    }

    .mike-liquidacion-detalle {
        padding: 14px 4px 0;

        text-align: center;
    }

    .mike-liquidacion-detalle h3 {
        min-height: 0;

        margin: 0 0 9px;

        font-size: 13px;
        line-height: 1.25;

        text-align: center;
    }

    .mike-liquidacion-precios {
        justify-content: center;

        gap: 4px;
    }


    /* =========================
       FLECHAS
    ========================= */

    .mike-liquidacion-arrow {
        position: absolute;

        top: 42%;

        width: 36px;
        height: 36px;

        display: flex;
        align-items: center;
        justify-content: center;

        transform: translateY(-50%);

        background: #000000;
        color: #ffffff;

        border: 0;
        border-radius: 50%;

        box-shadow: none;

        font-size: 12px;

        z-index: 10;
    }

    .mike-liquidacion-prev {
        left: 10px;
    }

    .mike-liquidacion-next {
        right: 10px;
    }
}


/* =========================================================
   LIQUIDACIÓN - MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 420px) {

    .mike-liquidacion-info {
        padding-left: 18px;
        padding-right: 18px;
    }

    .mike-liquidacion-slider {
        padding-left: 14px;
        padding-right: 14px;
    }

    .mike-liquidacion-track {
        gap: 12px;
    }

    .mike-liquidacion-track .mike-liquidacion-card {
        flex-basis: calc((100vw - 40px) / 2);

        width: calc((100vw - 40px) / 2);
        min-width: calc((100vw - 40px) / 2);
    }
}

.mike-cart-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mike-cart-item-size,
.mike-cart-item-price {
    display: block;
    white-space: nowrap;
}

/* =========================================================
   MIKE STORE - MENÚ MI CUENTA
========================================================= */

.mike-account-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.mike-account-trigger {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}




/* DESPLEGABLE */

.mike-account-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;

    width: 220px;
    padding: 8px;

    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.10);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;

    z-index: 1500;
}


/* ABIERTO */

.mike-account-dropdown--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* OPCIONES */

.mike-account-dropdown a {
    display: flex;
    align-items: center;
    gap: 11px;

    width: 100%;
    padding: 12px 13px;

    color: #111111;
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    border-radius: 7px;

    transition:
        background .18s ease;
}

.mike-account-dropdown a:hover {
    background: #f4f4f4;
}

.mike-account-dropdown a i {
    width: 18px;
    text-align: center;
    font-size: 14px;
}


/* SEPARAR ACCESO ADMINISTRATIVO */

.mike-account-dropdown a + a {
    border-top: 1px solid #eeeeee;
    border-radius: 0 0 7px 7px;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 991px) {

    .mike-account-menu {
        display: none;
    }

}