/** Shopify CDN: Minification failed

Line 558:0 Expected "}" to go with "{"

**/

.product-media__image {
  border-radius: 50% 45% 55% 45% / 50% 50% 50% 50%;
  transition: transform 0.5s ease, border-radius 3s ease;
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  animation: blobShape 12s infinite alternate;
}

@keyframes blobShape {
  0%   { border-radius: 50% 45% 55% 45% / 50% 50% 50% 50%; }
  25%  { border-radius: 45% 55% 50% 50% / 50% 50% 50% 50%; }
  50%  { border-radius: 55% 45% 50% 55% / 50% 50% 50% 50%; }
  75%  { border-radius: 50% 50% 55% 45% / 50% 50% 50% 50%; }
  100% { border-radius: 50% 45% 55% 45% / 50% 50% 50% 50%; }
}

.product-media__image:hover {
  transform: scale(1.08);
  border-radius: 45% 55% 45% 55% / 50% 50% 50% 50%;
}
/* Menú principal horizontal */
.header-menu-simple {
  display: flex;
  justify-content: center; /* Centrar el menú */
  background: #fff; /* Fondo blanco, luego lo podemos poner rosa pastel */
  padding: 10px 0;
}

.menu-list-simple {
  display: flex;
  list-style: none; /* Quitar los puntos */
  margin: 0;
  padding: 0;
  gap: 30px; /* Espacio entre opciones */
}

.menu-item-simple {}

.menu-link-simple {
  text-decoration: none;
  color: #d67898; /* Rosa pastel */
  font-weight: 500;
  font-size: 16px;
  transition: 0.3s ease;
}

.menu-link-simple:hover {
  color: #e06d8f; /* Rosa acento */
  transform: translateY(-2px);
}
/* Menú móvil */
.header-menu-mobile {
  display: none; /* Oculto en escritorio */
}

.mobile-menu-button {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: #d67898; /* Rosa pastel */
}

.mobile-menu {
  position: absolute;
  top: 60px; /* Ajusta según altura de header */
  left: 0;
  width: 100%;
  background: #ffdbe8; /* Rosa pastel claro */
  transition: max-height 0.3s ease;
  overflow: hidden;
}

.mobile-menu.hidden {
  max-height: 0;
}

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 10px 0;
}

.mobile-menu-list li {
  padding: 10px 20px;
}

.mobile-menu-link {
  text-decoration: none;
  color: #8b5f6f; /* Rosa más oscuro */
  font-weight: 500;
  display: block;
}

.mobile-menu-link:hover {
  color: #e06d8f;
}
/* Móvil */
.header-menu-mobile {
  display: none; /* Oculto en escritorio */
}

.mobile-menu-button {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: #d67898; /* Rosa pastel */
}

.mobile-menu {
  position: absolute;
  top: 60px; /* Ajusta según altura de header */
  left: 0;
  width: 100%;
  background: #ffdbe8; /* Rosa pastel claro */
  transition: max-height 0.3s ease;
  overflow: hidden;
}

.mobile-menu.hidden {
  max-height: 0;
}

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 10px 0;
}

.mobile-menu-list li {
  padding: 10px 20px;
}

.mobile-menu-link {
  text-decoration: none;
  color: #8b5f6f;
  font-weight: 500;
  display: block;
}

.mobile-menu-link:hover {
  color: #e06d8f;
}

/* Mostrar solo en móvil */
@media (max-width: 768px) {
  .header-menu-simple {
    display: none; /* Oculta menú de escritorio */
  }
  .header-menu-mobile {
    display: block;
  }
}
/* Logo central más grande */
.header-logo {
  display: flex;
  justify-content: center; /* Mantiene el logo centrado */
  align-items: center;
}

