/** Shopify CDN: Minification failed

Line 360:0 Unexpected "}"

**/
/* ===========================================
   koivos — Mobile Optimizations
   Versión 1.0 · 2026-08-15

   INSTALACIÓN:
   Shopify Admin → Tienda online → Temas → Horizon → ... → Editar código
   → assets/ → Añadir nuevo archivo → Nombre: koivos-mobile.css → pegar aquí
   → theme.liquid: añadir la línea debajo del tag de koivos-custom.css:
     {{ 'koivos-mobile.css' | asset_url | stylesheet_tag }}
   =========================================== */


/* =====================================================
   0. STICKY ATC — Ocultar la nativa del tema Horizon
      (usamos kvo-sticky-bar en su lugar)
   ===================================================== */

sticky-add-to-cart {
  display: none !important;
}


/* =====================================================
   1. HERO — CTA full-width + degradado mejorado
   ===================================================== */

@media (max-width: 749px) {

  /* CTA ocupa todo el ancho → más fácil de tocar */
  .kvo-hero__btn {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 17px 20px;
    font-size: 1rem;
  }

  /* Degradado de abajo hacia arriba en móvil:
     asegura contraste con la imagen en todas las posiciones de scroll */
  .kvo-hero::before {
    background: linear-gradient(
      to top,
      rgba(8, 18, 45, 0.90) 0%,
      rgba(8, 18, 45, 0.65) 55%,
      rgba(8, 18, 45, 0.30) 100%
    ) !important;
  }

  /* Contenido ocupa todo el ancho disponible */
  .kvo-hero__content {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Subtítulo sin max-width fija en móvil */
  .kvo-hero__subtitle {
    max-width: 100%;
    font-size: 0.95rem;
  }

  /* Proof text un poco más compacto */
  .kvo-hero__proof {
    font-size: 0.80rem;
    margin-top: 14px;
  }
}


/* =====================================================
   2. BARRA DE PRUEBA SOCIAL — Layout 2×2 en pantallas pequeñas
   ===================================================== */

@media (max-width: 500px) {
  .kvo-proof__inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px 12px;
  }

  .kvo-proof__stat {
    border-right: none !important;
    padding: 5px 8px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    text-align: center !important;
    /* Separadores en grid */
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }

  .kvo-proof__stat:nth-child(n+3) {
    border-bottom: none;
  }

  .kvo-proof__num {
    font-size: 14px !important;
  }

  .kvo-proof__label {
    font-size: 10px !important;
    line-height: 1.3;
  }
}


/* =====================================================
   3. SECCIÓN DE BENEFICIOS — 1 columna en pantallas muy pequeñas
   ===================================================== */

@media (max-width: 380px) {
  .koivos-benefits-inner {
    grid-template-columns: 1fr !important;
    gap: 22px;
  }

  .koivos-benefits {
    padding: 36px 20px;
  }
}

/* Mejorar legibilidad en 2 columnas (380–640px) */
@media (max-width: 640px) {
  .koivos-benefit h3 {
    font-size: 14px;
  }

  .koivos-benefit p {
    font-size: 12px;
  }

  .koivos-benefit svg {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
  }
}


/* =====================================================
   4. PRODUCTO DESTACADO — CTA full-width + mejoras
   ===================================================== */

@media (max-width: 767px) {

  /* CTA full-width */
  .kvo-feat__btn {
    display: block !important;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 16px 20px;
    font-size: 1rem;
  }

  /* Precio un poco más compacto */
  .kvo-feat__price {
    font-size: 28px;
  }

  /* Trust badges en fila compacta */
  .kvo-feat__trust {
    gap: 10px;
    font-size: 12px;
    flex-wrap: wrap;
  }

  /* Badge superior compacto */
  .kvo-feat__badge {
    font-size: 9px;
    padding: 4px 10px;
    margin-bottom: 14px;
  }
}


/* =====================================================
   5. STICKY ATC — Versión móvil (simple: precio + botón)
   ===================================================== */

