/* ============================================================
   CRL PARTS · SLIDER DE DESTACADOS DEL HERO
   Snippet: CRL - Hero slider
   ------------------------------------------------------------
   El borde, los corner brackets y el fondo siguen viniendo de
   la columna .crl-hero-card. Esto solo estiliza el interior.
   Sin SVG ni caracteres prohibidos: apto para FluentSnippets.
   ============================================================ */

/* ---- 1. Contenedor ---- */
html body .crl-hs{
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .crl-hs-viewport{
  overflow: hidden !important;
  width: 100% !important;
}

html body .crl-hs-track{
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform !important;
}

html body .crl-hs-slide{
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ---- 2. Eyebrow: DESTACADO · CÓD 0176 ---- */
html body .crl-hs-eyebrow{
  color: #2688E4 !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}

/* ---- 3. Titulo del producto ---- */
html body .crl-hs-title{
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  min-height: 52px !important;
}

html body .crl-hs-title,
html body .crl-hs-title a{
  color: #FFFFFF !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

html body .crl-hs-title a:hover{
  color: #2688E4 !important;
}

/* ---- 4. Area de la imagen — mas grande que antes ---- */
html body .crl-hs-visual{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 320px !important;
  margin: 0 0 16px 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at 50% 50%,
              rgba(38,136,228,0.20), transparent 70%) !important;
  border: 1px dashed rgba(38,136,228,0.35) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

html body .crl-hs-visual img{
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 300px !important;
  object-fit: contain !important;
  border-radius: 3px !important;
  transition: transform 0.3s ease !important;
}

html body .crl-hs-visual:hover img{
  transform: scale(1.04) !important;
}

/* Si las fotos vienen con fondo blanco recortable, activar:
   html body .crl-hs-visual img{ mix-blend-mode: multiply !important; } */

/* ---- 5. Precio y estado ---- */
html body .crl-hs-meta{
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-top: auto !important;
}

html body .crl-hs-precio-wrap{
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

html body .crl-hs-precio-label{
  color: #94A3B8 !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}

html body .crl-hs-precio,
html body .crl-hs-precio .amount,
html body .crl-hs-precio .woocommerce-Price-amount,
html body .crl-hs-precio .woocommerce-Price-amount bdi{
  color: #FFFFFF !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}

html body .crl-hs-precio del,
html body .crl-hs-precio del .woocommerce-Price-amount{
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #64748B !important;
  margin-right: 8px !important;
}

html body .crl-hs-precio ins{
  text-decoration: none !important;
  background: transparent !important;
}

/* ---- 6. Badge de estado — una clase por estado ---- */
html body .crl-hs-badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body .crl-hs-badge--stock{
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid rgba(34, 197, 94, 0.40) !important;
  color: #4ADE80 !important;
}

html body .crl-hs-badge--pedido{
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.40) !important;
  color: #FBBF24 !important;
}

html body .crl-hs-badge--agotado{
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.40) !important;
  color: #F87171 !important;
}

/* ---- 7. Flechas de navegacion (chevron con bordes, sin SVG) ---- */
html body .crl-hs-nav{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  background: rgba(4, 22, 47, 0.75) !important;
  border: 1px solid rgba(38, 136, 228, 0.45) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease, background 0.25s ease,
              border-color 0.25s ease !important;
}

html body .crl-hs:hover .crl-hs-nav,
html body .crl-hs:focus-within .crl-hs-nav{
  opacity: 1 !important;
}

html body .crl-hs-nav:hover{
  background: #075DA7 !important;
  border-color: #2688E4 !important;
}

html body .crl-hs-nav::before{
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 9px !important;
  height: 9px !important;
  border-top: 2px solid #FFFFFF !important;
  border-right: 2px solid #FFFFFF !important;
}

html body .crl-hs-prev{
  left: -6px !important;
}

html body .crl-hs-prev::before{
  transform: translate(-35%, -50%) rotate(-135deg) !important;
}

html body .crl-hs-next{
  right: -6px !important;
}

html body .crl-hs-next::before{
  transform: translate(-65%, -50%) rotate(45deg) !important;
}

/* Siempre visibles en dispositivos sin puntero */
@media (hover: none){
  html body .crl-hs .crl-hs-nav{
    opacity: 1 !important;
  }
}

/* ---- 8. Indicadores ---- */
html body .crl-hs-dots{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin-top: 16px !important;
}

html body .crl-hs-dot{
  width: 7px !important;
  height: 7px !important;
  padding: 0 !important;
  background: rgba(148, 163, 184, 0.4) !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

html body .crl-hs-dot:hover{
  background: rgba(38, 136, 228, 0.7) !important;
}

html body .crl-hs-dot.is-activo{
  width: 22px !important;
  border-radius: 4px !important;
  background: #2688E4 !important;
}

/* ---- 9. Pantallas medianas ---- */
@media only screen and (max-width: 1200px) and (min-width: 801px){

  html body .crl-hs-visual{
    min-height: 250px !important;
  }

  html body .crl-hs-visual img{
    max-height: 230px !important;
  }

  html body .crl-hs-title,
  html body .crl-hs-title a{
    font-size: 17px !important;
  }

  html body .crl-hs-precio,
  html body .crl-hs-precio .woocommerce-Price-amount bdi{
    font-size: 23px !important;
  }
}

/* ---- 10. Movil ---- */
@media only screen and (max-width: 800px){

  html body .crl-hs-visual{
    min-height: 230px !important;
    padding: 12px !important;
  }

  html body .crl-hs-visual img{
    max-height: 210px !important;
  }

  html body .crl-hs-title{
    min-height: 0 !important;
  }

  html body .crl-hs-title,
  html body .crl-hs-title a{
    font-size: 16px !important;
  }

  html body .crl-hs-precio,
  html body .crl-hs-precio .woocommerce-Price-amount bdi{
    font-size: 22px !important;
  }

  html body .crl-hs-nav{
    width: 34px !important;
    height: 34px !important;
  }

  html body .crl-hs-prev{ left: 0 !important; }
  html body .crl-hs-next{ right: 0 !important; }
}