/* Custom glass button styles */

.btn-glass-gold {
  background: rgba(212, 175, 55, 0.65); /* #d4af37 with lighter opacity */
  color: #886364; /* Mauve from footer */
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  border-right: 1px solid rgba(212, 175, 55, 0.3);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  border-left: none; /* Eliminar borde izquierdo para evitar doble borde */
  backdrop-filter: blur(8px); /* More blur */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  font-family: 'Plus Jakarta Sans', sans-serif; /* Match footer font */
  font-weight: 600; /* semibold */
}
.btn-glass-gold svg {
  fill: none;
  stroke: #886364;
}
.btn-glass-gold:hover {
  background: rgba(212, 175, 55, 0.75);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-glass-heart {
  width: 2.5rem; /* 40px */
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 228, 239, 0.25); /* Lighter pink glass */
  color: #886364;
  border: 1px solid rgba(136, 99, 100, 0.25);
  backdrop-filter: blur(8px); /* More blur */
  transition: all 0.2s ease;
  border-radius: 0.75rem; /* rounded-xl */
}
@media (min-width: 640px) {
  .btn-glass-heart:hover {
    background: rgba(212, 175, 55, 0.75); /* Gold on hover */
    color: #fff; /* White icon on hover */
    border-color: rgba(212, 175, 55, 0.4);
  }
}

/* Header móvil sticky con efecto glassmorphism */
.sticky-menu {
  position: sticky;
  top: 56px; /* Altura del header principal */
  z-index: 40;
  backdrop-filter: blur(22px) saturate(180%) contrast(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(180%) contrast(1.1);
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 4px 32px 0 rgba(136, 99, 100, 0.13);
}

/* Mobile bottom navigation glass */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3.5rem; /* 56px */
  display: flex;
  align-items: center;
  justify-content: space-around;
  backdrop-filter: blur(22px) saturate(180%) contrast(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(180%) contrast(1.1);
  background: rgba(255, 255, 255, 0.26);
  border-bottom: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 1.25rem;
  box-shadow: 0 4px 32px 0 rgba(136, 99, 100, 0.13), 0 1.5px 8px 0 rgba(255,255,255,0.08) inset;
  transition: background 0.35s cubic-bezier(0.4,0,0.2,1),backdrop-filter 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}

.mobile-bottom-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  filter: blur(4px) contrast(1.15) saturate(120%) opacity(0.85);
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: lighten;
  transition: filter 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* --- Mobile bottom nav anchor layout --- */
.mobile-bottom-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0%;
  color: #886364;
  transition: color 0.2s ease;
}

.mobile-bottom-nav a:hover {
  color: #d4af37;
}

/* padding-bottom helper when bottom nav is present */
body.has-mobile-bottom-nav {
  padding-bottom: 3.75rem; /* Give space so content isn’t hidden */
}

/* Enhanced mobile glass header - iPhone 26 liquid style */
.glass-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 0 0.5px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease-out;
  z-index: 1000;
}

/* Fallback for non-supporting browsers */
@supports not ((-webkit-backdrop-filter: blur(25px)) or (backdrop-filter: blur(25px))) {
  .glass-header {
    background: rgba(255, 255, 255, 0.85);
  }
}

/* Scrolled state for better visibility */
.glass-header.scrolled {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Performance: Reduce blur on low-power devices */
@media (prefers-reduced-motion: reduce) {
  .glass-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.85);
  }
}

/* Mobile-specific enhancements */
@media (max-width: 767px) {
  .header-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    padding-top: env(safe-area-inset-top);
  }
  
  body {
    padding-top: calc(56px + env(safe-area-inset-top));
  }
  
  .glass-header {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
  }
  
  .glass-header.scrolled {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  }
  
  /* Optional: Pill-shaped floating elements */
  .header-pill {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 9999px;
    backdrop-filter: blur(10px);
  }

  .mobile-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .top-icons-hide-mobile {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .mobile-bottom-nav {
    display: none;
  }
}

/* --- Unificar icono de búsqueda (y resto) --- */
.btn-glass-gold svg * {
  fill: none !important;
  stroke: #886364 !important;
}

/* --- Estilo para miniaturas de color/imagen --- */
.color-swatch {
  background-size: cover;
  background-position: center;
}

/* Ajustar posición del botón CookieYes en mobile para que no
   cubra la barra de navegación inferior */
body.has-mobile-bottom-nav #cookieyes,
body.has-mobile-bottom-nav .cky-btn,
body.has-mobile-bottom-nav .cky-preferences-btn {
  bottom: 4.5rem !important;
  z-index: 1100 !important;
}