/* ---------- 4. Encabezado ---------- */
.site-header, #masthead {
  background: #000;
  border-bottom: 1px solid #1b1f24;
}
.site-header a, #masthead a { color: #fff; }

.site-branding a,
.site-branding .site-title,
.site-branding .site-title a,
#masthead .site-branding a,
.site-header .site-title {
  color: #fff !important;
  font-family: "Marcellus", Georgia, serif;
  letter-spacing: .02em;
}

.header-navigation .menu > li > a {
  color: #fff;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
}
.header-navigation .menu > li > a:hover { color: var(--dx-cyan); }

/* Ícono del menú móvil visible sobre fondo negro */
.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon {
  color: #fff;
}


/* ---------- 13b. Cabecera: Inicio + carrito integrados al menú ---------- */
.dx-header-actions-item {
  list-style: none;
  display: flex !important;
  align-items: center;
}
.dx-header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid #ffffff2a;
}
.dx-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.dx-home-btn:hover { color: var(--dx-cyan) !important; }
.dx-home-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.dx-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  text-decoration: none;
}
.dx-cart-btn:hover { color: var(--dx-cyan) !important; }
.dx-cart-btn svg { width: 21px; height: 21px; }
.dx-cart-count {
  position: absolute;
  top: -7px;
  right: -9px;
  background: var(--dx-cyan);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Los enlaces "Inicio" y "Tienda" que inc/header-actions.php agrega al
   menú (wp_nav_menu_objects) viven en el MISMO <ul> que Kadence reutiliza
   para el panel/offcanvas móvil. Antes solo se ocultaba el carrito
   (.dx-header-actions-item); estos dos quedaban visibles ahí y se veían
   duplicados con la barra inferior (.dx-mobile-bar), que ya los cubre. */
@media (max-width: 1024px) {
  li.dx-home-link,
  li.dx-shop-link {
    display: none !important;
  }
}

/* En móvil/tablet el carrito del menú se oculta: lo reemplaza la barra
   inferior (.dx-mobile-bar). Así no hay duplicados ni carrito perdido
   dentro del menú hamburguesa. */
@media (max-width: 1024px) {
  .dx-header-actions-item { display: none !important; }
}

/* ---------- 13c. Barra inferior móvil ---------- */
.dx-mobile-bar { display: none; }
@media (max-width: 1024px) {
  .dx-mobile-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 998;
    display: flex;
    background: #000;
    border-top: 1px solid #ffffff22;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .dx-mobile-bar__item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    background: none;
    border: 0;
    color: #fff !important;
    font: 600 11px "Hanken Grotesk", system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
  }
  .dx-mobile-bar__item svg { width: 22px; height: 22px; }
  .dx-mobile-bar__item.is-current { color: var(--dx-cyan) !important; }
  .dx-mobile-bar .dx-cart-count {
    top: 6px;
    right: calc(50% - 22px);
  }
  /* Espacio para que la barra no tape el final de la página */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 13. Botón flotante de WhatsApp ---------- */
.dx-whatsapp {
  position: fixed;
  right: 20px;
  /* env(safe-area-inset-bottom) evita que el botón quede montado sobre
     la barra de gestos/home indicator en iPhones sin botón físico. En
     dispositivos sin esa barra, el valor es 0 y no cambia nada. */
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  padding: 14px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dx-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  color: #fff;
}
.dx-whatsapp svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0;
  display: block;
}
.dx-whatsapp span { white-space: nowrap; }

@media (max-width: 700px) {
  .dx-whatsapp {
    right: 14px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    padding: 14px;
    border-radius: 50%;
  }
  .dx-whatsapp span { display: none; }
  .dx-whatsapp svg { width: 26px; height: 26px; }
}


/* El clic/tap sobre el ícono SVG (o el span del contador) dentro de los
   botones de carrito a veces no hacía bubble hasta el <button> en algunos
   navegadores móviles, porque el SVG es su propio árbol de eventos. Se
   fuerza a que el tap "atraviese" el ícono y siempre lo reciba el botón. */
.dx-cart-btn svg,
.dx-cart-btn .dx-cart-count,
.dx-mobile-bar__item svg,
.dx-mobile-bar__item span {
  pointer-events: none;
}