/*
Theme Name: Hello Elementor Child - Love K-Beauty
Theme URI: https://lovekbeauty.com
Description: Tema hijo para Hello Elementor (Hola) con el sistema de diseño completo de Love-K-Beauty, soporte nativo de WooCommerce, tarjetas de producto personalizadas y maquetación de lujo para cosmética coreana.
Author: Love K-Beauty
Author URI: https://lovekbeauty.com
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
Requires PHP: 7.4
Requires at least: 5.9
WC requires at least: 6.0
WC tested up to: 9.0
*/

/* Los estilos principales se cargan de forma modular desde assets/css/ para máxima velocidad */

/* Garantías de diseño Love K-Beauty frente a resets de Hello Elementor */
.brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  height: 52px !important;
  max-height: 52px !important;
  max-width: 175px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.brand-logo-img {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
  display: block !important;
}

.brand-logo-footer .brand-logo-img {
  height: 52px !important;
  max-height: 52px !important;
  max-width: 180px !important;
}

/* Category Pill Buttons Reset */
button.cat-item,
.cat-item {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: center !important;
  min-width: 80px !important;
  color: var(--color-text, #292044) !important;
}

button.cat-item:focus,
button.cat-item:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.cat-icon-circle {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background-color: var(--color-lilac-subtle, #FAF6FC) !important;
  border: 1.5px solid var(--color-border, #E7DDF0) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-primary, #7650A3) !important;
  transition: all 0.15s ease !important;
}

.cat-item:hover .cat-icon-circle,
.cat-item.active .cat-icon-circle {
  background-color: var(--color-lilac, #F2EAF8) !important;
  border-color: var(--color-primary, #7650A3) !important;
  box-shadow: 0 4px 12px rgba(118, 80, 163, 0.15) !important;
}

/* Wishlist Button Float */
button.btn-wishlist-float,
.btn-wishlist-float {
  border: none !important;
  outline: none !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  cursor: pointer !important;
  color: var(--color-text-muted, #625B6D) !important;
  transition: all 0.2s ease !important;
}

.btn-wishlist-float svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  transition: all 0.2s ease !important;
}

.btn-wishlist-float:hover,
.btn-wishlist-float.is-active {
  background: #FFFFFF !important;
  color: #E63946 !important;
  transform: scale(1.1);
}

.btn-wishlist-float.is-active svg {
  fill: #E63946 !important;
}

.store-layout-grid {
  display: grid !important;
  grid-template-columns: 270px 1fr !important;
  gap: 36px !important;
  align-items: flex-start !important;
}

@media (max-width: 920px) {
  .store-layout-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Garantía de Diseño: Footer Newsletter Sin Líneas Negras
   ========================================================================== */
.footer-newsletter {
  background-color: var(--color-lilac, #F2EAF8) !important;
  border-top: 1px solid var(--color-border, #E7DDF0) !important;
  border-bottom: none !important;
}

.footer-newsletter .newsletter-form,
.newsletter-form {
  display: flex !important;
  gap: 8px !important;
  background: #FFFFFF !important;
  padding: 4px 6px 4px 18px !important;
  border-radius: var(--radius-full, 9999px) !important;
  border: 1.5px solid var(--color-border, #E7DDF0) !important;
  box-shadow: none !important;
  align-items: center !important;
}

.footer-newsletter .newsletter-input,
.footer-newsletter input[type="email"],
.newsletter-input,
.newsletter-form input,
input.newsletter-input {
  flex-grow: 1 !important;
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 8px 10px !important;
  font-size: 0.88rem !important;
  color: var(--color-text, #292044) !important;
  -webkit-appearance: none !important;
}

.footer-newsletter .newsletter-input:focus,
.newsletter-input:focus,
.newsletter-form input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.footer-sub {
  background-color: #FFFFFF !important;
  border-top: 1px solid var(--color-border, #E7DDF0) !important;
  border-bottom: none !important;
}