@media (max-width: 767px) {

  /* Mostrar en móvil (el JS ya no lo bloquea — ver product-enhancements.liquid v2.0) */
  .kvo-sticky-bar {
    display: flex !important;
    padding: 10px 16px 10px 16px;
    /* Safe area para iPhone con home indicator */
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .kvo-sticky-bar__inner {
    flex-direction: row;
    gap: 12px;
    align-items: center;
    width: 100%;
  }

  /* Columna izquierda: estrellas + precio */
  .kvo-sticky-bar__meta {
    flex: 1;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    min-width: 0;
  }

  .kvo-sticky-bar__stars {
    font-size: 11px;
    letter-spacing: 1px;
  }

  .kvo-sticky-bar__title {
    font-size: 12px;
    display: none; /* Ocultar título para ahorrar espacio en móvil */
  }

  .kvo-sticky-bar__price {
    font-size: 18px;
    font-weight: 800;
  }

  /* Ocultar trust text — sin espacio en móvil */
  .kvo-sticky-bar__trust {
    display: none !important;
  }

  /* Botón ocupa espacio fijo */
  .kvo-sticky-bar__right {
    flex-shrink: 0;
  }

  .kvo-sticky-bar__btn {
    padding: 13px 20px;
    font-size: 15px;
    border-radius: 8px;
    white-space: nowrap;
  }
}


/* =====================================================
   6. BARRA DE URGENCIA (Página producto) — Compacta en móvil
   ===================================================== */

@media (max-width: 480px) {
  .kvo-urgency {
    font-size: 12px;
    padding: 8px 10px;
    gap: 6px;
    line-height: 1.5;
  }

  .kvo-urgency__dot {
    width: 7px;
    height: 7px;
    min-width: 7px;
  }
}


/* =====================================================
   7. PACK SELECTOR — Badges no cortados en móvil
   ===================================================== */

@media (max-width: 480px) {
  /* El badge centrado (106px) desborda la card (~100px) en el borde derecho.
     Reducimos tamaño para que quepa. */
  .kvo-badge {
    font-size: 7.5px !important;
    padding: 2px 5px !important;
    letter-spacing: 0.2px !important;
  }
}


/* =====================================================
   8. SECCIÓN DE VÍDEOS — Padding reducido en móvil
   ===================================================== */

@media (max-width: 767px) {
  .koivos-pv {
    padding: 32px 0;
  }

  .koivos-pv__inner {
    padding: 0 16px;
  }

  .koivos-pv__header {
    margin-bottom: 20px;
  }

  .koivos-pv__grid {
    gap: 14px;
  }

  .koivos-pv__title {
    font-size: 1.3rem;
  }
}


/* =====================================================
   9. TAP TARGETS — Mínimo 44px para botones principales (iOS HIG)
   ===================================================== */

@media (max-width: 767px) {
  .kvo-hero__btn,
  .kvo-feat__btn,
  .kvo-sticky-bar__btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Solo para los overrides — el display:block del hero CTA tiene prioridad */
  .kvo-hero__btn,
  .kvo-feat__btn {
    display: block;
    line-height: 1.4;
  }
}


/* =====================================================
   10. FOOTER — Iconos de pago en móvil
   ===================================================== */

/* =====================================================
   HEADER MÓVIL — Hamburger nativo de Horizon oculto
   Horizon muestra su propio <header-drawer> (≡) en móvil.
   Lo ocultamos para dejar solo el nuestro (#koivos-hamburger).
   Breakpoint 749px = mismo que usa Horizon para mostrar/ocultar
   su hamburger nativo.
   ===================================================== */

@media (max-width: 749px) {
  /* Ocultar el div que envuelve el hamburger nativo de Horizon */
  .header__drawer {
    display: none !important;
  }
}

/* =====================================================

@media (max-width: 480px) {
  /* Si el tema muestra iconos de pago en el footer */
  .footer__payment-icons .payment-icon,
  .footer .payment-icon {
    height: 20px;
  }
}


