/** Shopify CDN: Minification failed

Line 284:0 Unexpected "}"
Line 310:0 Comments in CSS use "/* ... */" instead of "//"
Line 312:36 Comments in CSS use "/* ... */" instead of "//"

**/
/* =========================================================
   SOLUCIÓN YA: Para ellas / Para ellos -> cards GRANDES en MÓVIL
   (forzamos carrusel flex en móvil, independientemente del tema)
   ========================================================= */

@media (max-width: 749px) {

  /* Ajusta aquí el tamaño */
  #shopify-section-template--26862545535309__featured_collection,
  width: 100% !important;
  height: 100% !important;
   !important;        /* CLAVE: como “Para ellas” */
  object-position: 50% 20% !important; /* evita cortar cabezas */
  transform: scale(1.02) !important;   /* quita “huecos” blancos */
}

/* ===== Flechas (SOLO escritorio) - Para ellas + Para ellos =====
   - Círculo BLANCO (no transparente)
   - Solo aparecen al pasar el ratón por la sección (hover)
   - No cambia tamaños de cards
=============================================================== */

/* 1) Oculta en móvil/tablet */
@media (max-width: 989px) {
  #MainContent .collection.is-mujer .slider-buttons,
  #MainContent .collection.is-hombre .slider-buttons {
    display: none !important;
  }
}

/* 2) Solo escritorio */
@media (min-width: 990px) {

  /* Asegura contexto para posicionar */
  #MainContent .collection.is-mujer slider-component,
  #MainContent .collection.is-hombre slider-component {
    position: relative !important;
  }

  /* Coloca las flechas encima, centradas verticalmente */
  #MainContent .collection.is-mujer .slider-buttons,
  #MainContent .collection.is-hombre .slider-buttons {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;

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

    padding: 0 14px !important;   /* separación lateral */
    width: 100% !important;

    z-index: 5 !important;

    /* CLAVE: que NO estén siempre visibles */
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .18s ease !important;
  }

  /* Aparecen SOLO al pasar el ratón por la sección */
  #MainContent .collection.is-mujer:hover .slider-buttons,
  #MainContent .collection.is-hombre:hover .slider-buttons {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Botón circular blanco, un poco más pequeño */
  #MainContent .collection.is-mujer .slider-button,
  #MainContent .collection.is-hombre .slider-button {
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;

    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.12) !important;

    box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;

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

    color: #111 !important;
    opacity: 1 !important;
  }

  /* Tamaño del icono dentro (la flecha) */
  #MainContent .collection.is-mujer .slider-button .icon,
  #MainContent .collection.is-hombre .slider-button .icon {
    width: 16px !important;
    height: 16px !important;
  }

  /* Quita contador si existe (1/5) */
  #MainContent .collection.is-mujer .slider-counter,
  #MainContent .collection.is-hombre .slider-counter {
    display: none !important;
  }
}
/* =========================
   PARA ELLOS – FIX DEFINITIVO IMÁGENES
   (rellena todo el blanco y deja todas iguales)
   ========================= */

#MainContent .collection.is-hombres .card__inner.ratio,
#MainContent .collection.is-hombres .card__media.ratio,
#MainContent .collection.is-hombres .media.ratio {
  --ratio-percent: 150% !important; /* mismo ratio que Para ellas */
}

/* La caja debe comportarse como el tema: altura por padding-bottom */
#MainContent .collection.is-hombres .card__media .media {
  position: relative !important;
  height: 0 !important;
  padding-bottom: var(--ratio-percent) !important; /* <- CLAVE */
  overflow: hidden !important;
}

/* Asegura que cualquier wrapper dentro no rompa el relleno */
#MainContent .collection.is-hombres .card__media .media > * {
  position: absolute !important;
  inset: 0 !important;
}

/* La imagen SIEMPRE rellena la caja */
#MainContent .collection.is-hombres .card__media .media img,
#MainContent .collection.is-hombres .card__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;        /* <- rellena (sin blanco) */
  object-position: 50% 20% !important; /* sube un poco para caras */
  display: block !important;
}
/* =========================================
   TAMAÑO CARDS EN MÓVIL (FUNCIONA POR ANCHO DE SLIDE)
   Solo Para ellas / Para ellos
   ========================================= */

