/** Shopify CDN: Minification failed

Line 475:0 Unexpected "}"

**/
/** Shopify CDN: Minification failed

Line 470:49 Unexpected "}"

**/
/* ============================================================
BIOVARDI UX IMPROVEMENTS v1.0
Mejoras de experiencia de usuario para móvil y escritorio
Bloques: 1.1, 1.2, 2.1, 2.2, 3.1
============================================================ */

/* ============================================================
BLOQUE 1.2 – TAP TARGETS MÍNIMOS (48x48px)
Aplica a filtros de colección, selectores de variante, etc.
============================================================ */
@media (max-width: 749px) {
  /* Filtros de colección */
  .facets__summary,
  .facets__label,
  .facet-filters__sort,
  .facets__header-label,
  .collection-filters-form button,
  .price-range__slider,
  form[data-filter] button {
    min-height: 48px;
    min-width: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Selectores de variante (tallas, colores, tamaños de envase) */
  .variant-input-wrap label,
  .variant-input,
  fieldset.variant-input-wrap > label,
  .product-form__input .form__label,
  .swatch-input > label,
  .color-swatch-input,
  .product-form__buttons button {
    min-height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
  }

  /* Separación mínima de 8px entre elementos interactivos */
  .facets__item + .facets__item,
  .swatch-input + .swatch-input,
  .variant-input-wrap + .variant-input-wrap {
    margin-top: 8px;
  }

  /* Botones generales en móvil */
  .button,
  button[type="submit"],
  .btn,
  a.button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
BLOQUE 2.1 – STICKY ADD-TO-CART (Botón flotante de compra)
Aparece fijo en la parte inferior del móvil cuando el
botón principal se oculta al hacer scroll
============================================================ */
@media (max-width: 749px) {
  #biovardi-sticky-atc {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #ffffff;
    padding: 12px 16px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    border-top: 1px solid #e5e5e5;
    display: none; /* controlado por JS */
    align-items: center;
    gap: 12px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  #biovardi-sticky-atc.is-visible {
    display: flex;
  }

  #biovardi-sticky-atc .sticky-atc__product-title {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1a1a1a;
  }

  #biovardi-sticky-atc .sticky-atc__price {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
  }

  #biovardi-sticky-atc .sticky-atc__btn {
    background: #1a1a1a;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    min-height: 48px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background 0.2s ease;
  }

  #biovardi-sticky-atc .sticky-atc__btn:hover {
    background: #333333;
  }

  /* Margen inferior al body para no tapar contenido */
  body.sticky-atc-active {
    padding-bottom: 80px;
  }
}

/* ============================================================
BLOQUE 2.2 – RESUMEN DE ESTRELLAS CERCA DEL TÍTULO
Rating summary visible junto al precio/título del producto
============================================================ */
#biovardi-rating-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 12px;
  cursor: pointer;
  text-decoration: none;
}

#biovardi-rating-summary .rating-stars {
  color: #f5a623;
  font-size: 16px;
  letter-spacing: 1px;
}

#biovardi-rating-summary .rating-score {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
}

#biovardi-rating-summary .rating-count {
  font-size: 13px;
  color: #666;
}

#biovardi-rating-summary .rating-count:hover {
  text-decoration: underline;
}

/* ============================================================
BLOQUE 3.1 – BARRA DE PROGRESO ENVÍO GRATIS EN MINI-CART
============================================================ */
#biovardi-shipping-progress {
  background: #f8f8f8;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 12px;
  font-size: 13px;
}

#biovardi-shipping-progress .shipping-progress__message {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 500;
  color: #1a1a1a;
}

#biovardi-shipping-progress .shipping-progress__message .icon {
  font-size: 16px;
}

#biovardi-shipping-progress .shipping-progress__bar-track {
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}

#biovardi-shipping-progress .shipping-progress__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #66bb6a);
  border-radius: 3px;
  transition: width 0.5s ease;
}

#biovardi-shipping-progress .shipping-progress__bar-fill.is-complete {
  background: linear-gradient(90deg, #4caf50, #2e7d32);
}

/* Iconos de política de envío y devoluciones */
#biovardi-cart-policies {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 12px;
  background: #f8f8f8;
  border-radius: 8px;
}

#biovardi-cart-policies .policy-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #444;
}

#biovardi-cart-policies .policy-item .policy-icon {
  font-size: 16px;
}

/* ============================================================
BLOQUE 1.1 – CATEGORÍAS VISUALES EN MENÚ MÓVIL
Estilos para las categorías por Necesidad/Tipo de Producto
============================================================ */
@media (max-width: 749px) {
  /* Sección de necesidades en el menú hamburguesa */
  .mobile-nav__needs-section {
    padding: 16px;
    border-bottom: 1px solid #e5e5e5;
  }

  .mobile-nav__section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 12px;
  }

  .mobile-nav__need-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .mobile-nav__need-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f8f8f8;
    border-radius: 8px;
    text-decoration: none;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 500;
    min-height: 48px;
    transition: background 0.2s ease;
  }

  .mobile-nav__need-item:hover,
  .mobile-nav__need-item:active {
    background: #f0f0f0;
  }

  .mobile-nav__need-item .need-icon {
    font-size: 18px;
    flex-shrink: 0;
  }
}


