/* ============================================================
   1. CABECERA FIJA Y PEGADA (MÓVIL Y DESKTOP)
   ============================================================ */
header, .wp-custom-header, .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important; /* Asegura que esté por encima de todo */
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    margin: 0 !important; /* Elimina márgenes que puedan separarla del borde */
}

/* 2. AJUSTE PARA EL CUERPO DE LA WEB (Para que el contenido no se tape) */
body {
     /* Ajusta este número según la altura de tu menú */
    margin-top: 0 !important;
}

/* Ajuste específico para móviles */
@media screen and (max-width: 600px) {
    body {
         /* Menos espacio en móvil */
    }
}

/* 3. COMPATIBILIDAD CON LA BARRA DE ADMIN DE WORDPRESS */
/* Si estás logueado, baja la cabecera para que la barra negra no la tape */
.admin-bar header, .admin-bar .wp-custom-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar header, .admin-bar .wp-custom-header {
        top: 46px !important;
    }
}

/* ============================================================
   4. LETRAS NEGRAS INTENSAS (MÁXIMA LEGIBILIDAD)
   ============================================================ */
/* Forzamos el color negro puro (#000) y grosor máximo en textos clave */
header span, 
header p, 
header a, 
header div,
.social-bar span,
.welcome-banner p {
    color: #000000 !important;
    font-weight: 800 !important; /* Letra muy negra y gruesa */
    opacity: 1 !important;
    -webkit-font-smoothing: antialiased;
}

/* El menú negro mantiene sus letras blancas para que se lean bien */
nav.main-navigation a, 
header nav a {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 0px 0px 1px rgba(255,255,255,0.2);
}

/* Enlaces del menú al pasar el ratón */
nav.main-navigation a:hover {
    color: #ec4899 !important; /* Rosa fuerte al pasar el ratón */
}

/* ============================================================
   5. OPTIMIZACIÓN PARA MÓVIL (SIN SCROLL LATERAL)
   ============================================================ */
html, body {
    overflow-x: hidden; /* Evita que la web se mueva hacia los lados */
    width: 100%;
}

/* Menú deslizable con el dedo en móvil */
.no-scrollbar {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.wpcom-ai-sticky-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}
/* Cabecera fija - Vella Perfumeria */
.wp-block-post-content > .wp-block-group:first-child,
.wp-block-post-content > div > .wp-block-group:first-child,
.entry-content > .wp-block-group:first-child,
.has-global-padding > .wp-block-group:first-child {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}
sticky-header nav a,
.sticky-header .wp-block-navigation a,
header .wp-block-navigation a,
header nav a {
    color: #000000 !important;
}
.wp-block-template-part[class*="header"],
header.wp-block-template-part,
.site-header,
#masthead {
  position: sticky;
  top: 0;
  z-index: 999;
}
No veo el bloque de paginación en la estructura actual de la plantilla. La paginación en WooCommerce es generada dinámicamente, así que lo más efectivo es añadir CSS personalizado para estilizarla.

Lo mejor es hacerlo vía CSS adicional. Añade esto en **Apariencia → Personalizar → CSS adicional**:

```css
/* Paginación WooCommerce */
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  background-color: #888888 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
}

/* Número activo/actual */
.woocommerce-pagination ul li span.current {
  background-color: #555555 !important;
  color: #ffffff !important;
}

/* Hover */
.woocommerce-pagination ul li a:hover {
  background-color: #666666 !important;
  color: #ffffff !important;
}
```

Esto dará a los botones "Anterior", "Siguiente" y los números de página un fondo **gris** con texto **blanco** y borde blanco alrededor del rectángulo.

[Ir a CSS adicional](https://vellaperfumeria.com/wp-admin/customize.php?autofocus[section]=custom_css)
/* =========================================================================
   CABECERA FIJA (STICKY) UNIVERSAL PARA WORDPRESS
   COMPATIBLE CON: TEMAS CLÁSICOS, ELEMENTOR, GUTENBERG, ASTRA, DIVI, ETC.
   ========================================================================= */

/* 1. CORRECCIÓN CRÍTICA PARA CONTENEDORES PADRE
   (Evita que 'overflow: hidden' de los temas anule la posición fija) */
html,
body,
#page,
.site,
.site-content,
.ast-container,
.elementor-inner {
  overflow-x: clip !important;
}

/* 2. REGLA MAESTRA: FIJA LA CABECERA AL HACER SCROLL */
#bp-wp-header-wrapper,
header,
#masthead,
.site-header,
#site-header,
.main-header,
.main-header-bar,
.elementor-location-header,
[data-elementor-type="header"],
header.wp-block-template-part {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 99999 !important; /* Prioridad por encima de banners, sliders y contenido */
  background-color: #ffffff !important; /* Evita que el texto de la web se transparente debajo */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; /* Sombra sutil al desplazarse */
  transition: all 0.25s ease !important;
  transform: none !important;
  contain: none !important;
  overflow: visible !important; /* Impide que los menús desplegables se corten */
  box-sizing: border-box !important;
}

/* 3. COMPENSACIÓN CUANDO ESTÁS DENTRO DE WORDPRESS (BARRA DE ADMIN) */
body.admin-bar #bp-wp-header-wrapper,
body.admin-bar header,
body.admin-bar #masthead,
body.admin-bar .site-header,
body.admin-bar #site-header,
body.admin-bar .main-header,
body.admin-bar .elementor-location-header,
body.admin-bar [data-elementor-type="header"],
body.admin-bar header.wp-block-template-part,
.admin-bar header,
.admin-bar .site-header {
  top: 32px !important; /* Altura de la barra admin en ordenador */
}

@media screen and (max-width: 782px) {
  body.admin-bar #bp-wp-header-wrapper,
  body.admin-bar header,
  body.admin-bar #masthead,
  body.admin-bar .site-header,
  body.admin-bar #site-header,
  body.admin-bar .main-header,
  body.admin-bar .elementor-location-header,
  body.admin-bar [data-elementor-type="header"],
  body.admin-bar header.wp-block-template-part,
  .admin-bar header,
  .admin-bar .site-header {
    top: 46px !important; /* Altura de la barra admin en móviles y tablets */
  }
}

/* 4. PREVIENE SALTOS O HUECOS CON EL CONTENIDO SIGUIENTE */
#bp-wp-header-wrapper + *,
header + *,
.site-header + *,
#masthead + * {
  margin-top: 0 !important;
}

/* 5. ASEGURA QUE LOS MENÚS DESPLEGABLES SE VEAN SIEMPRE COMPLETOS */
header nav,
.site-header nav,
header .sub-menu,
.site-header .sub-menu,
header .dropdown-menu,
.site-header .dropdown-menu,
header [class*="dropdown"],
.site-header [class*="dropdown"],
header [class*="menu"],
.site-header [class*="menu"] {
  overflow: visible !important;
  z-index: 999999 !important;
}