/* =====================================================
   11. SECCIONES HOME — Padding y espaciado en móvil
       Bug B: .kvo-section { padding: 80px } → excesivo
       Las 5 secciones home (why, testimonials, faq,
       garantia, cta) tienen 80px top+bottom. En móvil
       se reduce a 44px para que el scroll no sea eterno.
   ===================================================== */

@media (max-width: 767px) {
  /* Padding compartido: 80px → 44px */
  .kvo-section {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  /* Garantía tiene su propio padding (72px) — override */
  .kvo-garantia {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Reducir margin-bottom de cabeceras de sección */
  .kvo-why__header,
  .kvo-testimonials__header,
  .kvo-faq__header {
    margin-bottom: 28px;
  }
}


/* =====================================================
   12. CTA FINAL — Botón full-width en móvil
       Bug C: .kvo-cta__btn { display: inline-block }
       El botón de cierre tiene padding lateral fijo de 52px
       y no ocupa todo el ancho. En móvil debe ser full-width
       como el resto de CTAs de la tienda.
   ===================================================== */

@media (max-width: 767px) {
  .kvo-cta__btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 18px 20px;
  }
}


/* =====================================================
   13. HEADER — FIX #1: Badge del carrito cortado en móvil
       El botón del carrito tiene overflow:hidden → corta el badge.
       El header no tiene padding derecho → el badge llega al borde.
   ===================================================== */

@media (max-width: 749px) {
  /* Dar espacio en el borde derecho del header */
  .header__column--right {
    padding-right: 12px !important;
    box-sizing: border-box;
  }
  /* Permitir que el badge se muestre fuera del clip del botón */
  button[aria-label="Carrito"],
  cart-icon {
    overflow: visible !important;
  }
  /* Badge: bien centrado dentro del círculo */
  .cart-bubble {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
  }
}


/* =====================================================
   13b. HEADER — Corazón de wishlist (Vitals/Wishlist by Square)
        El corazón lo gestiona Vitals. El slot #kv-wishlist-slot
        está en header-actions y es visible en móvil y desktop.
        No se necesita CSS adicional — Vitals inyecta el botón
        directamente cuando hay artículos en la wishlist.
   ===================================================== */


/* =====================================================
   13c. MÓVIL — FIX: Widget flotante (Klaviyo/Inbox) sobre sticky bar
        El widget flotante de descuento aparece en la esquina inferior
        izquierda y tapa las estrellas del sticky ATC bar.
        Lo subimos 80px para que no solape.
   ===================================================== */

@media (max-width: 767px) {
  /* Klaviyo on-site messaging teaser */
  .klaviyo-form-teaser,
  [data-klaviyo-teaserform],
  .kl-teaser,
  .kl-teaser-overlay,
  /* Shopify Inbox chat button */
  #shopify-chat,
  .shopify-chat-button,
  shopify-chat {
    bottom: 80px !important;
  }
}


/* =====================================================
   14. BARRA DE STATS — Más compacta en móvil
   ===================================================== */

@media (max-width: 500px) {
  .kvo-proof__inner {
    gap: 2px !important;
    padding: 5px 8px !important;
  }
  .kvo-proof__stat {
    padding: 3px 6px !important;
    gap: 1px !important;
  }
  .kvo-proof__num {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  .kvo-proof__label {
    font-size: 8px !important;
    line-height: 1.1 !important;
  }
}


/* =====================================================
   15. BENEFICIOS — Compactos en móvil (mitad de tamaño)
       padding: 48px → 14px, iconos y texto reducidos
   ===================================================== */

@media (max-width: 767px) {
  .koivos-benefits {
    padding: 14px 20px !important;
  }
  .koivos-benefits-inner {
    gap: 12px !important;
  }
  .koivos-benefit svg {
    width: 22px !important;
    height: 22px !important;
    margin-bottom: 6px !important;
  }
  .koivos-benefit h3 {
    font-size: 12px !important;
    margin-bottom: 3px !important;
    line-height: 1.2 !important;
  }
  .koivos-benefit p {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
}


/* =====================================================
   16. HEADER — FIX #4: Lupa a la derecha en móvil
       Horizon muestra la lupa en la columna izquierda
       en móvil. La ocultamos ahí y mostramos la de
       la columna derecha (que Horizon oculta en móvil).
   ===================================================== */

/* =====================================================
   17. BARRA DE ANUNCIOS — Más compacta en móvil
       Desktop: padding 15px → móvil: 7px
       Desktop: font-size 14px → móvil: 11px
   ===================================================== */

@media (max-width: 749px) {
  aside.announcement-bar {
    padding: 7px 0 !important;
  }
  .announcement-bar__text,
  .koivos-marquee-item .announcement-bar__text,
  .koivos-marquee-item,
  .koivos-marquee-track,
  aside.announcement-bar p,
  aside.announcement-bar span {
    font-size: 9px !important;
    line-height: 1.3 !important;
  }
  .koivos-marquee-item {
    padding: 0 24px !important;
  }
}


/* =====================================================
   18. PÁGINA DE PRODUCTO — Optimización móvil completa
   =====================================================
   Diagnóstico:
   · H1 a 32px → 2 líneas innecesarias → reducir a 22px
   · .product-information { gap: 48px } → excesivo → 20px
   · .kvo-pack-card padding 16px → reducir a 10px
   · .kvo-payment-icon 38×24px → reducir a 28×18px
   Referencia: Glossier / Gymshark / ASOS mobile PDP
   ===================================================== */

@media (max-width: 749px) {

  /* 1. Título: 32px → 22px. Ahorra una línea completa */
  .product-information h1 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }

  /* 2. GAP entre secciones: 48px → 20px. Mayor impacto visual */
  .product-information {
    row-gap: 20px !important;
    gap: 20px 0 !important;
  }

  /* 3. Pack cards: padding más ajustado, precio ligeramente más pequeño */
  .kvo-pack-card {
    padding: 10px 10px 8px !important;
  }
  .kvo-card__price {
    font-size: 19px !important;
    margin-bottom: 2px !important;
  }
  .kvo-card__name {
    margin-bottom: 4px !important;
  }
  .kvo-card__compare,
  .kvo-card__unit {
    font-size: 10px !important;
  }
  .kvo-pack-grid {
    gap: 7px !important;
  }
  .kvo-pack-label {
    margin-bottom: 8px !important;
  }

  /* 4. Iconos de pago: de 38×24px a 28×18px — caben en 1 fila */
  .kvo-payment-icon {
    width: 28px !important;
    height: 18px !important;
  }
  .kvo-payment-icons__row {
    gap: 4px !important;
    flex-wrap: wrap !important;
  }
  .kvo-payment-icons__label {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  /* 5. Barra de urgencia más compacta */
  .kvo-urgency {
    font-size: 12px !important;
    padding: 7px 10px !important;
  }

  /* 6. CARRUSEL: galería móvil de stack vertical → horizontal swipeable */
  .kvo-gal-mobile {
    flex-direction: row !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
    scrollbar-width: none !important;
    width: 100% !important;
  }
  .kvo-gal-mobile::-webkit-scrollbar {
    display: none !important;
  }
  .kvo-gal-mobile__item {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    scroll-snap-align: start !important;
  }

  /* Dots del carrusel (inyectados por JS) */
  .kv-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 8px 0 2px;
  }
  .kv-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .kv-carousel-dot.active {
    background: #1E3A8A;
    width: 16px;
    border-radius: 3px;
  }

}


/* FIX #3b: Logo clonado — ID tiene más especificidad que .header-logo
   para evitar que Horizon le aplique position:absolute */
#kv-logo-clone {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* FIX #4: Lupa movida a header-actions vía JS — asegurar que el carrito
   siga visible con 4 iconos en la derecha */
@media (max-width: 749px) {
  header-actions {
    flex-shrink: 0 !important;
    overflow: visible !important;
  }
  cart-icon,
  button[aria-label="Carrito"] {
    overflow: visible !important;
  }
}