.header-logo img {
  max-height: 100px !important; /* Forzamos altura mayor */
  width: auto !important;        /* Mantiene proporción */
}
@media (max-width: 768px) {
  .header-logo img {
    max-height: 70px !important; /* Más pequeño en móvil */
  }
}
/* ---------- Desktop Dropdown ---------- */
.dropdown-simple { position: relative; }
.dropdown-menu-simple {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  padding: 0;
  margin: 0;
  list-style: none;
  min-width: 200px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;

  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.dropdown-simple:hover > .dropdown-menu-simple {
  max-height: 500px; /* suficiente para todos los items */
  opacity: 1;
}

.dropdown-link-simple {
  display: block;
  padding: 12px 16px;
  font-size: 15px;
  color: #333;
  text-decoration: none;
}
.dropdown-link-simple:hover { background: #f5f5f5; }

/* ---------- Mobile ---------- */
.hidden { display: none; }
.header-menu-mobile { position: relative; }
.mobile-menu { position: absolute; right: 0; top: 100%; background: white; padding: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); border-radius: 8px; z-index: 999; }
.mobile-menu-list { list-style: none; margin: 0; padding: 0; }
.mobile-menu-link { display: block; padding: 10px 12px; text-decoration: none; color: #333; }
.mobile-submenu { list-style: none; margin: 0; padding-left: 10px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.mobile-submenu-header { display: flex; align-items: center; justify-content: space-between; }
.mobile-submenu-toggle { background: transparent; border: none; font-size: 1.1em; padding: 6px; cursor: pointer; }
.mobile-has-submenu.open .mobile-submenu { max-height: 500px; }

.product-card {
  margin: 12px;
  text-align: center;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 260px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.product-card__image-wrapper {
  position: relative;
  width: 100%;
  height: 260px;
  border-radius: 10px;
  overflow: hidden;
  background: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-card__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease, opacity 0.45s ease;
}

.product-card__image-wrapper img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.product-card__image-wrapper:hover img:first-child {
  transform: scale(1.05);
}

.product-card__image-wrapper:hover img:nth-child(2) {
  opacity: 1;
}

.product-card__title {
  font-size: 0.98rem;
  margin: 8px 0 4px;
  font-weight: 500;
  color: #333;
}

.product-card__price {
  font-size: 0.92rem;
  color: #555;
  margin-bottom: 10px;
}

.product-card__price--compare-at {
  text-decoration: line-through;
  color: #999;
  margin-right: 5px;
}

/* Responsive */
@media (max-width: 1024px) {
  .product-card {
    max-width: 200px;
    margin: 10px;
  }
  .product-card__image-wrapper {
    height: 200px;
  }
}

@media (max-width: 768px) {
  .product-card {
    max-width: 150px;
    margin: 8px;
  }
  .product-card__image-wrapper {
    height: 150px;
  }
}

/* ===============================
   Tarjetas de producto cuadradas
   =============================== */

/* Contenedor de imagen de producto */
.product-card {
    border-radius: 12px; /* bordes suaves */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 280px; /* tamaño máximo de la tarjeta */
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Imagen del producto */
.product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* hace que la imagen llene el contenedor */
    border-radius: 0; /* elimina formas ovaladas */
    transition: transform 0.35s ease;
}

/* Hover sobre la tarjeta */
.product-card:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Contenido debajo de la imagen */
.product-card__content {
    padding: 12px;
    text-align: center;
}

/* Título y precio */
.product-card__title {
    font-weight: 600;
    margin-bottom: 6px;
}

.product-card__price {
    color: #000;
    font-weight: 500;
}

/* Responsive */
@media (min-width: 750px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 749px) {
    .product-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}
@media screen and (min-width: 990px) {
  .header__inline-menu ul {
    flex-wrap: wrap !important;
  }

  .header__inline-menu {
    overflow: visible !important;
  }

@keyframes fall {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(100vh) rotate(360deg); }
}
/* ===========================
   COLOR ROSA MENÚ PRINCIPAL
   Tema: Horizon (Shopify)
   =========================== */

/* Items del menú desktop */
.header__menu-item,
.header__menu-item span,
.header__menu-item a {
  color: #d67898 !important;
  font-weight: 500;
}

/* Hover */
.header__menu-item:hover,
.header__menu-item:hover span,
.header__menu-item:hover a {
  color: #e06d8f !important;
}

/* Item activo */
.header__active-menu-item,
.header__active-menu-item span,
.header__active-menu-item a {
  color: #e06d8f !important;
}

/* Flechas de submenú */
.header__menu-item svg {
  fill: #d67898 !important;
}

/* ===========================
   MENÚ MÓVIL
   =========================== */
.menu-drawer__menu-item,
.menu-drawer__menu-item a {
  color: #d67898 !important;
}

.menu-drawer__menu-item:hover,
.menu-drawer__menu-item a:hover {
  color: #e06d8f !important;
}
/* =====================================
   MENU DESKTOP – HORIZON (FORZADO ROSA)
   ===================================== */

/* Texto del menú */
.header__inline-menu a,
.header__inline-menu span,
.header__inline-menu li a {
  color: #d67898 !important;
  font-weight: 500;
}

/* Hover */
.header__inline-menu a:hover,
.header__inline-menu li:hover > a,
.header__inline-menu summary:hover span {
  color: #e06d8f !important;
}

/* Item activo */
.header__inline-menu .list-menu__item--active,
.header__inline-menu .list-menu__item--active a {
  color: #e06d8f !important;
}

/* Flecha dropdown */
.header__inline-menu svg {
  fill: #d67898 !important;
}
/* =====================================
   FORZAR COLOR MENÚ DESKTOP – HORIZON
   ===================================== */

/* Variable que usa Horizon para el texto del menú */
.header-wrapper,
.header {
  --color-foreground: 214, 120, 152 !important;
}

/* Hover */
.header__inline-menu li:hover,
.header__inline-menu li:hover a,
.header__inline-menu li:hover span {
  color: #e06d8f !important;
}

/* Item activo */
.header__menu-item--active,
.header__menu-item--active a {
  color: #e06d8f !important;
}
@media screen and (min-width: 990px) {
  .header__inline-menu * {
    color: #d67898 !important;
  }
}
/* =========================================
   HORIZON DESKTOP MENU – OVERRIDE REAL
   ========================================= */

@media screen and (min-width: 990px) {

  /* Fuerza variables SOLO en el header */
  .header-wrapper.color-background-1,
  .header-wrapper {
    --color-foreground: 214, 120, 152 !important;
  }

  /* Asegura que los links las usen */
  .header__inline-menu a,
  .header__inline-menu span {
    color: rgb(var(--color-foreground)) !important;
  }

  /* Hover */
  .header__inline-menu a:hover,
  .header__inline-menu span:hover {
    color: #e06d8f !important;
  }
}
/* Aumentar tamaño del logo - Tema Horizon */
.header__heading-logo,
.header__heading-logo img {
  max-width: 220px; /* prueba 200–260px */
  width: auto;
  height: auto;
}

/* Ajuste específico para móvil */
@media screen and (max-width: 768px) {
  .header__heading-logo,
  .header__heading-logo img {
    max-width: 170px;
  }
}
.header__heading {
  max-width: none !important;
}
/* FORZAR tamaño logo - Tema Horizon */
header .header__heading-logo img {
  max-width: 260px !important;
  width: 100% !important;
  height: auto !important;
}

/* Móvil */
@media screen and (max-width: 768px) {
  header .header__heading-logo img {
    max-width: 180px !important;
  }
}
.header__logo img {
  max-width: 500px !important;
}







