/* ===== RUFIKIDS - Variables ===== */
:root {
  --rk-coral: #F4845F;
  --rk-coral-light: #FEF0EB;
  --rk-coral-dark: #C45830;
  --rk-dark: #2C2C2A;
  --rk-mid: #5F5E5A;
  --rk-border: #e8e4dc;
  --rk-bg: #FFFAF8;
  --bs-header-bg: #ffffff !important;
}

/* ===== NAVBAR ===== */
#ss-header,
#ss-header.navbar,
nav#ss-header {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-bottom: 1.5px solid var(--rk-border) !important;
  box-shadow: none !important;
}

/* Fondo de la fila interna del header */
#ss-row-1,
#ss-header .header-row,
#ss-header .ss-desktop {
  background-color: #ffffff !important;
}

/* Links del menú - cambiar de blanco a gris oscuro */
#ss-header a,
#ss-header .nav-link {
  color: var(--rk-mid) !important;
}
#ss-header a:hover,
#ss-header .nav-link:hover {
  color: var(--rk-coral) !important;
}

/* Íconos del header (lupa, carrito, usuario) */
#ss-header .navbar-dark .navbar-nav .nav-link,
#ss-header svg,
#ss-header i {
  color: var(--rk-mid) !important;
  fill: var(--rk-mid) !important;
}

/* ===== BODY ===== */
body { background: var(--rk-bg) !important; }

/* ===== SECCIÓN DESTACADOS ===== */
[class*="section"] h2,
[class*="section"] h3 {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--rk-dark) !important;
  text-transform: none !important;
  letter-spacing: -0.3px !important;
}

/* ===== TARJETAS DE PRODUCTO ===== */
[class*="product"],
[class*="item-card"],
[class*="card"] {
  border-radius: 14px !important;
  border: 0.5px solid var(--rk-border) !important;
  overflow: hidden !important;
  background: #fff !important;
  transition: border-color 0.2s, transform 0.2s !important;
}
[class*="product"]:hover,
[class*="card"]:hover {
  border-color: var(--rk-coral) !important;
  /*transform: translateY(-2px) !important;*/
}

/* Precio */
[class*="price"],
[class*="amount"] {
  color: var(--rk-coral) !important;
  font-weight: 500 !important;
}

/* ===== BOTONES ===== */
[class*="btn"]:not(.navbar-toggler),
[class*="button"],
button[type="submit"] {
  background: var(--rk-coral) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
}
[class*="btn"]:hover {
  opacity: 0.85 !important;
  background: var(--rk-coral) !important;
}

/* ===== FOOTER ===== */
footer, [class*="footer"] {
  background: var(--rk-dark) !important;
  color: #888780 !important;
}
footer a, [class*="footer"] a {
  color: #D3D1C7 !important;
}
footer a:hover, [class*="footer"] a:hover {
  color: var(--rk-coral) !important;
}
/* ===== FORZAR NAVBAR BLANCO - máxima especificidad ===== */
html body header nav#ss-header,
html body header nav#ss-header.navbar,
html body header nav#ss-header.navbar-dark,
html body #ss-header,
html body #ss-header.navbar-dark {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

html body #ss-header .ss-desktop,
html body #ss-header #ss-row-1,
html body #ss-header .container-fluid,
html body #ss-header > div,
html body #ss-header > div > div {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Links visibles sobre fondo blanco */
html body #ss-header .nav-link,
html body #ss-header a {
  color: #5F5E5A !important;
}
html body #ss-header .nav-link:hover,
html body #ss-header a:hover {
  color: #F4845F !important;
}

/* Íconos */
html body #ss-header svg path,
html body #ss-header svg rect,
html body #ss-header i {
  fill: #5F5E5A !important;
  color: #5F5E5A !important;
}
/* Subtítulo hero más chico */
h1 ~ h1, h1 ~ h2, h1 ~ h3, h1 ~ h4, h1 ~ h5, h1 ~ h6 {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #888780 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}/* Fix modal-dialog bloqueado en mobile */
#modalFilterVariants .modal-dialog {
  pointer-events: all !important;
}

#modalFilterVariants .modal-dialog * {
  pointer-events: all !important;
  touch-action: manipulation !important;
}