/** Shopify CDN: Minification failed

Line 14:8 Expected identifier but found whitespace
Line 14:9 Unexpected "1000"

**/

#nav-top { font-size: calc(0.9285714286 * var(--main_fz)); }

input.size-s, select.size-s, .bv_atual.size-s, .size-s input, .size-s select, .size-s .bv_atual { --input_h: calc(var(--btn_fz) * var(--main_lh_h) + var(--btn_pv) * 0.65 * 2) }
input.size-m, select.size-m, .bv_atual.size-m, .size-m input, .size-m select, .size-m .bv_atual { --input_h: calc(var(--btn_fz) * var(--main_lh_h) + var(--btn_pv) * 1.2 * 2) }
input.size-l, select.size-l, .bv_atual.size-l, .size-l input, .size-l select, .size-l .bv_atual { --input_h: calc(var(--btn_fz) * var(--main_lh_h) + var(--btn_pv) * 1.35 * 2) }

z-index: 1000; /* Se agrego para que el boton como funciona no cubriera el menu desplegable del boton login */

/*.f8sr .l4vw + p { margin-left: 22px; }
	.f8sr .l4vw + p:before { display: none; }
	[dir="rtl"] .f8sr .l4vw + p { margin-left: 0; margin-right: 22px; }*/
		
/*@media only screen and (max-width: 1356px) {
.l4ft li { --mih: 22vw; }
} */
.l4al img, .l4al svg, .l4al picture { max-height: 25px !important; }

.l4cl.small .swiper-button-next:before { content: "\e96b"; }
.l4cl.small .swiper-button-prev:before { content: "\e96a"; }
[dir="rtl"] .l4cl.small .swiper-button-next:before { content: "\e96a"; }
[dir="rtl"] .l4cl.small .swiper-button-prev:before { content: "\e96b"; }


/*! Responsive --------- */
@media only screen and (max-width: 1356px) {
  .l4ft.static li.w33, .l4ft.static.w33 li { --mih: 22vw; }
  .l4ft.static li.w12,
  .l4ft.static li.w15,
  .l4ft.static li.w16,
  .l4ft.static li.w20,
  .l4ft.static li.w25,
  .l4ft.static li.w33,
  .l4ft.static.w12 li,
  .l4ft.static.w14 li,
  .l4ft.static.w16 li,
  .l4ft.static.w20 li,
  .l4ft.static.w25 li,
  .l4ft.static.w33 li { --mih: 22vw; }
}
@media only screen and (max-width: 1000px) { /* 1000 */
#root .l4ft.mobile-compact li { --mih: 145px; }
}
@media only screen and (max-width: 760px) { /* 760 */
h1, .h1, .l4cl.category h1, #root .l4cl.category .size-50 { font-size: var(--mob_h1); }
	h1, .h1, .l4cl.category h1, #root .l4cl.category .size-50 { font-size: var(--mob_h1); }
    h2, .h2, .l4cl.category h2 { font-size: var(--mob_h2); }
    h3, .h3, .l4cl.category h3 { font-size: var(--mob_h3); }
    h4, .h4, .l4cl.category h4 { font-size: var(--mob_h4); }
    h5, .h5, .l4cl.category h5 { font-size: var(--mob_h5); }
    h6, .h6, .l4cl.category h6 { font-size: var(--mob_h6); }
    .lead { font-size: var(--mob_lead); }

.f8sr { --f8sr_dist: 20px; }
	.f8sr fieldset > *:not(h1, h2, h3, h4, h5, h6, :first-child:not(hr)):before { display: none; }
  .l4ft.static li.w12,
  .l4ft.static li.w15,
  .l4ft.static li.w16,
  .l4ft.static li.w20,
  .l4ft.static li.w25,
  .l4ft.static li.w33,
  .l4ft.static.w12 li,
  .l4ft.static.w14 li,
  .l4ft.static.w16 li,
  .l4ft.static.w20 li,
  .l4ft.static.w25 li,
  .l4ft.static.w33 li { --mih: 300px; }
  
.l4vw li.active:not(:first-child:last-child) { display: none; } 
  
}

/* === [Swappy] Login mobile: ícono blanco + contorno amarillo + efecto pulse === */
@media only screen and (max-width: 760px) {
  #nav-user > ul > li a.mobile-only > i.icon-user {
    font-size: 2.4em !important;
    width: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border: 3px solid #FFD83D !important;
    border-radius: 50% !important;
    color: #FFFFFF !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
    position: relative !important;
    animation: swappy-pulse 1.8s infinite ease-in-out;
  }

  @keyframes swappy-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 216, 61, 0.5);
    }
    70% {
      box-shadow: 0 0 0 12px rgba(255, 216, 61, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(255, 216, 61, 0);
    }
  }
}
/* === Fin Swappy === */


/* Estilos para el logo del vendedor (Esfera) - Posicionamiento superior centrado */
.wk_seller_store_logo {
    /* Convierte el contenedor en un círculo */
    border-radius: 50%;
    /* Oculta cualquier parte de la imagen que sobresalga del círculo */
    overflow: hidden;
    /* Define el tamaño de la esfera */
    width: 60px; /* Ajusta este valor según el tamaño deseado */
    height: 60px; /* Mantén el mismo valor que el 'width' para un círculo perfecto */

    /* Estilos visuales adicionales */
    background-color: #ffffff; /* Fondo blanco para el logo */
    border: 2px solid #e0e0e0; /* Un borde sutil para destacarlo */
    box-shadow: 0 3px 8px rgba(0,0,0,0.25); /* Sombra más pronunciada */

    /* Posicionamiento absoluto */
    position: absolute; /* Esto saca el elemento del flujo normal del documento */
    top: -30px; /* Ajusta este valor: la mitad del 'height' (60px/2 = 30px) para que quede justo a la mitad de su circunferencia sobre el borde superior del contenedor. */
    left: 50%; /* Centra horizontalmente */
    transform: translateX(-50%); /* Ajusta para centrar el elemento basado en su propio ancho */
    z-index: 10; /* Asegura que esté por encima de la imagen del producto */

    /* Centra el contenido (la imagen) dentro de la esfera */
    display: flex;
    justify-content: center;
    align-items: center;
}

.wk_seller_store_logo img {
    /* Asegura que la imagen ocupe todo el espacio de la esfera */
    width: 100%;
    height: 100%;
    /* Recorta y escala la imagen para que cubra la esfera sin distorsión */
    object-fit: cover;
}

/* === [Swappy] Botón ¿Cómo funciona? flotante === */
.swappy-como-funciona-wrapper {
  position: relative;
  height: 0; /* Para que no afecte layout */
}

.swappy-como-funciona {
  position: absolute;
  top: -60px; /* Ajusta según tu header */
  right: 20px;
  background-color: #2C374D; /* Azul Swappy */
  color: #fff;
  border-radius: 25px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  z-index: 4;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
  line-height: 1;
}


.swappy-como-funciona {
  pointer-events: auto;
}

@media only screen and (max-width: 1024px) {
  .swappy-como-funciona-wrapper {
    display: none;
  }
}