/* ================================================
PERFORMANCE FIX: Composited animations only
Replaces non-composited CSS properties with
transform/opacity to improve CLS & rendering
================================================ */

/* Fix 1: Hotspot pulse animation - replace box-shadow with transform+opacity */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 0.4; }
  100% { transform: scale(1.8); opacity: 0; }
}

.hotspot__btn::before {
  animation: pulse 2s ease-out infinite;
  will-change: transform, opacity;
}

/* Fix 2: Hotspot card visibility - replace visibility with opacity */
.hotspot__card {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  will-change: opacity, transform;
}

.hotspot:hover .hotspot__card,
.hotspot__card[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

/* Fix 3: Text-decoration-color links - use color transition instead */
a.link {
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* Fix 4: Custom select button border-color - use outline instead */
.custom-select__btn {
  transition: background-color 0.2s ease, color 0.2s ease, outline 0.2s ease;
  outline: 2px solid transparent;
}

.custom-select__btn:focus,
.custom-select__btn[aria-expanded="true"] {
  outline-color: currentColor;
}

/* Fix 5: Force GPU compositing for animated elements */
.hotspot__btn,
.hotspot__card,
.custom-select__btn {
  will-change: transform;
  transform: translateZ(0);
}


/* ============================================================
WEBREX UPSELL - COLORES BIOVARDI
Adapta el widget de Webrex a los colores de marca de Biovardi
Color botones: #90D3AA (verde sage - mismo que "Añadir al carrito")
Texto botones: #333333
Accents/título: #5a8a6e (verde más oscuro)
============================================================ */

/* Título "You Might Also Like" */
.ws_upper_title {
  color: #5a8a6e !important;
}

/* Subtítulo "Add more to your order" */
.ws_upper_subtitle {
  color: #767474 !important;
}

/* Precio con descuento */
.ws_discounted_price {
  color: #5a8a6e !important;
}

/* Precio original (tachado) */
.ws_original_price {
  color: rgba(90, 138, 110, 0.6) !important;
}

/* Botón "Add" principal */
.ws_add_individual_btn {
  background-color: #90D3AA !important;
  color: #333333 !important;
  border-color: #90D3AA !important;
}

.ws_add_individual_btn:hover {
  background-color: #7bc49a !important;
  border-color: #7bc49a !important;
}

/* Botones de cantidad (+/-) */
.ws_qty_minus,
.ws_qty_plus {
  color: #90D3AA !important;
  border-color: #90D3AA !important;
}

/* Stepper de cantidad */
.ws_quantity_stepper {
  color: #90D3AA !important;
  border-color: #e5e7eb !important;
}

/* Badge descuento */
.ws_discount_badge {
  color: #5a8a6e !important;
}

/* === CLS: Animaciones GPU-compuestas === */
.btn {
  transition: opacity 0.6s ease, color 0.6s ease;
}
.secondary-nav__item.secondary-nav__cta--button {
  transition: opacity 0.3s ease;
}

/* ============================================================
BLOQUE HEADER – Fix alineación de iconos (usuario/carrito)
Evita que header__icons quede en fila separada en escritorio
============================================================ */
@media (min-width: 769px) {
  .header__grid {

    align-items: center;
  }
  .header__search {
    flex: 1 1 auto;
  }
  .header__icons {
    flex: 0 0 auto !important;
    flex-basis: auto;
  }
}
@media (min-width: 769px) { .header__search { flex: 1 1 auto !important; } }

/* Fix imagen producto: el contenedor .media--zoom desplaza img con position:absolute */
.media--zoom .img-fit,
.media--zoom img.product-image {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transform: none !important;
}

/* Fix imagen: forzar stacking context en sticky-scroll para renderizar la imagen en el fold inicial */
.sticky-scroll {
  contain: style layout;
}

/* ============================================================
HOVER BOTONES - Efecto fill deslizante estilo theCosmethics
============================================================ */

@media (pointer: fine) {
  .button:not([disabled]) {
    background-image:
    linear-gradient(#1c1c1c, #1c1c1c),
    linear-gradient(transparent, transparent);
    background-color: transparent;
    background-size: 101% 101%, 0% 101%;
    background-position: right center, left center;
    background-repeat: no-repeat;
    transition:
    background-size 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    background-position 0.45s steps(1),
    color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    border-color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86) !important;
  }

  .button:not([disabled]):hover {
    background-size: 0% 101%, 101% 101%;
    background-position: right center, left center;
    color: #1c1c1c !important;
    border-color: #1c1c1c !important;
  }
}
}


/* ============================================================
BLOQUE FILTROS BÚSQUEDA – Sidebar togglable en desktop
El panel de filtros se oculta por defecto y solo se muestra
al pulsar el botón "Filtro". En móvil el comportamiento
de drawer lateral original se mantiene intacto.
============================================================ */

@media (min-width: 1024px) {

  /* Ocultar el contenedor del sidebar por defecto */
  .main-products-grid__filters {
    display: none;
    overflow: hidden;
    transition: width 0.3s ease;
  }

  /* Mostrar el sidebar cuando el drawer está abierto */
  .main-products-grid__filters:has(#facet-filters[open]) {
    display: block;
  }

  /* Limitar el ancho máximo del panel en desktop */
  .facets.drawer {
    max-width: 280px !important;
    width: 280px !important;
  }

}

/* Fix: Excluir botones de navegacion del slider del efecto hover fill */
@media (pointer: fine) {
  .slider-nav__btn:not([disabled]) {
    overflow: visible !important;
    border: none !important;
  }
  .slider-nav__btn:not([disabled])::before {
    display: none !important;
  }
}

/* ============================================================
Boton "Publicar comentario" - negro con letras blancas + hover animado
Default: ::before oscuro cubre el boton (efecto negro)
Hover: ::before se desliza fuera -> fondo blanco + letras negras
============================================================ */

#comment_form .btn--secondary,
.add-comment-form .btn--secondary {
  color: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

#comment_form .btn--secondary:hover,
#comment_form .btn--secondary:focus,
.add-comment-form .btn--secondary:hover,
.add-comment-form .btn--secondary:focus {
  color: #000000 !important;
}


/* Fix: .rte ol li overrides padding-left from main.css */
.bv-steps li {
  padding-inline-start: 48px !important;
  padding-left: 48px !important;
}

/* =============================================================
JUDGE.ME - Ocultar widgets sin reseñas (1B)
Oculta el widget de reseñas y la medalla cuando el producto
tiene 0 reseñas, evitando prueba social negativa.
============================================================= */

/* Ocultar el Review Widget cuando no hay reseñas */
.jdgm-widget.jdgm--no-reviews {
  display: none !important;
}

/* Ocultar el Preview Badge (estrellitas junto al titulo) cuando no hay reseñas */
.jdgm-prev-badge[data-average-rating="0"] {
  display: none !important;
}

/* Ocultar enlace de accesibilidad "Ir al contenido" (skip-link) */
.skip-link {
  display: none !important;
}

/* =============================================================
CLS FIX 2.1 — Reducir Cumulative Layout Shift (CLS 0.205)
============================================================= */

/* ---------------------------------------------------------------
FIX 1: Background Video — Estabilizar altura con svh en lugar de vh
El uso de 'vh' en móvil causa CLS cuando la barra de URL del
navegador se colapsa/expande durante el scroll.
Sobreescribimos con 'svh' (small viewport height) que es estable.
--------------------------------------------------------------- */
#template--28022970024269__background_video_KNW7Fy .video-section::after {
  padding-top: 60svh !important;
}
@media (min-width: 768px) {
  #template--28022970024269__background_video_KNW7Fy .video-section::after {
    padding-top: 80svh !important;
  }
}