:root{
  --vs-mobile-slide-width: 43%; /* CAMBIA ESTO: 75% / 85% / 92% / 96% */
  --vs-mobile-gap: 10px;
}

@media (max-width: 749px){

  /* 1) El contenedor del carrusel */
  #MainContent .collection.is-mujer .slider,
  #MainContent .collection.is-hombre .slider{
    gap: var(--vs-mobile-gap) !important;
  }

  /* 2) LA CLAVE: el tamaño real en móvil suele estar aquí */
  #MainContent .collection.is-mujer .slider__slide,
  #MainContent .collection.is-hombre .slider__slide{
    width: var(--vs-mobile-slide-width) !important;
    flex: 0 0 var(--vs-mobile-slide-width) !important;
    max-width: var(--vs-mobile-slide-width) !important;
  }

  /* 3) Por si tu tema usa .grid__item en vez de .slider__slide */
  #MainContent .collection.is-mujer .slider .grid__item,
  #MainContent .collection.is-hombre .slider .grid__item{
    width: var(--vs-mobile-slide-width) !important;
    flex: 0 0 var(--vs-mobile-slide-width) !important;
    max-width: var(--vs-mobile-slide-width) !important;
  }
}
/* ===== HERO (Image banner) – bajar texto + botón ===== */
/* ESCRITORIO */
@media (min-width: 750px){
  #Banner-template--26862545535309__image_banner_QxEVCB .banner__content{
    align-items: flex-end !important;          /* lo empuja hacia abajo */
  }
  #Banner-template--26862545535309__image_banner_QxEVCB .banner__box{
    margin-bottom: -43px !important;           /* AJUSTA ESTO (sube/baja) */
  }
}

/* MÓVIL */
@media (max-width: 749px){
  #Banner-template--26862545535309__image_banner_QxEVCB .banner__content{
    align-items: flex-end !important;          /* lo empuja hacia abajo */
  }
  #Banner-template--26862545535309__image_banner_QxEVCB .banner__box{
    margin-bottom: -5px !important;          /* AJUSTA ESTO (sube/baja) */
  }
}
/* ===== SOLO MÓVIL: ajustar espacio entre TEXTO y BOTÓN en el HERO ===== */
@media (max-width: 749px){
  /* AJUSTA AQUÍ (menos = más pegado) */
  #Banner-template--26862545535309__image_banner_QxEVCB{
    --gap-titulo-boton: -1000px;
  }

  /* 1) Quita márgenes “por defecto” que crean hueco */
  #Banner-template--26862545535309__image_banner_QxEVCB .banner__heading{
    margin-bottom: var(--gap-titulo-boton) !important;
  }

  /* 2) Si el tema mete margin-top al bloque de botones, lo neutralizamos */
  #Banner-template--26862545535309__image_banner_QxEVCB .banner__buttons{
    margin-top: 0 !important;
  }
}
@media (max-width: 749px){
  #Banner-template--26862545535309__image_banner_QxEVCB .banner__box{
    display: flex !important;
    flex-direction: column !important;
    gap: var(--gap-titulo-boton) !important; /* usa el mismo control */
  }
  #Banner-template--26862545535309__image_banner_QxEVCB .banner__text{
    margin: 0 !important;
  }
}
/* Ajusta la distancia entre el texto y el botón de manera más agresiva */
@media (max-width: 749px){
  #Banner-template--26862545535309__image_banner_QxEVCB .banner__heading{
    margin-bottom: -5000px !important; /* usa un valor negativo si quieres reducir más */
  }

  #Banner-template--26862545535309__image_banner_QxEVCB .banner__buttons{
    margin-top: -3000px !important; /* También se puede ajustar para el botón */
  }
}
/* ===============================
   HERO (solo MÓVIL) - controlar espacio entre texto y botón
   Ajusta SOLO estas 2 variables:
   --vs_gap: espacio entre texto y botón (recomendado 6px-18px)
   --vs_btn_shift: sube/baja el bloque del botón (negativo = más arriba)
================================= */