/* ---------------------------------------------------------------
FIX 2: Imágenes sin dimensiones explícitas — reservar espacio
Las imágenes de la sección category-menu tienen inline width/height
en el contenedor pero no en el <img>. Añadir aspect-ratio evita CLS.
--------------------------------------------------------------- */
.bv-cat-circle {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.bv-cat-circle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------
FIX 3: Imágenes lazy-load sin dimensiones en secciones de colecciones
Prevenir que imágenes lazy expandan su contenedor al cargar.
--------------------------------------------------------------- */
.collection-card__image-wrapper img,
.collection-card img {
  aspect-ratio: 1 / 1;
}

/* ---------------------------------------------------------------
FIX 4: Prevenir CLS por fuentes web (font-swap flash)
Definir tamaños de fallback de fuentes para reducir el cambio
de layout cuando carga Cormorant / Raleway.
--------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant-fallback';
  src: local('Georgia');
  size-adjust: 102%;
  ascent-override: 90%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------
FIX 5: Slideshow — Asegurar que el slideshow tenga altura
mínima para evitar colapso antes de que carguen los slides.
--------------------------------------------------------------- */
.slideshow {
  min-height: 400px;
}

@media (max-width: 767px) {
  .slideshow {
    min-height: 250px;
  }
}


/* ---------------------------------------------------------------
FIX 1b: Background Video — Selector genérico (cubre todas las
instancias de la sección background-video, independiente del ID)
--------------------------------------------------------------- */
[id*="background_video"] .video-section::after {
  padding-top: 60svh !important;
}
@media (min-width: 768px) {
  [id*="background_video"] .video-section::after {
    padding-top: 80svh !important;
  }
}