@media (max-width: 749px){

  #Banner-template--26862545535309__image_banner_QxEVCB{
    --vs_gap: -10px;         /* <- AJUSTA ESTO (menos = más pegado) */
    --vs_btn_shift: -20px;    /* <- si aún hace falta: -10px, -20px... */
  }

  /* El contenedor que tiene el h2 + texto + botones */
  #Banner-template--26862545535309__image_banner_QxEVCB .banner__box{
    display: flex !important;
    flex-direction: column !important;
    gap: var(--vs_gap) !important;      /* <- AQUÍ se controla el hueco real */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Quita márgenes que mete el tema */
  #Banner-template--26862545535309__image_banner_QxEVCB .banner__heading,
  #Banner-template--26862545535309__image_banner_QxEVCB .banner__text,
  #Banner-template--26862545535309__image_banner_QxEVCB .banner__buttons{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Plan B: mueve el bloque del botón si el tema “bloquea” el espacio */
  #Banner-template--26862545535309__image_banner_QxEVCB .banner__buttons{
    transform: translateY(var(--vs_btn_shift)) !important;
  }
}
/* =====================================================
   FIX REAL – IGUALAR ALTURA DE IMÁGENES
   (anula el ratio inline del tema)
   ===================================================== */

/* SOLO Hombre y Mujer */
.collection.is-hombre .card__inner.ratio::before,
.collection.is-mujer .card__inner.ratio::before {
  padding-bottom: 160% !important; /* 👈 AJUSTA ESTE VALOR */
}
}
/* Asegura que las tarjetas de productos estén alineadas correctamente */
.custom-swipe-products__card {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra los productos */
  justify-content: space-between;
  height: auto;
}

/* Ajusta el contenedor de las imágenes */
.custom-swipe-products__image-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Asegura que las imágenes se ajusten y mantengan la proporción */
.custom-swipe-products__image-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
// Habilitar solo el deslizamiento horizontal
document.querySelectorAll('.custom-swipe-products__slide').forEach(slide => {
  slide.style.overflowY = 'hidden'; // Desactiva el desplazamiento vertical
});

/* ================================================================
   SOLUCIÓN SOLO CSS - Custom Swipe Products  
   Sin JavaScript, usando propiedades nativas del navegador
   ================================================================ */

/* IMPORTANTE: Primero eliminar el JavaScript que agregamos */

/* 1. Track con scroll horizontal nativo */
.custom-swipe-products__track {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  gap: 16px !important;
  padding: 0 16px !important;
  /* Clave: altura máxima para que no genere scroll vertical */
  max-height: fit-content !important;
}

/* 2. Slides con snap */
.custom-swipe-products__slide {
  flex: 0 0 auto !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

/* 3. Contenedor sin restricciones */
.custom-swipe-products,
section.custom-swipe-products {
  overflow: visible !important;
  /* Eliminar cualquier altura fija que pueda causar scroll vertical */
  height: auto !important;
  max-height: none !important;
}

/* 4. Cards con altura fija total para evitar cambios de tamaño */
.custom-swipe-products__card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  /* Altura mínima para consistencia */
  min-height: 450px !important;
}

/* 5. Ratio fijo de imágenes */
.custom-swipe-products__image-wrapper {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 0 !important;
  height: 350px !important; /* Altura fija en lugar de padding-bottom */
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.custom-swipe-products__image-wrapper::before {
  display: none !important; /* Eliminar el pseudo-elemento si existe */
}

.custom-swipe-products__image-wrapper img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* 6. Info con espacio reducido */
.custom-swipe-products__info {
  flex: 1 !important;
  padding: 8px 0 0 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.custom-swipe-products__info h3,
.custom-swipe-products__info .custom-swipe-products__title {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.custom-swipe-products__info .price,
.custom-swipe-products__info [class*="price"] {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* 7. Ocultar scrollbar pero mantener funcionalidad */
.custom-swipe-products__track::-webkit-scrollbar {
  display: none;
}

.custom-swipe-products__track {
  -ms-overflow-style: none;
  scrollbar-width: none;
}



/* ================================================================
   CUSTOM SWIPE PRODUCTS (Podría interesarte) - SOLUCIÓN COMPLETA
   ================================================================ */

/* ===== PARTE 1: Cards alineadas (móvil y escritorio) ===== */

/* Track con scroll horizontal */
.custom-swipe-products__track {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  gap: 16px !important;
  padding: 0 16px !important;
  max-height: fit-content !important;
}

/* Slides con snap */
.custom-swipe-products__slide {
  flex: 0 0 auto !important;
  scroll-snap-align: start !important;
}

/* Contenedor sin restricciones */
.custom-swipe-products,
section.custom-swipe-products,
#shopify-section-template--26862545666381__custom_swipe_products_areLCK {
  overflow: visible !important;
  height: auto !important;
}

/* Cards con altura consistente */
.custom-swipe-products__card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 450px !important;
}

/* Ratio fijo de imágenes - MÓVIL */
.custom-swipe-products__image-wrapper {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 0 !important;
  height: 350px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.custom-swipe-products__image-wrapper::before {
  display: none !important;
}

.custom-swipe-products__image-wrapper img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Info con espacio reducido */
.custom-swipe-products__info {
  flex: 1 !important;
  padding: 8px 0 0 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.custom-swipe-products__info h3,
.custom-swipe-products__info .custom-swipe-products__title {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.custom-swipe-products__info .price,
.custom-swipe-products__info [class*="price"] {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Ocultar scrollbar */
.custom-swipe-products__track::-webkit-scrollbar {
  display: none;
}

.custom-swipe-products__track {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


/* ===== PARTE 2: Ajustes para ESCRITORIO ===== */

@media (min-width: 990px) {
  
  /* Aumentar tamaño de cards en escritorio */
  .custom-swipe-products__card {
    min-height: 550px !important;
  }

  /* Aumentar altura de imagen en escritorio */
  .custom-swipe-products__image-wrapper {
    height: 450px !important;
  }

  /* Ajustar ancho de slides */
  .custom-swipe-products__slide {
    width: auto !important;
    min-width: 280px !important;
    max-width: 350px !important;
  }

  /* Más padding lateral */
  .custom-swipe-products__track {
    padding: 0 24px !important;
  }
}

/* Pantallas muy grandes */
@media (min-width: 1400px) {
  .custom-swipe-products__card {
    min-height: 600px !important;
  }

  .custom-swipe-products__image-wrapper {
    height: 500px !important;
  }

  .custom-swipe-products__slide {
    max-width: 380px !important;
  }
}


/* ===== PARTE 3: FLECHAS de navegación (solo escritorio) ===== */

/* Ocultar flechas en móvil/tablet */
@media (max-width: 989px) {
  #shopify-section-template--26862545666381__custom_swipe_products_areLCK .slider-buttons {
    display: none !important;
  }
}

/* Mostrar y estilizar flechas en escritorio */
@media (min-width: 990px) {

  /* Asegurar posición relativa en la sección */
  #shopify-section-template--26862545666381__custom_swipe_products_areLCK {
    position: relative !important;
  }

  /* Contenedor de flechas */
  #shopify-section-template--26862545666381__custom_swipe_products_areLCK .slider-buttons {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;

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

    padding: 0 14px !important;
    width: 100% !important;

    z-index: 5 !important;
    pointer-events: none !important;
    transition: opacity .18s ease !important;
    
    opacity: 0 !important;
  }

  /* Aparecer al hover */
  #shopify-section-template--26862545666381__custom_swipe_products_areLCK:hover .slider-buttons {
    opacity: 1 !important;
  }

  /* Estilo de los botones */
  #shopify-section-template--26862545666381__custom_swipe_products_areLCK .slider-button {
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;

    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.12) !important;

    box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;

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

    color: #111 !important;
    opacity: 1 !important;

    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* Tamaño del icono */
  #shopify-section-template--26862545666381__custom_swipe_products_areLCK .slider-button .icon {
    width: 16px !important;
    height: 16px !important;
  }

  /* Ocultar contador si existe */
  #shopify-section-template--26862545666381__custom_swipe_products_areLCK .slider-counter {
    display: none !important;
  }
}