/* ==========================================================================
   Mascotas Bastet — estilos de los patrones de bloques

   Sobre el !important
   -------------------
   Astra genera CSS dinámico con selectores largos y en algunos sitios usa
   !important, así que cargar después no basta para ganarle. Aquí se gana de
   dos maneras a la vez:

     1. !important en todo lo que Astra toca de verdad: tipografía, color,
        fondo, bordes, radios, botones y anchos de contenedor.
     2. Cada regla de componente se escribe con bastante especificidad como
        para que ningún plugin la pise por accidente.

   Regla de mantenimiento: si una propiedad lleva !important en la regla base,
   tiene que llevarlo también en las media queries que la cambian. Si no, el
   móvil se queda con el valor de escritorio. Está respetado en todo el archivo.

   Tipografías: Changa One para titulares (solo tiene un peso, el 400: pedirle
   una negrita produce una falsa, deformada por el navegador, así que la
   jerarquía la marca el tamaño) y Source Sans 3 para el resto.
   ========================================================================== */

:root {
  --bastet-brand:      var(--wp--preset--color--bastet-turquesa, #007D79);
  --bastet-brand-hi:   var(--wp--preset--color--bastet-turquesa-claro, #009C97);
  --bastet-gold:       var(--wp--preset--color--bastet-oro, #F1C500);
  --bastet-gold-ink:   var(--wp--preset--color--bastet-oro-tinta, #604F00);
  --bastet-ink:        var(--wp--preset--color--bastet-tinta, #303031);
  --bastet-ink-soft:   var(--wp--preset--color--bastet-tinta-suave, #505051);
  --bastet-night:      var(--wp--preset--color--bastet-noche, #003735);
  --bastet-paper:      var(--wp--preset--color--bastet-papel, #FFFFFC);
  --bastet-surface:    var(--wp--preset--color--bastet-superficie, #FFFFFF);
  --bastet-surface-2:  var(--wp--preset--color--bastet-superficie-2, #F3F3F2);
  --bastet-line:       var(--wp--preset--color--bastet-linea, #DADAD9);
  --bastet-mint:       var(--wp--preset--color--bastet-mint, #A0EBE8);
  --bastet-gold-hi:    var(--wp--preset--color--bastet-oro-claro, #F8E441);
  /* Texto sobre las bandas oscuras. Antes había trece tonos casi iguales
     escritos a mano; ahora son dos. */
  --bastet-on-night:   #DEF8F7;
  --bastet-on-night-2: #C4F1EF;
  /* Y uno más para el texto que va sobre el TURQUESA, no sobre el oscuro:
     ahí el claro de las bandas oscuras se queda en 4,08:1 y no llega. */
  --bastet-on-brand:   #E7FAF9;
  /* Tinta para ir ENCIMA del turquesa claro: el oscuro no llega a 4,5:1. */
  --bastet-ink-brand:  #001F1E;
  --bastet-titulares:  var(--wp--preset--font-family--bastet-titulares, "Changa One", "Trebuchet MS", system-ui, sans-serif);
  --bastet-texto:      var(--wp--preset--font-family--bastet-texto, "Source Sans 3", system-ui, sans-serif);
  --bastet-ancho:      1180px;   /* el ancho de contenido, en un solo sitio */
  --bastet-gap-s:      10px;     /* ritmo vertical: pegado   */
  --bastet-gap-m:      20px;     /*                 normal   */
  --bastet-gap-l:      34px;     /*                 separado */

  /* El aire vertical de TODAS las bandas, en un único número.
     Si lo quieres a cero, pon 0 aquí y se van todos de golpe.
     Va en padding y no en margin a propósito: las bandas de color tienen que
     seguir llegando de borde a borde. Con margin, entre la banda turquesa y
     la oscura aparecería una franja de color papel. */
  --bastet-seccion:    clamp(40px, 5.5vw, 76px);
  --bastet-radius:     14px;
  --bastet-shadow:     0 1px 2px rgba(48,48,49,.06), 0 10px 28px -14px rgba(48,48,49,.28);
}

/* ==========================================================================
   CABECERA Y PIE

   Los monta el constructor de Astra, no esta plantilla, así que aquí solo se
   les da forma. Las clases son las que Astra genera de verdad, sacadas del
   HTML del sitio, no inventadas.

   El buscador es el de Astra a propósito: ya funciona, ya es accesible y ya
   conoce WooCommerce. Lo único que cambia es cómo se ve.
   ========================================================================== */

/* ---------- Barra superior ---------- */

html body .ast-above-header-wrap,
html body .ast-above-header-bar {
  background-color: var(--bastet-night) !important;
  border: 0 !important;
}
html body .ast-above-header-bar,
html body .ast-above-header-bar .ast-builder-html-element,
html body .ast-above-header-bar p {
  color: var(--bastet-on-night-2) !important;
  font-size: .86rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/*
 * Los tres mensajes, en una sola fila.
 *
 * Van en <span> y no separados por <br>: así se reparten en horizontal con un
 * hueco de verdad y, cuando no caben, bajan de uno en uno en vez de quedarse
 * siempre en tres líneas apiladas, que es como se veían.
 */
html body .ast-above-header-bar .ast-builder-html-element {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px 38px !important;
  padding-block: 9px !important;
}
html body .ast-above-header-bar .ast-builder-html-element br { display: none !important; }
html body .ast-above-header-bar .ast-builder-html-element > span { display: inline-block; }
html body .ast-above-header-bar strong,
html body .ast-above-header-bar b { color: var(--bastet-gold) !important; font-weight: 700 !important; }
html body .ast-above-header-bar a { color: var(--bastet-on-night-2) !important; text-decoration: none !important; }
html body .ast-above-header-bar a:hover { color: #FFFFFF !important; }

/* ---------- Fila principal ---------- */

html body .ast-primary-header-bar,
html body .ast-primary-header-bar.main-header-bar {
  background-color: var(--bastet-surface) !important;
  border-bottom: 0 !important;
}
html body .ast-primary-header-bar .site-branding img,
html body .ast-primary-header-bar .custom-logo { height: 46px !important; width: auto !important; }

/* ---------- Buscador de Astra ---------- */

/* La cabecera no puede ser más ancha que la pantalla.
   En móvil el buscador va en la fila de abajo de la cabecera, y esa fila es
   una rejilla CSS. Una columna de rejilla se mide por el contenido y no baja
   de ahí, así que el buscador mantenía sus 686 px de escritorio: la página
   medía 726 px de ancho en una pantalla de 375 y el navegador la encogía al
   52% para que cupiera. Todo el sitio se veía en miniatura en el móvil.
   Con min-width:0 la celda ya puede encoger. Medido: scrollWidth de 726 a 375. */
html body .site-header .ast-builder-grid-row { max-width: 100% !important; }
html body .site-header .ast-builder-grid-row > * { min-width: 0 !important; }

html body .ast-header-search { flex: 1 1 auto; min-width: 0; }
html body .ast-header-search .ast-search-menu-icon,
html body .ast-header-search .ast-inline-search {
  width: 100% !important;
  max-width: 720px;
  margin-inline: auto;
}
/*
 * Astra coloca el botón de buscar con position:absolute, así que se salía de
 * la fila y quedaba descolocado dentro de la píldora. Vuelve al flujo normal
 * y la etiqueta que envuelve el campo pasa a ocupar el hueco que queda.
 */
html body .ast-header-search .search-form > label {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  width: auto !important;
}
html body .ast-header-search .search-form {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  width: 100% !important;
  background-color: var(--bastet-surface-2) !important;
  border: 1px solid var(--bastet-line) !important;
  border-radius: 999px !important;
  padding: 5px 6px 5px 22px !important;
  transition: border-color .18s ease;
}
/*
 * El anillo de foco va en la píldora entera, no en el campo.
 *
 * Al campo le quito el outline porque dentro de la píldora queda un recuadro
 * feo, pero quitarlo y no poner nada dejaba el buscador sin foco visible: con
 * el tabulador no se sabía que estabas dentro. El indicador se mueve al form.
 */
html body .ast-header-search .search-form:focus-within {
  border-color: var(--bastet-brand) !important;
  outline: 3px solid var(--bastet-brand-hi) !important;
  outline-offset: 2px !important;
}
html body .ast-header-search .search-field,
html body .ast-header-search input.search-field {
  flex: 1 1 auto; min-width: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  height: auto !important;
  font-family: var(--bastet-texto) !important;
  font-size: 1rem !important;
  color: var(--bastet-ink) !important;
  border-radius: 0 !important;
}
html body .ast-header-search .search-field:focus { outline: none !important; }
html body .ast-header-search .search-field::placeholder { color: var(--bastet-ink-soft) !important; opacity: 1; }

/* El botón de buscar, redondo y en turquesa. Astra lo esconde por defecto. */
html body .ast-header-search .search-submit,
html body .ast-header-search button.search-submit {
  position: static !important;   /* Astra lo pone absolute y se descoloca */
  inset: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  flex: 0 0 auto !important;
  width: 46px !important; height: 46px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: var(--bastet-brand) !important;
  color: #FFFFFF !important;
  cursor: pointer;
}
html body .ast-header-search .search-submit:hover { background-color: var(--bastet-brand-hi) !important; }
html body .ast-header-search .astra-search-icon,
html body .ast-header-search .search-submit svg { color: #FFFFFF !important; fill: currentColor; }
/* La lupa iba 3 px alta y 1 px a la izquierda dentro del círculo.
   No era el botón, que ya centra: Astra mete la lupa dentro de tres cajas
   anidadas (i > span.ast-icon > span.ahfb-svg-iconset > svg) y la de en medio
   es un bloque con el SVG en línea dentro. Un elemento en línea se apoya en la
   línea base, así que la caja reservaba además el hueco de los rasgos que
   bajan: 34 px de alto para un icono de 22, con el icono arriba del todo.
   Se quita el hueco poniendo las tres cajas en flex con alto automático y el
   SVG en bloque, y de paso se le da medida fija para que no quede descentrado
   en horizontal. */
html body .ast-header-search .search-submit .astra-search-icon,
html body .ast-header-search .search-submit .ast-icon,
html body .ast-header-search .search-submit .ahfb-svg-iconset {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  line-height: 0 !important;
}
html body .ast-header-search .search-submit svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
}

/* ---------- Cuenta y carrito ---------- */

/*
 * Cuenta y carrito, con el mismo lenguaje que el botón del buscador: círculo,
 * borde fino, y relleno al pasar. Antes eran dos iconos sueltos de distinto
 * tamaño flotando al lado de una píldora de 56 px.
 */
html body .ast-header-account-link,
html body .ast-header-woo-cart .ast-cart-menu-wrap,
html body .ast-site-header-cart a.cart-container,
html body .ast-site-header-cart .ast-addon-cart-wrap {
  width: 46px !important; height: 46px !important;
  min-width: 46px !important; min-height: 46px !important;
  padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border: 1px solid var(--bastet-line) !important;
  border-radius: 50% !important;
  background-color: var(--bastet-surface) !important;
  color: var(--bastet-ink) !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
html body .ast-header-account-link:hover,
html body .ast-header-account-link:focus-visible,
html body .ast-site-header-cart a.cart-container:hover,
html body .ast-site-header-cart a.cart-container:focus-visible {
  background-color: var(--bastet-brand) !important;
  border-color: var(--bastet-brand) !important;
  color: #FFFFFF !important;
}
html body .ast-header-account-link svg,
html body .ast-site-header-cart svg,
html body .ast-site-header-cart .ast-icon {
  width: 21px !important; height: 21px !important;
  fill: currentColor !important; color: currentColor !important;
}
/* Astra dibuja un recuadro alrededor del carrito: sobra, ya hay círculo */
html body .ast-menu-cart-with-border .ast-cart-menu-wrap,
html body .ast-menu-cart-outline .ast-cart-menu-wrap { border-width: 1px !important; }

/* El contador, en oro con tinta: 7,2:1 */
html body .ast-site-header-cart .ast-cart-menu-wrap .count,
html body .ast-site-header-cart .ast-count,
html body .ast-site-header-cart .ast-cart-count {
  background-color: var(--bastet-gold) !important;
  color: var(--bastet-ink) !important;
  border: 0 !important;
  font-weight: 700 !important;
  font-size: .68rem !important;
  min-width: 18px; height: 18px;
  line-height: 18px !important;
  border-radius: 999px !important;
  top: -2px !important; right: -2px !important;
}

/* La columna de contacto del pie */
html body .site-footer .bastet-contacto .bastet-dato { display: block; margin-bottom: 12px; }
html body .site-footer .bastet-contacto .bastet-dato:last-child { margin-bottom: 0; }

/* Las columnas del pie, alineadas a la izquierda.
   Hay que forzarlo porque la opción del personalizador no llega: Astra escribe
   la alineación de cada columna TRES veces seguidas en su CSS en línea, primero
   lo que hay elegido y después dos repeticiones con `center`. Misma
   especificidad, gana la última, y salen las cuatro columnas centradas aunque
   en el personalizador ponga otra cosa.
   Al tocarlas allí, ojo con la numeración: el widget 3 es la columna de Tienda
   (la cuarta) y el widget 4 es la de Ayuda (la tercera).
   Solo la fila principal: la fila de abajo, la de los enlaces legales, se queda
   como está. */
html body .site-primary-footer-wrap .footer-widget-area,
html body .site-primary-footer-wrap .footer-widget-area .widget,
html body .site-primary-footer-wrap .footer-widget-area .widget-title,
html body .site-primary-footer-wrap .bastet-contacto,
/* Los iconos sociales son un elemento aparte del constructor, fuera del área
   de widgets, así que la regla de arriba no los alcanzaba: se quedaban
   centrados en medio de una columna alineada a la izquierda. */
html body .site-primary-footer-wrap .footer-social-inner-wrap {
  text-align: left !important;
}
/* El logo del pie, en su propia línea. Va en un <span> y el claim es texto
   suelto detrás, así que alineados a la izquierda se ponían uno al lado del
   otro; centrados colaban de milagro porque el texto hacía salto de línea. */
html body .site-primary-footer-wrap .bastet-logo {
  display: flex !important;
  margin-bottom: 14px;
}

/* ---------- Fila del menú ---------- */

/* La fila del menú se queda pegada arriba al bajar.
   El sticky va en la cabecera entera, no en la fila. `position: sticky` solo
   se desplaza dentro de su propio padre, y el padre de la fila del menú
   (#ast-desktop-header) acaba justo donde acaba la fila: 226 px de cabecera y
   la fila empieza en el 162. Tenía 162 px de recorrido hasta arriba y 162 px
   de padre, así que llegaba a cero y se despegaba en el mismo píxel. Medido en
   la web: al bajar 400 px la fila estaba en -238, fuera de pantalla.
   Pegando #masthead con un `top` negativo igual a lo que hay por encima del
   menú, la barra superior y el logo se van y el menú queda clavado en cero.
   La medida la calcula bastet.js en --bastet-cabecera-sube; si el JS no llega,
   vale 0 y se queda pegada la cabecera entera: más alta de lo suyo, pero
   funcionando. Solo de 921 px arriba: en móvil la cabecera pegada dejaría el
   menú hamburguesa desplegado fuera de pantalla y sin forma de llegar a él. */
@media (min-width: 921px) {
  html body #masthead {
    position: sticky !important;
    top: calc(var(--bastet-cabecera-barra, 0px) - var(--bastet-cabecera-sube, 0px)) !important;
    z-index: 95 !important;
  }
  /* La barra de administración tapa la cabecera si no se le deja su hueco. */
  html body.admin-bar { --bastet-cabecera-barra: 32px; }
}
html body .ast-below-header-wrap,
html body .ast-below-header-bar {
  background-color: var(--bastet-surface) !important;
  border-top: 1px solid var(--bastet-line) !important;
  border-bottom: 1px solid var(--bastet-line) !important;
}
html body .ast-below-header-wrap { box-shadow: 0 10px 24px -18px rgba(48,48,49,.5); }
/* La fila del menú medía 93 px para unas entradas de 22: el alto lo ponía
   Astra, no el contenido. El alto lo marcan ahora los propios enlaces. */
html body .ast-below-header-bar .ast-builder-grid-row,
html body .ast-below-header-bar .site-header-section,
html body .ast-below-header-bar .ast-builder-layout-element {
  min-height: 0 !important;
  padding-block: 0 !important;
}
html body .ast-below-header-bar .main-header-bar-navigation { padding: 0 !important; }

/* Astra fuerza line-height:60px en los enlaces para cuadrarlos con el alto de
   su cabecera. Eso dejaba cada enlace en 91 px de alto para un texto de 22, y
   el subrayado del hover a una distancia absurda del texto. */
html body .ast-below-header-bar .main-header-menu > .menu-item > .menu-link {
  font-family: var(--bastet-texto) !important;
  font-size: .97rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  height: auto !important;
  color: var(--bastet-ink) !important;
  padding: 15px 16px !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
html body .ast-below-header-bar .main-header-menu > .menu-item > .menu-link:hover,
html body .ast-below-header-bar .main-header-menu > .menu-item > .menu-link:focus-visible,
html body .ast-below-header-bar .main-header-menu > .current-menu-item > .menu-link,
html body .ast-below-header-bar .main-header-menu > .current-menu-ancestor > .menu-link {
  color: var(--bastet-brand) !important;          /* 5,8:1 sobre blanco */
  background-color: var(--bastet-surface-2) !important;
  border-bottom-color: var(--bastet-brand) !important;
}
/* La flecha del desplegable, del mismo color que el texto */
html body .ast-below-header-bar .main-header-menu > .menu-item > .menu-link .ast-icon,
html body .ast-below-header-bar .main-header-menu > .menu-item > .menu-link svg { color: currentColor !important; fill: currentColor !important; }

/*
 * Las etiquetas del menú.
 *
 * No se escriben en el nombre del elemento: se pone una clase en
 * Apariencia → Menús → Clases CSS (bastet-nuevo o bastet-seguro) y la
 * etiqueta la genera el CSS. Así el nombre del menú se queda limpio y la
 * etiqueta no acaba en el título de la página ni en el buscador.
 */
html body .main-header-menu .bastet-nuevo > .menu-link::after,
html body .main-header-menu .bastet-seguro > .menu-link::after {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  vertical-align: middle;
}
html body .main-header-menu .bastet-nuevo > .menu-link::after {
  content: "Nuevo";
  background-color: var(--bastet-gold);
  color: var(--bastet-ink);
  text-transform: uppercase;
}
html body .main-header-menu .bastet-seguro > .menu-link::after {
  content: "Seguro médico";
  border: 1.5px solid var(--bastet-line);
  color: var(--bastet-ink-soft);
  font-weight: 600;
  letter-spacing: 0;
}

/* ---------- Pie ---------- */

html body .site-footer,
html body .ast-footer-overlay,
html body .site-primary-footer-wrap,
html body .site-below-footer-wrap {
  background-color: var(--bastet-night) !important;
  color: var(--bastet-on-night-2) !important;
  border: 0 !important;
}
html body .site-footer .widget-title,
html body .site-footer .ast-widget-title,
html body .site-footer h2,
html body .site-footer h3 {
  font-family: var(--bastet-texto) !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--bastet-gold) !important;
  margin: 0 0 14px !important;
}
html body .site-footer,
html body .site-footer p,
html body .site-footer li { font-size: .97rem !important; line-height: 1.75 !important; }
html body .site-footer a { color: var(--bastet-on-night-2) !important; text-decoration: none !important; }
html body .site-footer a:hover,
html body .site-footer a:focus-visible { color: #FFFFFF !important; text-decoration: underline !important; text-underline-offset: 3px; }
html body .site-footer ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
html body .site-footer li { margin: 0 0 2px !important; }

/* Cada dato de la tienda en su línea. En la cabecera siguen en línea. */
html body .site-footer .bastet-dato {
  display: block;
  margin-bottom: 12px;
}
html body .site-footer .bastet-dato:last-child { margin-bottom: 0; }

/*
 * La fila de abajo: copyright a la izquierda y legales a la derecha, en una
 * sola línea. Medía 215 px porque sus columnas se apilaban como las del resto
 * del pie, y lo que lleva es una línea de texto y una lista de enlaces.
 */
html body .site-below-footer-wrap {
  border-top: 1px solid rgba(255,255,255,.14) !important;
}
html body .site-below-footer-wrap .ast-builder-grid-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px 28px !important;
  padding-block: 16px !important;
  min-height: 0 !important;
}
html body .site-below-footer-wrap .ast-builder-grid-row > * { margin: 0 !important; }
html body .site-below-footer-wrap ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-end;
}
html body .site-below-footer-wrap li { margin: 0 !important; }
html body .site-below-footer-wrap .widget-title,
html body .site-below-footer-wrap h2,
html body .site-below-footer-wrap h3 { display: none !important; }

html body .ast-footer-copyright,
html body .ast-footer-copyright p { font-size: .88rem !important; color: var(--bastet-on-night-2) !important; margin: 0 !important; }

@media (max-width: 720px) {
  html body .site-below-footer-wrap .ast-builder-grid-row { justify-content: flex-start !important; }
  html body .site-below-footer-wrap ul { justify-content: flex-start; }
}

/* Los iconos sociales de Astra, redondos y con contorno */
html body .site-footer .ast-social-icon-wrap,
html body .site-footer .ast-builder-social-element {
  width: 44px !important; height: 44px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 50% !important;
  color: var(--bastet-on-night-2) !important;
  transition: background-color .18s ease, border-color .18s ease;
}
html body .site-footer .ast-builder-social-element:hover {
  background-color: var(--bastet-brand-hi) !important;
  border-color: var(--bastet-brand-hi) !important;
  color: var(--bastet-ink-brand) !important;
}

@media (max-width: 920px) {
  html body .ast-header-search .ast-inline-search { max-width: none; }

  /* Astra deja la raíz en 14,59 px en el móvil, así que TODO lo que está
     medido en rem salía un 9% más pequeño de lo diseñado: los botones a
     14,6 px y los párrafos a 15,3. El diseño está hecho sobre 16 px, que es
     además el mínimo cómodo para leer en un teléfono. */
  html { font-size: 16px !important; }

  /* El botón del menú estaba en oro con el icono blanco: 1,7:1, no se veía.
     Se queda en oro, que es de la marca, con el icono en tinta: 10:1. */
  html body .ast-mobile-header-wrap .menu-toggle {
    background-color: var(--bastet-gold) !important;
    color: var(--bastet-ink) !important;
    border-radius: 12px !important;
  }
  html body .ast-mobile-header-wrap .menu-toggle svg { fill: currentColor !important; }

  /* Los enlaces del pie medían 20 px de alto: imposibles de acertar con el
     dedo y por debajo del mínimo de 24 px de la WCAG 2.2. */
  html body .site-footer .menu-item > a {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }

  /* El pie no tenía ni un píxel de margen lateral en el móvil: el logo, el
     claim, los títulos y todos los enlaces arrancaban en x=0, pegados al
     borde de la pantalla, mientras las secciones de la página llevan sus
     16 px. Ahora el pie respeta el mismo margen. */
  html body .site-above-footer-wrap .ast-builder-grid-row-container-inner,
  html body .site-primary-footer-wrap .ast-builder-grid-row-container-inner,
  html body .site-below-footer-wrap .ast-builder-grid-row-container-inner {
    padding-inline: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   0 bis. Red de seguridad de la portada

   El .ast-container de Astra es flex, porque es el que coloca contenido y
   barra lateral en paralelo. Si las secciones acaban siendo hermanas suyas
   —o si cualquier plugin vuelve a hacer flex a un ancestro—, se ponen una al
   lado de otra en columnas estrechas. Esto lo impide pase lo que pase.
   -------------------------------------------------------------------------- */

/*
 * En esta plantilla manda el tema hijo, no Astra.
 *
 * WordPress pone la clase page-template-page-portada en el <body> al elegir
 * la plantilla, así que se puede desactivar el contenedor de Astra solo aquí
 * sin tocar el resto de la web. El .ast-container es flex (es el que coloca
 * contenido y barra lateral en paralelo) y además limita el ancho: las dos
 * cosas estorban a una portada de bandas a sangre.
 */
html body.page-template-page-portada #content > .ast-container,
html body.page-template-page-portada .site-content > .ast-container {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body.page-template-page-portada .entry-header,
html body.page-template-page-portada .ast-archive-description { display: none !important; }
html body.page-template-page-portada .site-content article,
html body.page-template-page-portada .ast-article-single {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  max-width: none !important;
  width: 100% !important;
}

html body #primary.bastet-portada,
html body .bastet-portada > #main {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .bastet-portada > #main > section {
  display: block;
  width: 100%;
  max-width: none;
}

/* --------------------------------------------------------------------------
   0 ter. Maquetación de columnas, por nuestra cuenta

   El marcado usa las clases de los bloques de WordPress (wp-block-columns,
   wp-block-column, wp-block-buttons…), pero WordPress solo encola el CSS de
   bloques cuando la página TIENE bloques. Esta plantilla es de ACF y el
   contenido va vacío, así que esas clases llegaban sin un solo estilo y todo
   salía apilado.

   Se define aquí en vez de encolar wp-block-library entera: son treinta
   líneas en lugar de sesenta kilobytes, y no dependemos de que el núcleo no
   cambie estas reglas.
   -------------------------------------------------------------------------- */

html body .bastet-portada .wp-block-columns {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start;
  gap: 24px !important;
  /* 'auto' en los lados, no 0: con margin:0 el contenido se quedaba pegado a
     la izquierda porque anulaba el margin-inline:auto que lo centra. */
  margin: 0 auto !important;
}
html body .bastet-portada .wp-block-column {
  flex: 1 1 0% !important;
  min-width: 0 !important;        /* sin esto, un texto largo ensancha la columna */
  word-break: break-word;
}
html body .bastet-portada .wp-block-columns.are-vertically-aligned-center { align-items: center; }
html body .bastet-portada .wp-block-column.is-vertically-aligned-center { align-self: center; }

html body .bastet-portada .wp-block-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* El envoltorio del botón medía 27 px y el enlace de dentro 47: el enlace se
   salía por arriba y por abajo de su propia caja. Como la separación entre
   botones apilados la pone el gap ENTRE ENVOLTORIOS, los 12 px se los comía
   el desbordamiento y los botones acababan solapándose 8 px. Pasa por que el
   enlace es inline-block y su relleno sobresale de la línea de texto; con el
   envoltorio en flex, su alto es el del enlace y el gap vuelve a verse. */
html body .bastet-portada .wp-block-button {
  margin: 0 !important;
  display: flex !important;
}

html body .bastet-portada figure.wp-block-image { margin: 0 !important; }
html body .bastet-portada figure.wp-block-image img { max-width: 100%; height: auto; display: block; }

html body .bastet-portada .has-text-align-center { text-align: center; }

/* --------------------------------------------------------------------------
   Ritmo vertical

   Un único sitio donde se decide cuánto separa cada cosa de la siguiente.
   Antes cada sección improvisaba con los márgenes que le llegaban de Astra
   y de WordPress, y por eso no había dos iguales.
   -------------------------------------------------------------------------- */

/*
 * OJO con el atajo margin.
 *
 * Estas cuatro reglas llevaban «margin: 0 0 X», y ese 0 de los lados anulaba
 * el margin-left/right:auto que centra el contenido dentro de la banda. Por
 * eso los antetítulos y los titulares salían pegados al borde izquierdo
 * mientras las columnas sí quedaban centradas. Los lados van en auto.
 */
html body .bastet-portada .bastet-eyebrow { margin: 0 auto 10px !important; }
html body .bastet-portada .bastet-head { margin: 0 auto var(--bastet-gap-l) !important; }
html body .bastet-portada .bastet-head + .bastet-lede { margin: -18px auto var(--bastet-gap-l) !important; }
html body .bastet-portada .bastet-lede { margin: 0 auto var(--bastet-gap-l) !important; }
html body .bastet-portada h2 + p { margin-top: var(--bastet-gap-m) !important; }
/* Las columnas no llevan margen superior propio: lo que las separa de lo que
   tengan encima es el margen de ese elemento, no el suyo. */
html body .bastet-portada .woocommerce { margin-top: var(--bastet-gap-l) !important; }

/* Las columnas de texto de las bandas a dos columnas respiran por dentro:
   sin esto el texto se queda pegado al borde de la pantalla. */
html body .bastet-welcome .wp-block-column,
html body .bastet-care .wp-block-column,
html body .bastet-why .wp-block-column,
html body .bastet-shop > .wp-block-columns > .wp-block-column {
  padding: var(--bastet-gap-m) !important;
}
html body .bastet-welcome .wp-block-column:has(> .wp-block-image),
html body .bastet-care .wp-block-column:has(> .wp-block-image),
html body .bastet-why .wp-block-column:has(> .wp-block-image) {
  padding: 0 !important;
}

/* Los tamaños de theme.json no llegan a emitirse en esta plantilla, así que
   las clases has-*-font-size llegaban vacías y los titulares de sección
   salían con el tamaño por defecto de Astra. Se definen aquí. */
html body .bastet-portada .has-titulo-heroe-font-size   { font-size: clamp(2rem, 3.4vw, 3rem) !important; }
html body .bastet-portada .has-titulo-seccion-font-size { font-size: clamp(1.65rem, 2.9vw, 2.35rem) !important; }
html body .bastet-portada .has-large-font-size          { font-size: clamp(1.15rem, 1.6vw, 1.35rem) !important; }
html body .bastet-portada .has-small-font-size          { font-size: .92rem !important; }
html body .bastet-portada p { margin: 0 0 14px; }
html body .bastet-portada p:last-child { margin-bottom: 0; }

/* Por debajo de 782px las columnas se apilan, igual que haría el núcleo. */
@media (max-width: 781px) {
  html body .bastet-portada .wp-block-columns {
    flex-direction: column !important;
    /* Al girar la dirección, el eje principal pasa a ser el vertical y el
       ancho lo decide align-items, que arriba está en flex-start. Resultado:
       cada columna se encogía a su contenido. Las tarjetas de perros y gatos
       medían 267 px en una pantalla de 375, con el hueco blanco a la derecha. */
    align-items: stretch !important;
  }
  html body .bastet-portada .wp-block-column {
    /* En dirección columna, flex-basis es el ALTO. Poner aquí el 100% que
       había no ensanchaba nada: el ancho hay que darlo aparte. */
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}

/* Aviso de «se abre en pestaña nueva» para lectores de pantalla.
   Astra ya define .screen-reader-text, pero no damos por hecho que esté. */
html body .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   0. Capa base: aquí es donde se le gana a Astra
   -------------------------------------------------------------------------- */

html body {
  background-color: var(--bastet-paper) !important;
  color: var(--bastet-ink) !important;
  font-family: var(--bastet-texto) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .entry-title {
  font-family: var(--bastet-titulares) !important;
  font-weight: 400 !important;   /* Changa One solo tiene este peso */
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  color: var(--bastet-ink) !important;
  text-wrap: balance;
}

html body a { color: var(--bastet-brand) !important; }
html body a:hover { color: var(--bastet-brand-hi) !important; }

/* Los botones de Astra, de WordPress y de WooCommerce, todos iguales */
html body .wp-block-button__link,
html body .ast-button,
html body button.ast-button,
html body .woocommerce a.button,
html body .woocommerce button.button,
html body .woocommerce input.button {
  background-color: var(--bastet-brand) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-family: var(--bastet-texto) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  min-height: 48px !important;
  line-height: 1.4 !important;
}
html body .wp-block-button__link,
html body .ast-button,
html body .woocommerce a.button,
html body .woocommerce button.button {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}
html body .wp-block-button__link:hover,
html body .wp-block-button__link:focus-visible,
html body .ast-button:hover,
html body .woocommerce a.button:hover,
html body .woocommerce button.button:hover {
  background-color: var(--bastet-brand-hi) !important;
  color: #FFFFFF !important;
}

/*
 * Tres tipos de botón, y cada uno con su hover.
 *
 * Antes is-style-outline estaba pintado igual que .bastet-oro, así que el
 * botón secundario salía en oro macizo —ni secundario ni nada— y, al tener
 * esa regla más especificidad que el :hover genérico, ninguno de los dos
 * reaccionaba al pasar por encima.
 */

/* Oro: destacado. Texto oscuro siempre; en blanco daría 1,84:1. */
html body .wp-block-button.bastet-oro .wp-block-button__link {
  background-color: var(--bastet-gold) !important;
  color: var(--bastet-ink) !important;
  border: 0 !important;
}
html body .wp-block-button.bastet-oro .wp-block-button__link:hover,
html body .wp-block-button.bastet-oro .wp-block-button__link:focus-visible {
  background-color: var(--bastet-gold-hi) !important;
  color: var(--bastet-ink) !important;
  transform: translateY(-1px);
}

/* Secundario: contorno. Sobre fondo claro, en turquesa (5,8:1). */
html body .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--bastet-brand) !important;
  border: 2px solid currentColor !important;
  padding: 10px 22px !important;
}
html body .wp-block-button.is-style-outline .wp-block-button__link:hover,
html body .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background-color: var(--bastet-brand) !important;
  color: #FFFFFF !important;
  border-color: var(--bastet-brand) !important;
}

/* Y sobre las bandas oscuras o de color, en blanco (6,2:1 o mejor). */
html body .bastet-hero .wp-block-button.is-style-outline .wp-block-button__link,
html body .bastet-care .wp-block-button.is-style-outline .wp-block-button__link,
html body .bastet-shop .wp-block-button.is-style-outline .wp-block-button__link,
html body .bastet-season .wp-block-button.is-style-outline .wp-block-button__link {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.62) !important;
}
html body .bastet-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
html body .bastet-care .wp-block-button.is-style-outline .wp-block-button__link:hover,
html body .bastet-shop .wp-block-button.is-style-outline .wp-block-button__link:hover,
html body .bastet-season .wp-block-button.is-style-outline .wp-block-button__link:hover,
html body .bastet-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
html body .bastet-care .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
html body .bastet-shop .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
html body .bastet-season .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background-color: rgba(255,255,255,.16) !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .wp-block-button__link:hover { transform: none !important; }
}

/* Foco visible en todo el sitio (WCAG 2.4.7) */
html body :focus-visible {
  outline: 3px solid var(--bastet-brand-hi) !important;
  outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   1. Piezas sueltas
   -------------------------------------------------------------------------- */

html body .bastet-eyebrow {
  font-family: var(--bastet-texto) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--bastet-brand) !important;
  margin: 0 0 10px !important;
}
html body .bastet-lede { color: var(--bastet-ink-soft) !important; max-width: 62ch; }

/* --------------------------------------------------------------------------
   2. Héroe
   Cada diapositiva es un grupo normal y se edita como cualquier bloque.
   Sin JavaScript se ven apiladas, que sigue siendo legible.
   -------------------------------------------------------------------------- */

html body .bastet-hero {
  position: relative;
  background-color: var(--bastet-night) !important;
  overflow: hidden;
  padding: 0 !important;
}
html body .bastet-hero .bastet-hero__track { display: grid; }

/* La foto va de fondo a toda la diapositiva, anclada a la derecha, y encima
   un degradado que entra desde la izquierda para que el texto se lea. El
   texto no ocupa una columna: flota sobre la imagen. */
html body .bastet-hero .bastet-slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex !important;
  align-items: center;
  min-height: min(560px, 68vh);
  background-color: var(--bastet-night) !important;
  gap: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}
html body .bastet-hero.is-ready .bastet-slide {
  opacity: 0; pointer-events: none; transition: opacity .7s ease;
}
html body .bastet-hero.is-ready .bastet-slide.is-on { opacity: 1; pointer-events: auto; }

html body .bastet-slide .bastet-slide__text {
  position: relative;
  z-index: 2;
  background: transparent !important;
  color: var(--bastet-on-night) !important;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  width: 100%;
  max-width: var(--bastet-ancho) !important;
  margin: 0 auto !important;
  padding: clamp(32px, 5vw, 72px) !important;
  padding-left: max(clamp(32px, 5vw, 72px), env(safe-area-inset-left, 0px)) !important;
}
/*
 * El texto se queda en la mitad izquierda, que es donde el degradado es opaco.
 *
 * Y los márgenes laterales a cero: el antetítulo lleva «margin: 0 auto» para
 * centrarse dentro de las bandas normales, pero aquí dentro, en una columna
 * flex con ancho máximo, ese auto lo mandaba al centro de la diapositiva.
 */
html body .bastet-slide .bastet-slide__text > * {
  max-width: 34rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: flex-start;
  text-align: left;
}
html body .bastet-slide .bastet-slide__text .bastet-eyebrow { color: var(--bastet-accent, var(--bastet-gold)) !important; }
/*
 * El titular de la diapositiva.
 *
 * El de la primera es un <h1> y el de las demás un <p>, porque una página
 * solo debe tener un h1. Sin esta regla el <p> heredaba el estilo de párrafo
 * y las diapositivas 2 y 3 salían con el titular en texto corriente.
 *
 * Los tamaños van explícitos y no por las clases has-*-font-size de
 * theme.json: en esta plantilla WordPress no llega a emitir ese CSS.
 */
html body .bastet-slide .bastet-slide__text h1,
html body .bastet-slide .bastet-slide__text h2,
html body .bastet-slide .bastet-slide__text .bastet-slide__title {
  font-family: var(--bastet-titulares) !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 3.4vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  color: #FFFFFF !important;
  max-width: 17ch;
  margin: 0 !important;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(0,31,30, .45);
}
html body .bastet-slide .bastet-slide__text p:not(.bastet-slide__title) {
  color: var(--bastet-on-night-2) !important;
  max-width: 42ch;
  font-size: 1.05rem !important;
}

html body .bastet-slide .bastet-slide__media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}
html body .bastet-slide .bastet-slide__media figure { margin: 0 !important; height: 100% !important; }
html body .bastet-slide .bastet-slide__media img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: 100% 50% !important;   /* anclada a la derecha */
  border-radius: 0 !important;
  display: block;
}

/* Siluetas recortadas: ocupan la mitad derecha y se apoyan abajo, sin recortar */
html body .bastet-slide .bastet-slide__media.is-cutout {
  left: auto !important;
  width: min(56%, 720px) !important;
}
html body .bastet-slide .bastet-slide__media.is-cutout img {
  object-fit: contain !important;
  object-position: 100% 100% !important;
  padding: 24px 24px 0 !important;
}

/*
 * El degradado. Tiene que ser opaco donde cae el texto y desaparecer antes de
 * llegar al animal. Sobre rgba(7,38,43,.94) el texto blanco da más de 13:1,
 * así que se lee igual sea cual sea la foto que se ponga debajo.
 */
html body .bastet-slide::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(7,38,43,.96) 0%,
    rgba(7,38,43,.94) 30%,
    rgba(7,38,43,.72) 46%,
    rgba(7,38,43,.28) 64%,
    rgba(7,38,43,0)   82%);
}
/* Un velo de acento muy tenue, para que cada diapositiva no sea idéntica */
html body .bastet-slide::before {
  content: ""; position: absolute; inset: auto auto -40% -20%; z-index: 1;
  width: 60%; height: 120%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--bastet-accent, #009C97) 22%, transparent), transparent 70%);
}

/* Color de acento por diapositiva. Se añade una clase y ya está. */
html body .bastet-slide--natural { --bastet-accent: #009C97; }
html body .bastet-slide--marcas  { --bastet-accent: #F1C500; }
html body .bastet-slide--consejo { --bastet-accent: #8CD44A; }

/* Controles: los crea el JavaScript, no el patrón */
html body .bastet-hero .bastet-hero__controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px clamp(18px, 3vw, 38px);
  padding-left: max(clamp(18px, 3vw, 38px), env(safe-area-inset-left, 0px));
  background: linear-gradient(to top, rgba(4,20,23,.78), rgba(4,20,23,0));
}
html body .bastet-hero__dots { display: flex; gap: 10px; list-style: none !important; margin: 0 !important; padding: 0 !important; }
html body .bastet-hero__dots li { margin: 0 !important; }
html body .bastet-hero__dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px !important; min-height: 48px !important;
  border: 0 !important; background: transparent !important; cursor: pointer; padding: 0 !important;
}
html body .bastet-hero__dot span {
  display: block; width: 46px; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.35); position: relative; overflow: hidden;
}
html body .bastet-hero__dot span::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--bastet-gold); }
html body .bastet-hero__dot[aria-current="true"] span::after { width: 100%; }
html body .bastet-hero__dot.is-timing span::after { width: 0; animation: bastet-fill 7s linear forwards; }
@keyframes bastet-fill { from { width: 0 } to { width: 100% } }

html body .bastet-hero__btns { margin-left: auto; display: flex; gap: 8px; }
html body .bastet-hero__btn {
  width: 48px !important; height: 48px !important; min-height: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,.45) !important;
  background: rgba(7,38,43,.5) !important; color: #FFFFFF !important;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important;
}
html body .bastet-hero__btn:hover { background: var(--bastet-brand) !important; border-color: var(--bastet-brand) !important; }
html body .bastet-hero__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

@media (max-width: 820px) {
  /* En vertical la foto sigue de fondo, pero el degradado pasa a bajar desde
     arriba: en una pantalla estrecha no queda sitio para separar texto e
     imagen en horizontal. */
  html body .bastet-hero .bastet-slide {
    min-height: min(520px, 76vh);
    align-items: flex-end;
  }
  html body .bastet-slide::after {
    background: linear-gradient(180deg,
      rgba(7,38,43,.55) 0%,
      rgba(7,38,43,.80) 42%,
      rgba(7,38,43,.96) 78%) !important;
  }
  html body .bastet-slide .bastet-slide__text { padding-bottom: 76px !important; }
  html body .bastet-slide .bastet-slide__text > * { max-width: none; }
  html body .bastet-slide .bastet-slide__media.is-cutout {
    left: 0 !important; width: 100% !important;
  }
  html body .bastet-slide .bastet-slide__media.is-cutout img { object-position: 50% 0 !important; }
  html body .bastet-slide .bastet-slide__media img { object-position: 70% 30% !important; }
}

/* --------------------------------------------------------------------------
   3. Tira de garantías
   Los iconos van en CSS para que el bloque sea solo texto y nadie tenga que
   pelearse con un SVG en el editor.
   -------------------------------------------------------------------------- */

html body .bastet-trust {
  background-color: var(--bastet-surface) !important;
  border-bottom: 1px solid var(--bastet-line) !important;
}
html body .bastet-trust .wp-block-column { position: relative; padding-left: 38px !important; }
html body .bastet-trust .wp-block-column::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px;
  background-color: var(--bastet-brand);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
html body .bastet-trust .bastet-i-envio::before   { -webkit-mask-image: var(--bastet-icon-truck);  mask-image: var(--bastet-icon-truck); }
html body .bastet-trust .bastet-i-natural::before { -webkit-mask-image: var(--bastet-icon-shield); mask-image: var(--bastet-icon-shield); }
html body .bastet-trust .bastet-i-consejo::before { -webkit-mask-image: var(--bastet-icon-chat);   mask-image: var(--bastet-icon-chat); }
html body .bastet-trust .bastet-i-tienda::before  { -webkit-mask-image: var(--bastet-icon-pin);    mask-image: var(--bastet-icon-pin); }
html body .bastet-trust strong {
  display: block; font-family: var(--bastet-titulares) !important;
  font-weight: 400 !important; font-size: 1.05rem !important; color: var(--bastet-ink) !important;
}
html body .bastet-trust p { margin: 0 !important; font-size: .9rem !important; color: var(--bastet-ink-soft) !important; }

:root {
  --bastet-icon-truck:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7z"/><circle cx="7" cy="18" r="1.6"/><circle cx="17.5" cy="18" r="1.6"/></svg>');
  --bastet-icon-shield: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.3-2.9 8-7 10-4.1-2-7-5.7-7-10V6z"/><path d="M9 12l2 2 4-4.5"/></svg>');
  --bastet-icon-chat:   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2.5 2.5 0 01-2.5 2.5H8L4 21V6a2.5 2.5 0 012.5-2.5h12A2.5 2.5 0 0121 6z"/><path d="M8.5 10.5h7M8.5 13.5h4"/></svg>');
  --bastet-icon-pin:    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s7-5.2 7-11a7 7 0 10-14 0c0 5.8 7 11 7 11z"/><circle cx="12" cy="10" r="2.6"/></svg>');
}

/* --------------------------------------------------------------------------
   4. Reconocimiento
   -------------------------------------------------------------------------- */

html body .bastet-award { background-color: var(--bastet-night) !important; color: var(--bastet-on-night) !important; }
html body .bastet-award .bastet-award__in {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 3vw, 34px) !important;
  flex-wrap: wrap;
  text-align: left;
}
/* El sello es un círculo rojo sobre blanco. Recortado a su caja exacta, el
   border-radius se come las esquinas blancas y no queda recuadro. */
html body .bastet-award__sello {
  flex: none;
  width: clamp(88px, 11vw, 124px);
  height: clamp(88px, 11vw, 124px);
  border-radius: 50% !important;
  overflow: hidden;
  margin: 0 !important;
  box-shadow: 0 10px 28px -12px rgba(0,0,0,.7);
}
html body .bastet-award__sello img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 50% !important; display: block;
}
html body .bastet-award p { margin: 0 !important; line-height: 1.35 !important; }
html body .bastet-award strong {
  display: block;
  font-family: var(--bastet-titulares) !important; font-weight: 400 !important;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem) !important; color: #FFFFFF !important;
}
html body .bastet-award em {
  font-style: normal; color: var(--bastet-gold) !important;
  font-weight: 700 !important; letter-spacing: .04em;
}
html body .bastet-award .bastet-award__src {
  font-size: .9rem !important; color: var(--bastet-on-night-2) !important; margin-top: 4px !important;
}
@media (max-width: 560px) {
  html body .bastet-award .bastet-award__in { flex-direction: column; text-align: center; }
}

/* --------------------------------------------------------------------------
   5. Tarjetas de especie
   -------------------------------------------------------------------------- */

/* La maqueta de las dos tarjetas, escrita aquí y no heredada de la portada:
   así el bloque se puede pegar en cualquier página (Nosotros, una landing)
   sin depender de que esa página cargue el CSS de columnas del núcleo ni de
   las reglas de .bastet-portada. */
/* Sin `margin` ni `align-items` a propósito: aquí solo hace falta decir que
   es una fila flexible. En la portada el centrado lo pone `margin: 0 auto`
   de la regla general de columnas, y poner `margin: 0` aquí lo anulaba y
   dejaba estas dos tarjetas 27 px a la izquierda del resto de la sección. */
html body .wp-block-columns.bastet-species {
  display: flex !important;
  flex-wrap: wrap !important;
}
html body .bastet-species > .wp-block-column {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
@media (max-width: 781px) {
  html body .wp-block-columns.bastet-species { flex-direction: column !important; }
  html body .bastet-species > .wp-block-column { flex: 0 0 auto !important; width: 100% !important; }
}

html body .bastet-species .wp-block-column {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;   /* el texto, abajo */
  position: relative; overflow: hidden;
  border-radius: var(--bastet-radius) !important;
  background-color: var(--bastet-brand) !important;
  color: #FFFFFF !important;
  height: 30vh;
  box-shadow: var(--bastet-shadow);
  transition: transform .18s ease;
  padding: clamp(20px, 3vw, 30px) !important;
}
/* El color de cada tarjeta se elige en su campo, no por posición.
   Sobre oro el texto va SIEMPRE oscuro: el blanco da 1,84:1 y es el fallo de
   contraste que más se repite en la web actual. */
html body .bastet-species .bastet-species--turquesa { background-color: var(--bastet-brand) !important; }
html body .bastet-species .bastet-species--noche    { background-color: var(--bastet-night) !important; }
html body .bastet-species .bastet-species--oro      { background-color: var(--bastet-gold) !important; }
html body .bastet-species .bastet-species--oro h3   { color: var(--bastet-ink) !important; }
html body .bastet-species .bastet-species--oro p    { color: var(--bastet-gold-ink) !important; }
html body .bastet-species .bastet-species--oro a    { color: var(--bastet-ink) !important; }
html body .bastet-species .wp-block-column:hover { transform: translateY(-4px); }
/* La foto cubre toda la tarjeta, anclada abajo a la derecha, y un degradado
   desde la izquierda deja el texto legible encima. Mismo criterio que el
   héroe: el contraste no depende de qué foto se ponga. */
html body .bastet-species figure {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  z-index: 0;
}
html body .bastet-species figure img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: 100% 100% !important;
  border-radius: 0 !important;
}
html body .bastet-species .wp-block-column::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg,
    rgba(4,38,42,.92) 0%, rgba(4,38,42,.80) 34%, rgba(4,38,42,.35) 58%, rgba(4,38,42,0) 82%);
}
/* En la tarjeta de oro el degradado es claro y el texto oscuro. Al revés
   —blanco sobre oro— da 1,82:1, que es de los peores contrastes posibles. */
html body .bastet-species .bastet-species--oro::after {
  background: linear-gradient(105deg,
    rgba(242,183,5,.97) 0%, rgba(242,183,5,.92) 34%, rgba(242,183,5,.42) 58%, rgba(242,183,5,0) 82%);
}
html body .bastet-species .bastet-species--oro h3,
html body .bastet-species .bastet-species--oro a { color: var(--bastet-ink) !important; }
html body .bastet-species .bastet-species--oro p { color: var(--bastet-gold-ink) !important; }
html body .bastet-species .bastet-species--oro a { border-bottom-color: var(--bastet-ink) !important; }
/* Todo el texto por encima de la foto y del degradado */
html body .bastet-species .wp-block-column > *:not(figure) { position: relative; z-index: 2; }
html body .bastet-species h3,
html body .bastet-species p,
html body .bastet-species .wp-block-buttons { position: relative; z-index: 2; }
html body .bastet-species h3 { color: #FFFFFF !important; margin: 0 0 6px !important; font-size: 1.85rem !important; }
html body .bastet-species p { color: var(--bastet-on-brand) !important; font-size: .95rem !important; max-width: 30ch; margin: 0 0 10px !important; }
/* El enlace de la tarjeta va en blanco, no en oro: oro sobre el turquesa de
   marca da 3,44:1 y se queda corto para texto. El oro se reserva para el
   subrayado, que como elemento gráfico sí cumple con 3:1. */
html body .bastet-species a {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--bastet-gold) !important;
  padding-bottom: 2px;
}
html body .bastet-species a:hover { border-bottom-color: #FFFFFF !important; }
html body .bastet-species .bastet-species--oro a {
  color: var(--bastet-ink) !important;
  border-bottom-color: var(--bastet-ink) !important;
}

/* En el móvil la foto va a la derecha, igual que en el ordenador.
   Aquí había una regla que intentaba meterla en una caja del 52% pegada a la
   derecha, pero no llegaba a aplicarse: el `inset: 0 !important` de la figura
   le ganaba a su `left:auto; right:4%`, así que quedaba un recorte del 52%
   anclado a la IZQUIERDA y el animal salía al revés que en escritorio.
   La solución no es pelear con el inset, es no tocar nada: dejando la figura
   cubriendo la tarjeta, el `object-position: 100% 100%` de la imagen ancla el
   recorte abajo a la derecha igual que en pantalla grande. */
@media (max-width: 820px) {
  html body .bastet-species figure {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   6. Temporada
   Se cambia cuatro veces al año: clase de acento, textos, enlace y fotos.
   -------------------------------------------------------------------------- */

html body .bastet-season { background-color: var(--bastet-night) !important; color: var(--bastet-on-night) !important; position: relative; overflow: hidden; }
html body .bastet-season > * { position: relative; }
/* ---------- La foto de temporada ----------
   Es lo que de verdad cambia la banda, igual que en las referencias: una
   foto grande de campaña manda muchísimo más que cualquier adorno. Va a la
   derecha del titular; los productos siguen a todo lo ancho debajo.
   Sin foto, el envoltorio es un bloque normal y la banda queda igual que
   antes: por eso la rejilla solo se activa con la clase --con-foto. */

html body .bastet-season--con-foto .bastet-season__cabecera {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 40%) !important;
  gap: 34px !important;
  align-items: center !important;
}
/* Dentro de la columna de texto todo va pegado a la izquierda. El antetítulo
   y el párrafo llevan `margin: 0 auto` y un max-width de 46ch heredados de la
   banda: en una columna ancha daba igual, pero metidos en una de 745 px se
   quedaban centrados en 303 y descolgados del titular. Se anula solo el
   margen lateral, nunca el vertical. */
html body .bastet-season__texto > *,
html body .bastet-season__texto .bastet-eyebrow { margin-inline: 0 !important; }
html body .bastet-season__texto .bastet-eyebrow { max-width: none !important; }

html body .bastet-season__foto,
html body .bastet-season__foto figure { margin-block: 0 !important; margin-inline: 0 !important; }
html body .bastet-season__foto img {
  display: block !important;
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  border-radius: var(--bastet-radius) !important;
  box-shadow: var(--bastet-shadow);
}

/* Recorte sin fondo (PNG con alfa). Se ve entero, sin caja: nada de recorte,
   nada de esquinas redondeadas y nada de box-shadow, que dibujaría el
   rectángulo que precisamente no queremos. La profundidad la da un
   drop-shadow, que sigue la silueta en vez de la caja. */
html body .bastet-season__foto--recorte img {
  height: 300px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .30));
}

@media (max-width: 860px) {
  /* Apilada, y más baja: en el móvil la foto no puede comerse la pantalla
     antes de que se vean los productos. */
  html body .bastet-season--con-foto .bastet-season__cabecera {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  html body .bastet-season__foto img { height: 180px !important; }
  html body .bastet-season__foto--recorte img { height: 200px !important; }
}

html body .bastet-season .bastet-eyebrow { color: var(--bastet-accent, var(--bastet-gold)) !important; }
html body .bastet-season h2 { color: #FFFFFF !important; }
html body .bastet-season p { color: var(--bastet-on-night-2) !important; max-width: 60ch; }
/* Las tarjetas son blancas también aquí: iguales en toda la portada, y sobre
   el fondo oscuro de la banda destacan más que aclarándolas a medias. */
html body .bastet-season--halloween { --bastet-accent: #F1C500; }
html body .bastet-season--navidad   { --bastet-accent: #C62828; }
html body .bastet-season--valentin  { --bastet-accent: #D6456E; }

/* --------------------------------------------------------------------------
   Navidad
   --------------------------------------------------------------------------
   Vale a la vez para la banda de temporada de la portada y para la categoría
   /categoria-producto/navidad/, que WordPress marca con body.term-navidad.

   El acento de Navidad estaba en #C62828 y sobre la banda oscura se queda en
   2,34:1: el antetítulo «Temporada» no se leía. Pasa a oro, que da 7,96, es
   de la marca y es tan navideño como el rojo. El rojo se queda para adorno,
   nunca debajo de un texto.

   El adorno va todo con gradientes: ni una imagen más que descargar, y el
   oscuro que ya teníamos (#003735) hace de verde pino sin inventar color. */

html body .bastet-season--navidad { --bastet-accent: var(--bastet-gold); }

/* La decoración: una noche de nieve.

   Van dos cambios que pidió la clienta, y conviene dejar escrito el porqué
   de cada uno, porque los dos sustituyen a algo anterior.

   Probé además poner el titular en una tipografía escrita a mano (Caveat) y
   no cuela: en una web con Changa One en todos los titulares, una cursiva
   suelta en una sola sección se lee como un pegote, no como un detalle de
   temporada. La Navidad la ponen el color, la nieve y la foto.

   1. EL COLOR. Probamos un azul de noche cerrada, que sobre el papel es el
      fondo que mejor le va a una foto de nieve. La clienta lo vio montado y
      prefirió quedarse en el verde oscuro de la marca, así que el fondo es
      el de siempre y lo que trae la Navidad es lo de abajo. Visto en pantalla
      tiene sentido: el azul era bonito pero rompía con el resto de bandas de
      la portada, que son todas de ese verde.

   2. LA NIEVE. Antes había un bosque de pinos. El bosque no estaba mal, pero
      es decorado quieto, y lo que de verdad dice «Navidad» en una pantalla es
      que algo se mueva despacio. Son dos capas de puntos cayendo a distinta
      velocidad y distinto tamaño, que es de donde sale la profundidad.

      Van en ::before y ::after con transform, no animando background-position:
      transform lo lleva la GPU y no obliga a repintar la banda entera en cada
      fotograma. Cada capa mide un alto de tesela MÁS que la banda y baja
      exactamente esa tesela, así que al volver a empezar el salto no se ve.
      Las dos teselas miden distinto (170 y 260) para que el conjunto no se
      repita a la vista.

   Contraste: el texto va sobre el verde liso de siempre. El claro da 11,05 y
   el medio 8,93, y la nieve queda DETRÁS del texto, nunca encima, así que
   esos números son los de verdad y no un promedio. */

html body .bastet-season--navidad,
html body.term-navidad .woocommerce-products-header {
  --bastet-nieve-lejos: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='170' fill='white'><circle cx='26.6' cy='110.3' r='1.3' fill-opacity='0.37'/><circle cx='62.5' cy='11.1' r='1.4' fill-opacity='0.48'/><circle cx='72.3' cy='139.8' r='1.1' fill-opacity='0.38'/><circle cx='106.4' cy='160' r='1.2' fill-opacity='0.49'/><circle cx='164.7' cy='9.1' r='1.3' fill-opacity='0.56'/><circle cx='25.4' cy='20.9' r='1.2' fill-opacity='0.43'/><circle cx='63.7' cy='93' r='1.5' fill-opacity='0.37'/><circle cx='51.5' cy='134.2' r='1.4' fill-opacity='0.52'/><circle cx='97.5' cy='89.2' r='1.2' fill-opacity='0.57'/><circle cx='49.6' cy='165.1' r='1.6' fill-opacity='0.38'/><circle cx='128' cy='26.7' r='1.3' fill-opacity='0.47'/></svg>");
  --bastet-nieve-cerca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' fill='white'><circle cx='243.9' cy='229.6' r='3.1' fill-opacity='0.58'/><circle cx='110.6' cy='137.7' r='2.6' fill-opacity='0.6'/><circle cx='115.8' cy='58.6' r='2.1' fill-opacity='0.71'/><circle cx='23.8' cy='183.8' r='1.8' fill-opacity='0.7'/><circle cx='189.7' cy='94' r='2.5' fill-opacity='0.57'/><circle cx='152.7' cy='170.1' r='2.9' fill-opacity='0.77'/><circle cx='95.2' cy='195.9' r='3.2' fill-opacity='0.68'/><circle cx='170.9' cy='82.7' r='2.6' fill-opacity='0.58'/><circle cx='185.6' cy='153.1' r='2.5' fill-opacity='0.71'/></svg>");

  background-color: var(--bastet-night) !important;
  background-image: radial-gradient(1100px 380px at 50% -20%, rgba(241,197,0,.16), transparent 70%);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% 100%;

  position: relative;
  overflow: hidden;
  /* Crea contexto de apilamiento para que las capas de nieve puedan ir en
     z-index -1: por encima del fondo de la banda y por debajo del contenido,
     sin tener que tocar el z-index de los hijos. */
  isolation: isolate;
}

html body .bastet-season--navidad::before,
html body .bastet-season--navidad::after,
html body.term-navidad .woocommerce-products-header::before,
html body.term-navidad .woocommerce-products-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
}

/* Capa de fondo: copos pequeños, lentos. */
html body .bastet-season--navidad::before,
html body.term-navidad .woocommerce-products-header::before {
  top: -170px;
  height: calc(100% + 170px);
  background-image: var(--bastet-nieve-lejos);
  background-size: 170px 170px;
  animation: bastet-nieve-lejos 19s linear infinite;
}

/* Capa de delante: copos mayores, algo más rápidos. */
html body .bastet-season--navidad::after,
html body.term-navidad .woocommerce-products-header::after {
  top: -260px;
  height: calc(100% + 260px);
  background-image: var(--bastet-nieve-cerca);
  background-size: 260px 260px;
  animation: bastet-nieve-cerca 13s linear infinite;
}

@keyframes bastet-nieve-lejos {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 170px, 0); }
}
@keyframes bastet-nieve-cerca {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 260px, 0); }
}

/* Quien tenga puesto que no quiere animaciones ve la misma nieve, quieta. */
@media (prefers-reduced-motion: reduce) {
  html body .bastet-season--navidad::before,
  html body .bastet-season--navidad::after,
  html body.term-navidad .woocommerce-products-header::before,
  html body.term-navidad .woocommerce-products-header::after {
    animation: none !important;
  }
}

/* El titular de temporada, escrito a mano. Caveat tiene la caja muy baja
   —la x-height es diminuta— así que necesita bastante más cuerpo que Changa
   One para pesar lo mismo, y menos interlineado. */
/* El botón, cuando hay foto, cuelga debajo del párrafo. */
html body .bastet-season__texto > .wp-block-buttons {
  margin-block: var(--bastet-gap-l) 0 !important;
  margin-inline: 0 !important;
}

@media (max-width: 760px) {
  /* Menos nieve y copos más pequeños: la misma densidad que en un panel de
     1200 px, metida en 335, es una ventisca. */
  html body .bastet-season--navidad::before,
  html body.term-navidad .woocommerce-products-header::before {
    background-size: 130px 130px;
    top: -130px;
    height: calc(100% + 130px);
    animation-name: bastet-nieve-movil-lejos;
  }
  html body .bastet-season--navidad::after,
  html body.term-navidad .woocommerce-products-header::after {
    background-size: 200px 200px;
    top: -200px;
    height: calc(100% + 200px);
    animation-name: bastet-nieve-movil-cerca;
  }
  @keyframes bastet-nieve-movil-lejos {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 130px, 0); }
  }
  @keyframes bastet-nieve-movil-cerca {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 200px, 0); }
  }
}
/* ---------- La categoría de Navidad ---------- */

/* El título y el texto de la categoría van dentro del mismo <header>, así que
   la banda sale de una pieza sin tocar el marcado. */
html body.term-navidad .woocommerce-products-header {
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: var(--bastet-radius) !important;
  padding: clamp(26px, 4vw, 42px) !important;
  margin-bottom: var(--bastet-gap-l) !important;
  box-shadow: var(--bastet-shadow);
}
/* El h1 lleva dos clases: .woocommerce-products-header__title y .page-title.
   La regla del catálogo casa por la segunda con la MISMA especificidad que
   esta y va después en la hoja, así que ganaba ella y el título salía en
   tinta oscura sobre el panel oscuro: invisible. Se sube la especificidad. */
html body.term-navidad .ast-woocommerce-container .woocommerce-products-header__title {
  color: #FFFFFF !important;
}
html body.term-navidad .woocommerce-products-header p,
html body.term-navidad .woocommerce-products-header .term-description {
  color: var(--bastet-on-night-2) !important;
  max-width: 52ch;
  margin: 14px 0 0 !important;
}
html body.term-navidad .woocommerce-products-header a { color: var(--bastet-gold) !important; }
html body .bastet-season--verano    { --bastet-accent: #009C97; }

@media (max-width: 860px) {
  /* Solo los iconos sueltos que puedan ir dentro del texto. Antes decía
     `.bastet-season .wp-block-image`, y al llegar la foto de temporada
     —que también es un wp-block-image— se la comía a 76x76. */
  html body .bastet-season__texto .wp-block-image img { width: 76px !important; height: 76px !important; }
}

/* --------------------------------------------------------------------------
   7. Novedades (listado de WooCommerce)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   7 bis. Tarjetas de producto

   Rejilla, no floats ni flex: así todas las tarjetas de una fila miden lo
   mismo y el botón puede quedarse pegado abajo aunque unos títulos ocupen
   dos líneas y otros una.

   La TARJETA vale para toda la tienda: portada, catálogo, categorías y los
   productos relacionados de la ficha. La REJILLA no: en el catálogo manda
   Astra, que ya tiene sus columnas por dispositivo en el personalizador.
   -------------------------------------------------------------------------- */

/* Las columnas las marca la clase columns-N que WooCommerce pone según la
   cantidad elegida en el campo de la sección (lo calcula bastet_columnas()).
   Si se piden cuatro productos salen cuatro columnas, no cuatro huecos de
   una rejilla de seis con dos vacíos a la derecha. El 6 de aquí es solo el
   respaldo por si algún día falta la clase. */
html body .bastet-portada ul.products {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* El clearfix que WooCommerce deja en ::before/::after se convierte en una
   celda más en cuanto la lista es una rejilla, y descoloca toda la fila. Se
   quita en todas las listas de productos, no solo en la portada. */
html body .bastet-portada ul.products.columns-1 { grid-template-columns: minmax(0, 1fr) !important; }
html body .bastet-portada ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html body .bastet-portada ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html body .bastet-portada ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
html body .bastet-portada ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
html body .bastet-portada ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

html body ul.products::before,
html body ul.products::after { display: none !important; }

html body ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 14px !important;
  background-color: var(--bastet-surface) !important;
  border: 1px solid var(--bastet-line) !important;
  border-radius: 12px !important;
  text-align: left !important;
  transition: border-color .18s ease, transform .18s ease;
}
html body ul.products li.product:hover {
  border-color: var(--bastet-brand) !important;
  transform: translateY(-3px);
}

/* La foto en 4:3 y no cuadrada: con 1:1 la tarjeta se iba a 388 px de alto
   para un contenido que ocupa bastante menos, y en la banda de temporada se
   notaba mucho. En 4:3 se quedan sobre 350 y encaja con el prototipo. */
html body ul.products li.product a img,
html body ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  object-fit: contain !important;
  background: #FFFFFF !important;
  border-radius: 8px !important;
  margin: 0 0 10px !important;
}

/* Astra imprime la categoría encima del nombre, en un gris clarísimo sobre
   blanco: 1,12:1, literalmente invisible. Y repite información que ya está
   en el menú. Fuera. */
html body ul.products li.product .ast-woo-product-category,
html body ul.products li.product .ast-shop-product-category,
html body ul.products li.product .posted_in { display: none !important; }

/* La marca, encima del nombre, como en el prototipo */
html body ul.products li.product .bastet-marca {
  display: block;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bastet-brand) !important;
  margin: 0 0 4px !important;
}

/* Alturas fijas en marca, nombre y precio.
   Es lo que hace que el precio y el botón queden a la misma altura en toda
   la fila, aunque un nombre ocupe una línea y otro dos, o un precio lleve
   rango («desde 9,50 €») y otro no. */
html body ul.products li.product .bastet-marca { min-height: 1.1em; }

html body ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--bastet-texto) !important;
  font-size: .97rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--bastet-ink) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  min-height: 2.7em;              /* dos líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* y no más de dos: un nombre largo no descuadra la fila */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* El precio empuja hacia abajo lo que venga después */
/* Todo el texto de la tarjeta vive dentro de un único div de Astra, así que
   desde la tarjeta no se puede empujar nada hacia abajo: el `margin: auto`
   del precio no hacía nada porque el precio no era un elemento flexible.
   Se convierte el envoltorio en otra columna que crece, y entonces sí.
   Con esto los botones de una fila quedan a la misma altura aunque un precio
   ocupe dos líneas, que es lo que pasa con los rangos de los productos
   variables: «10,20 € – 16,05 €». */
html body ul.products li.product .astra-shop-summary-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}
/* Y en los productos sin precio, que de esos hay unos cuantos, el que baja
   al fondo es el botón. */
html body ul.products li.product .astra-shop-summary-wrap:not(:has(.price)) .button {
  margin-top: auto !important;
}

html body ul.products li.product .price {
  display: block !important;
  margin: auto 0 0 !important;
  min-height: 1.9em;              /* importe + «IVA incluido», sin sobrar */
  padding-top: 6px;
  font-family: var(--bastet-titulares) !important;
  font-weight: 400 !important;
  font-size: 1.35rem !important;
  color: var(--bastet-ink) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
html body ul.products li.product .price del {
  font-size: .95rem !important; opacity: .55; margin-right: 6px;
}
html body ul.products li.product .price ins { text-decoration: none !important; }
html body ul.products li.product .woocommerce-price-suffix,
html body ul.products li.product .price small {
  display: block;
  font-family: var(--bastet-texto) !important;
  font-size: .72rem !important;
  font-weight: 400 !important;
  color: var(--bastet-ink-soft) !important;
  margin-top: 2px;
}

/* El botón, pegado abajo y a todo el ancho de la tarjeta */
html body ul.products li.product .button {
  display: block !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  min-height: 44px !important;
  font-size: .9rem !important;
  border-radius: 8px !important;
  padding: 11px 12px !important;
  text-align: center !important;
  background-color: var(--bastet-brand) !important;
  color: #FFFFFF !important;
}
html body ul.products li.product .button:hover,
html body ul.products li.product .button:focus-visible {
  background-color: var(--bastet-brand-hi) !important;
  color: #FFFFFF !important;
}
html body ul.products li.product .added_to_cart {
  display: block; text-align: center; margin-top: 6px; font-size: .82rem;
}

/* Etiquetas de oferta y agotado, encima de la foto */
html body ul.products li.product { position: relative; }
/* ---------- Insignias de la tarjeta ----------
   Ojo con los nombres: Astra NO usa la clase .onsale de WooCommerce, usa la
   suya, .ast-onsale-card. La regla que había aquí apuntaba a la de
   WooCommerce y por eso la insignia de oferta nunca se llegó a pintar como
   tocaba. Se dejan las dos.
   .bastet-rebaja es la nuestra, la del porcentaje, que pone inc/insignias.php. */

html body ul.products li.product .bastet-rebaja,
html body ul.products li.product .ast-onsale-card,
html body ul.products li.product .onsale,
html body ul.products li.product .ast-shop-product-out-of-stock,
html body ul.products li.product .out-of-stock {
  position: absolute !important;
  top: 10px !important; left: 10px !important;
  right: auto !important; bottom: auto !important;
  z-index: 3;
  margin: 0 !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  font-family: var(--bastet-texto) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.3 !important;
  min-height: 0 !important; min-width: 0 !important;
  width: auto !important; height: auto !important;
  text-align: center !important;
  box-shadow: 0 6px 16px -8px rgba(0, 31, 30, .55);
}

/* Rebaja y oferta: oro con tinta. Blanco sobre oro es el peor par de toda
   la paleta, 1,84:1. */
html body ul.products li.product .bastet-rebaja,
html body ul.products li.product .ast-onsale-card,
html body ul.products li.product .onsale {
  background-color: var(--bastet-gold) !important;
  color: var(--bastet-ink) !important;
  font-variant-numeric: tabular-nums;
}
/* El porcentaje manda sobre el «¡Oferta!» de Astra, pero solo si ha salido:
   si no se puede calcular, se queda el de Astra y no se pierde el aviso. */
html body ul.products li.product:has(.bastet-rebaja) .ast-onsale-card { display: none !important; }

html body ul.products li.product .ast-shop-product-out-of-stock,
html body ul.products li.product .out-of-stock {
  background-color: var(--bastet-night) !important;
  color: var(--bastet-on-night) !important;
}
/* Si un producto está rebajado Y agotado, las dos insignias caerían una
   encima de otra. Manda la de agotado, que es la que cambia lo que puedes
   hacer, y la del descuento baja. */
html body ul.products li.product.outofstock .bastet-rebaja,
html body ul.products li.product.outofstock .ast-onsale-card,
html body ul.products li.product.outofstock .onsale { top: 45px !important; }

/* Un producto agotado tiene que verse agotado de un vistazo, no solo por una
   etiqueta de 20 px en una esquina: la foto se apaga. */
html body ul.products li.product.outofstock .astra-shop-thumbnail-wrap img {
  opacity: .5 !important;
  filter: saturate(.55);
}
html body ul.products li.product.outofstock:hover .astra-shop-thumbnail-wrap img { opacity: .62 !important; }

/* En el móvil las tarjetas van a dos columnas y se quedan en 158 px: con los
   tamaños de escritorio, «Añadir al carrito» se parte en dos líneas y el
   «IVA incluido» se separa del precio. Vale para el catálogo y para la
   portada, que ahí también van a dos. */
@media (max-width: 480px) {
  html body ul.products li.product .woocommerce-loop-product__title { font-size: .9rem !important; }
  html body ul.products li.product .price { font-size: 1rem !important; }
  html body ul.products li.product .button {
    font-size: .85rem !important;
    padding: 11px 10px !important;
  }
}

/* Al estrechar solo se bajan columnas, nunca se suben: si una sección tiene
   dos, en tableta siguen siendo dos y no tres. */
@media (max-width: 1100px) {
  html body .bastet-portada ul.products,
  html body .bastet-portada ul.products.columns-4,
  html body .bastet-portada ul.products.columns-5,
  html body .bastet-portada ul.products.columns-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html body .bastet-portada ul.products.columns-1 { grid-template-columns: minmax(0, 1fr) !important; }
  html body .bastet-portada ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  html body .bastet-portada ul.products,
  html body .bastet-portada ul.products.columns-3,
  html body .bastet-portada ul.products.columns-4,
  html body .bastet-portada ul.products.columns-5,
  html body .bastet-portada ul.products.columns-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body .bastet-portada ul.products.columns-1 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* --------------------------------------------------------------------------
   7 ter. Catálogo: tienda, categorías y etiquetas
   --------------------------------------------------------------------------
   Las TARJETAS no se definen aquí: son las mismas del apartado anterior, que
   valen para toda la tienda. Esto es solo lo que rodea a la rejilla —migas,
   título, barra de orden y paginación—, que hasta ahora iba con los estilos
   de serie de Astra.

   Las COLUMNAS tampoco se tocan: Astra ya tiene 4 / 3 / 2 por dispositivo en
   el personalizador (Apariencia → Personalizar → WooCommerce → Catálogo), y
   meterse ahí sería quitarte un ajuste que ya funciona.
   -------------------------------------------------------------------------- */

html body.woocommerce-shop .ast-woocommerce-container,
html body.tax-product_cat .ast-woocommerce-container,
html body.tax-product_tag .ast-woocommerce-container {
  padding-top: var(--bastet-gap-l) !important;
}

/* ---------- Migas ---------- */

html body .woocommerce-breadcrumb {
  font-family: var(--bastet-texto) !important;
  font-size: .9rem !important;
  color: var(--bastet-ink-soft) !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
html body .woocommerce-breadcrumb a {
  color: var(--bastet-ink-soft) !important;
  text-decoration: none !important;
}
html body .woocommerce-breadcrumb a:hover,
html body .woocommerce-breadcrumb a:focus-visible { color: var(--bastet-brand) !important; }

/* ---------- Título y descripción ---------- */

html body .woocommerce-products-header__title,
html body .ast-woocommerce-container .page-title {
  font-family: var(--bastet-titulares) !important;
  font-weight: 400 !important;
  font-size: clamp(1.9rem, 4vw, 2.6rem) !important;
  line-height: 1.1 !important;
  color: var(--bastet-ink) !important;
  margin: 0 !important;
}
html body .term-description,
html body .taxonomy-description {
  font-family: var(--bastet-texto) !important;
  font-size: 1rem !important;
  color: var(--bastet-ink-soft) !important;
  max-width: 70ch;
  margin: 0 0 var(--bastet-gap-m) !important;
}
html body .term-description p:last-child { margin-bottom: 0 !important; }

/* ---------- Barra de recuento y orden ---------- */

/* Los dos van en la misma fila con un filete arriba y otro abajo: así se lee
   como una barra de herramientas del listado y no como dos párrafos sueltos
   flotando entre el título y los productos, que es como estaba. */
html body .ast-woocommerce-container .woocommerce-result-count,
html body .ast-woocommerce-container .woocommerce-ordering {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
html body .ast-woocommerce-container .woocommerce-result-count {
  font-family: var(--bastet-texto) !important;
  font-size: .95rem !important;
  color: var(--bastet-ink-soft) !important;
}
/* Sin `order`: en el marcado el recuento ya va justo antes del desplegable y
   los dos entre el título y la rejilla. Al ponerles un orden se iban los dos
   al final del contenedor, detrás de la paginación. */
html body .ast-woocommerce-container .woocommerce-ordering { margin-left: auto !important; }

/* La barra la forma el contenedor: recuento y orden son hermanos sueltos, no
   hay un div que los envuelva, así que se usa :has() para encontrarlo. */
html body .ast-woocommerce-container:has(> .woocommerce-result-count) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}
html body .ast-woocommerce-container:has(> .woocommerce-result-count) > .woocommerce-breadcrumb,
html body .ast-woocommerce-container:has(> .woocommerce-result-count) > .woocommerce-products-header,
html body .ast-woocommerce-container:has(> .woocommerce-result-count) > .woocommerce-notices-wrapper,
html body .ast-woocommerce-container:has(> .woocommerce-result-count) > ul.products,
html body .ast-woocommerce-container:has(> .woocommerce-result-count) > .woocommerce-pagination,
html body .ast-woocommerce-container:has(> .woocommerce-result-count) > .term-description {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
/* El filete de arriba va en la cabecera y no en el recuento ni en el
   desplegable: esos dos solo ocupan su contenido, así que cada uno pintaba su
   propio trocito de línea y quedaban dos rayas sueltas con un hueco en medio.
   En la cabecera, que sí ocupa todo el ancho, sale una sola. */
html body .woocommerce-products-header {
  border-bottom: 1px solid var(--bastet-line) !important;
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
}
html body .ast-woocommerce-container > ul.products {
  border-top: 1px solid var(--bastet-line) !important;
  padding-top: var(--bastet-gap-l) !important;
  margin-top: 16px !important;
}

/* La rejilla de Astra trae `column-gap: 20px` pero deja `row-gap: normal`,
   que en una rejilla es CERO: las filas de tarjetas se tocaban. Se iguala al
   hueco entre columnas, que ya está puesto, para que la separación sea la
   misma en los dos sentidos. Solo el hueco entre filas: el número de columnas
   lo sigue mandando el personalizador. */
html body .ast-woocommerce-container > ul.products,
html body .related ul.products,
html body .upsells ul.products,
html body .cross-sells ul.products {
  row-gap: 20px !important;
}

/* El desplegable de orden: igual que el resto de campos del sitio. Astra lo
   deja sin borde ni fondo y con la tipografía vieja. La flecha va de imagen
   porque al quitar la apariencia nativa desaparece la del sistema. */
html body .woocommerce-ordering select.orderby {
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: var(--bastet-texto) !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  color: var(--bastet-ink) !important;
  background-color: var(--bastet-surface) !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23505051" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9.5l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  border: 1px solid var(--bastet-line) !important;
  border-radius: 999px !important;
  padding: 10px 38px 10px 18px !important;
  min-height: 44px !important;
  cursor: pointer;
  transition: border-color .18s ease;
}
html body .woocommerce-ordering select.orderby:hover { border-color: var(--bastet-ink-soft) !important; }
html body .woocommerce-ordering select.orderby:focus-visible {
  border-color: var(--bastet-brand) !important;
  outline: 3px solid var(--bastet-brand-hi) !important;
  outline-offset: 2px !important;
}

/* ---------- Paginación ---------- */

html body .woocommerce-pagination {
  margin: var(--bastet-gap-l) 0 0 !important;
  padding-top: var(--bastet-gap-m) !important;
  border-top: 1px solid var(--bastet-line) !important;
}
html body .woocommerce-pagination ul.page-numbers {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}
html body .woocommerce-pagination ul.page-numbers li {
  margin: 0 !important;
  border: 0 !important;
  overflow: visible !important;
}
html body .woocommerce-pagination .page-numbers {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;   /* el dedo necesita 44 */
  padding: 0 12px !important;
  border: 1px solid var(--bastet-line) !important;
  border-radius: 999px !important;
  font-family: var(--bastet-texto) !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  color: var(--bastet-ink) !important;
  background-color: var(--bastet-surface) !important;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html body .woocommerce-pagination a.page-numbers:hover,
html body .woocommerce-pagination a.page-numbers:focus-visible {
  background-color: var(--bastet-surface-2) !important;
  border-color: var(--bastet-ink-soft) !important;
  color: var(--bastet-ink) !important;
}
html body .woocommerce-pagination .page-numbers.current {
  background-color: var(--bastet-brand) !important;
  border-color: var(--bastet-brand) !important;
  color: #FFFFFF !important;
}
html body .woocommerce-pagination .page-numbers.dots {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--bastet-ink-soft) !important;
  min-width: 24px !important;
  padding: 0 !important;
}

/* ---------- Móvil ---------- */

@media (max-width: 600px) {
  /* El recuento y el orden, uno encima de otro y el desplegable a todo lo
     ancho: en 375 px no caben en la misma fila sin que el select se quede
     en un pellizco imposible de acertar. */
  html body .ast-woocommerce-container > .woocommerce-ordering {
    margin-left: 0 !important;
    width: 100% !important;
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  html body .woocommerce-ordering select.orderby { width: 100% !important; }
  html body .ast-woocommerce-container > .woocommerce-result-count { width: 100% !important; padding-bottom: 2px !important; }
  html body .woocommerce-pagination .page-numbers { min-width: 42px !important; padding: 0 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .woocommerce-ordering select.orderby,
  html body .woocommerce-pagination .page-numbers { transition: none !important; }
}

/* --------------------------------------------------------------------------
   8. Quiénes somos
   -------------------------------------------------------------------------- */

html body .bastet-about { background-color: var(--bastet-surface-2) !important; }
html body .bastet-about .wp-block-image img { border-radius: var(--bastet-radius) !important; }
html body .bastet-about ol { list-style: none !important; margin: 26px 0 0 !important; padding: 0 !important; counter-reset: bastet; }
html body .bastet-about ol li {
  counter-increment: bastet; position: relative;
  padding-left: 54px !important; margin-bottom: 22px !important;
}
html body .bastet-about ol li::before {
  content: counter(bastet); position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background-color: var(--bastet-brand); color: #FFFFFF;
  display: grid; place-items: center;
  font-family: var(--bastet-titulares); font-weight: 400; font-size: 1.15rem;
}
html body .bastet-about ol li strong {
  display: block; font-family: var(--bastet-titulares) !important; font-weight: 400 !important;
  font-size: 1.2rem !important; margin-bottom: 3px; color: var(--bastet-ink) !important;
}

/* --------------------------------------------------------------------------
   9. Tienda física
   -------------------------------------------------------------------------- */

html body .bastet-shop { background-color: var(--bastet-night) !important; color: var(--bastet-on-night) !important; }
html body .bastet-shop h2 { color: #FFFFFF !important; }
html body .bastet-shop p { color: var(--bastet-on-night-2) !important; }
html body .bastet-shop .bastet-eyebrow { color: var(--bastet-gold) !important; }
html body .bastet-shop a { color: #FFFFFF !important; border-bottom: 1px solid rgba(255,255,255,.4); text-decoration: none !important; }
html body .bastet-shop a:hover { color: var(--bastet-gold) !important; border-color: var(--bastet-gold); }
html body .bastet-shop .wp-block-image img { border-radius: var(--bastet-radius) !important; }
html body .bastet-shop strong {
  display: block; font-family: var(--bastet-texto) !important;
  font-size: .74rem !important; letter-spacing: .12em !important;
  text-transform: uppercase !important; color: var(--bastet-gold) !important; font-weight: 700 !important;
}

html body .bastet-status {
  display: inline-flex !important; align-items: center; gap: 9px;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important; padding: 7px 15px !important;
  font-size: .9rem !important; font-weight: 600 !important; color: var(--bastet-on-night) !important;
  margin: 0 !important;   /* el aire lo pone el bloque de datos, no la pastilla */
}

/* El bloque de dirección, horario, teléfono y email se separa de lo que tiene
   encima y de los botones. Antes iba todo seguido y se leía como un párrafo. */
html body .bastet-shop .wp-block-column .wp-block-columns {
  margin: var(--bastet-gap-l) 0 !important;
  gap: var(--bastet-gap-m) var(--bastet-gap-l) !important;
}
html body .bastet-shop .wp-block-column .wp-block-column { padding: 0 !important; }
html body .bastet-shop .wp-block-column .wp-block-column p { margin: 0 0 var(--bastet-gap-m) !important; }
html body .bastet-shop .wp-block-column .wp-block-column p:last-child { margin-bottom: 0 !important; }
html body .bastet-shop strong { margin-bottom: 4px; }
html body .bastet-status::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #64D98A; box-shadow: 0 0 0 4px rgba(100,217,138,.22);
}
html body .bastet-status.is-closed::before { background: #FF9E6B; box-shadow: 0 0 0 4px rgba(255,158,107,.22); }

/* --------------------------------------------------------------------------
   10. Marcas
   -------------------------------------------------------------------------- */

html body .bastet-brands .wp-block-image img {
  height: 38px !important; width: auto !important; max-width: 140px !important;
  object-fit: contain; border-radius: 0 !important;
  filter: grayscale(1); opacity: .68;
  transition: filter .2s ease, opacity .2s ease;
}
html body .bastet-brands .wp-block-image:hover img { filter: none; opacity: 1; }

/* --------------------------------------------------------------------------
   11. Preguntas frecuentes — bloque Detalles nativo, sin JavaScript
   -------------------------------------------------------------------------- */

html body .bastet-faq { max-width: 780px; margin-inline: auto; }
html body .bastet-faq .wp-block-details {
  border-bottom: 1px solid var(--bastet-line) !important; padding: 0 !important;
}
/*
 * El summary va en flex con todo centrado verticalmente.
 *
 * Antes llevaba min-height: 56px ADEMÁS de 20 px de padding arriba y abajo.
 * Como el min-height no absorbe el padding, cada pregunta cerrada medía 97 px
 * con el texto pegado arriba y la flecha flotando sola más abajo. De ahí que
 * se vieran raras.
 */
html body .bastet-faq .wp-block-details summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  min-height: 0 !important;
  padding: 18px 2px !important;
  font-family: var(--bastet-titulares) !important;
  font-weight: 400 !important;
  font-size: 1.15rem !important;
  line-height: 1.35 !important;
  color: var(--bastet-ink) !important;
  transition: color .18s ease;
}
html body .bastet-faq .wp-block-details summary::-webkit-details-marker,
html body .bastet-faq .wp-block-details summary::marker { display: none; content: ""; }

/* La flecha, dentro de un círculo: así se lee como algo que se pulsa */
html body .bastet-faq .wp-block-details summary::after {
  content: "";
  flex: none;
  width: 34px; height: 34px;
  border: 1.5px solid var(--bastet-line);
  border-radius: 50%;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 11px 2px, 2px 11px;
  background-repeat: no-repeat;
  background-position: center, center;
  color: var(--bastet-brand);
  transition: transform .2s ease, background-size .2s ease, border-color .18s ease;
}
/* Abierta: la barra vertical desaparece y queda un signo menos */
html body .bastet-faq .wp-block-details[open] summary::after {
  background-size: 11px 2px, 0 0;
  border-color: var(--bastet-brand);
}
html body .bastet-faq .wp-block-details summary:hover { color: var(--bastet-brand) !important; }
html body .bastet-faq .wp-block-details summary:hover::after { border-color: var(--bastet-brand); }

html body .bastet-faq .wp-block-details > :not(summary) {
  padding: 0 52px 22px 2px !important;
  margin: 0 !important;
  color: var(--bastet-ink-soft) !important;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   12. Bandas de contenido con imagen
   Tres variantes del mismo esqueleto: una columna de texto y otra de imagen.
   La posición de la imagen se cambia desde el editor moviendo la columna,
   no hace falta tocar CSS.
   -------------------------------------------------------------------------- */

/* Bienvenida: la imagen cubre la columna de arriba abajo */
html body .bastet-welcome { background-color: var(--bastet-surface-2) !important; overflow: hidden; }
html body .bastet-welcome > .wp-block-columns { align-items: stretch !important; }
html body .bastet-welcome .wp-block-column:has(> .wp-block-image) { align-self: stretch !important; }
html body .bastet-welcome .wp-block-image {
  margin: 0 !important; height: 100% !important; min-height: 320px;
  border-radius: var(--bastet-radius) !important; overflow: hidden;
}
html body .bastet-welcome .wp-block-image img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: 50% 40% !important;
  border-radius: 0 !important;
}

/* Nos preocupamos: banda turquesa con la silueta apoyada en el borde de abajo */
html body .bastet-care {
  background-color: var(--bastet-brand) !important;
  color: #FFFFFF !important;
  overflow: hidden;
  padding-bottom: 0 !important;
}
html body .bastet-care h2 { color: #FFFFFF !important; }
html body .bastet-care p { color: var(--bastet-on-brand) !important; }
html body .bastet-care .bastet-eyebrow { color: var(--bastet-gold) !important; }
html body .bastet-care > .wp-block-columns { align-items: flex-end !important; }
html body .bastet-care .wp-block-column:has(> .wp-block-image) {
  align-self: flex-end !important;
  padding: 0 !important;
}
html body .bastet-care .wp-block-image { margin: 0 !important; display: block; }
html body .bastet-care .wp-block-image img {
  width: 100% !important;
  max-height: 380px;
  object-fit: contain !important;
  object-position: 50% 100% !important;   /* pegada al borde inferior */
  border-radius: 0 !important;
  display: block;
}
/* La columna de texto recupera el hueco de abajo que la banda ya no tiene */
html body .bastet-care .wp-block-column:not(:has(> .wp-block-image)) {
  padding-bottom: var(--bastet-gap-l) !important;
}

/* Por qué elegirnos: fondo claro y silueta suelta */
html body .bastet-why { background-color: var(--bastet-surface) !important; }
html body .bastet-why .wp-block-image img {
  width: 100% !important; max-height: 380px; object-fit: contain; border-radius: 0 !important;
}
html body .bastet-why ol { list-style: none !important; margin: 24px 0 0 !important; padding: 0 !important; counter-reset: bastet; }
html body .bastet-why ol li {
  counter-increment: bastet; position: relative;
  padding-left: 54px !important; margin-bottom: 20px !important;
}
html body .bastet-why ol li::before {
  content: counter(bastet); position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background-color: var(--bastet-brand); color: #FFFFFF;
  display: grid; place-items: center;
  font-family: var(--bastet-titulares); font-weight: 400; font-size: 1.1rem;
}
html body .bastet-why ol li strong {
  display: block; font-family: var(--bastet-titulares) !important; font-weight: 400 !important;
  font-size: 1.15rem !important; margin-bottom: 2px; color: var(--bastet-ink) !important;
}

/* --------------------------------------------------------------------------
   13. Reseñas
   -------------------------------------------------------------------------- */

html body .bastet-reviews .wp-block-column {
  background-color: var(--bastet-surface) !important;
  border: 1px solid var(--bastet-line) !important;
  border-radius: var(--bastet-radius) !important;
  padding: 24px !important;
}
html body .bastet-reviews .wp-block-column p { margin: 0 0 10px !important; }
html body .bastet-reviews .bastet-review__who {
  font-weight: 700 !important; color: var(--bastet-ink) !important; font-size: .95rem !important;
}
html body .bastet-reviews .bastet-review__when { color: var(--bastet-ink-soft) !important; font-size: .85rem !important; }
html body .bastet-reviews .bastet-review__stars { color: var(--bastet-gold-ink) !important; letter-spacing: .14em; font-size: 1rem !important; }
html body .bastet-reviews .bastet-review__text { color: var(--bastet-ink) !important; }

/* --------------------------------------------------------------------------
   14. Rejillas: aquí es donde se decide la maquetación de las columnas
   -------------------------------------------------------------------------- */

/*
 * Las bandas no llevan padding vertical propio: 0 arriba y abajo, 16 px a los
 * lados. El aire entre secciones lo dan los márgenes de su contenido, en un
 * solo sitio, en vez de repartirse entre el padding en línea de cada sección
 * y estas reglas, que era de donde venían los espaciados descuadrados.
 *
 * El max() con env() es ese mismo 16 px, pero respetando la barra lateral del
 * sistema en móviles con muesca.
 */
html body .bastet-section,
html body .bastet-trust,
html body .bastet-award,
html body .bastet-season,
html body .bastet-welcome,
html body .bastet-care,
html body .bastet-why,
html body .bastet-shop,
html body .bastet-about {
  padding: var(--bastet-seccion)
           max(16px, env(safe-area-inset-right, 0px))
           var(--bastet-seccion)
           max(16px, env(safe-area-inset-left, 0px)) !important;
}

/* Las bandas estrechas respiran menos que las de contenido */
html body .bastet-trust { --bastet-seccion: 22px; }
html body .bastet-award { --bastet-seccion: 26px; }
/* Y estas dos, nada: la imagen llega al borde de la banda */
html body .bastet-welcome { --bastet-seccion: 0px; }
html body .bastet-care { --bastet-seccion: 0px; }
/* En el móvil la bienvenida se apila y el botón «Conocer la tienda» se queda
   a 20 px de la banda oscura de abajo, que es un choque. En escritorio sigue
   sin aire, que es como se pidió: allí la foto va a sangre contra el borde y
   el aire sobra. El padding va aquí y no en --bastet-seccion para no meter
   también aire arriba, donde la foto sí tiene que llegar al borde. */
@media (max-width: 781px) {
  html body .bastet-welcome { padding-bottom: clamp(40px, 5.5vw, 76px) !important; }
  /* Y «Nos preocupamos» necesita aire ARRIBA en el móvil: al apilarse, el
     antetítulo quedaba pegado al borde de la banda anterior. Abajo sigue a
     cero, que es donde la foto del perro tiene que llegar al borde. */
  html body .bastet-care { padding-top: clamp(40px, 5.5vw, 76px) !important; }
}
/* El ancho de contenido lo manda este tema, no Astra. Un solo sitio: --bastet-ancho. */
html body .bastet-section > *,
html body .bastet-trust > *,
html body .bastet-award > *,
html body .bastet-season > *,
html body .bastet-welcome > *,
html body .bastet-care > *,
html body .bastet-why > *,
html body .bastet-shop > *,
html body .bastet-about > * {
  max-width: var(--bastet-ancho) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

html body .bastet-trust .wp-block-columns { gap: 10px 28px !important; }
html body .bastet-species { gap: 22px !important; }
html body .bastet-brands__row {
  display: flex !important; flex-wrap: wrap !important;
  gap: 18px 34px !important; justify-content: center !important; align-items: center !important;
  margin-top: 28px !important;
}
html body .bastet-brands__row .wp-block-image { margin: 0 !important; }

/* Cabecera de sección: título a la izquierda y enlace a la derecha */
html body .bastet-head {
  display: flex !important; align-items: flex-end !important; justify-content: space-between !important;
  gap: 20px !important; flex-wrap: wrap !important; margin-bottom: 26px !important;
}
html body .bastet-head > * { margin: 0 !important; }
html body .bastet-head .wp-block-buttons { flex: none !important; }

/* La tira de garantías no se apila en móvil: se queda en dos por fila hasta
   que ya no caben. Tiene que reponer flex-direction porque la regla general
   de arriba pone en columna todas las demás. */
@media (max-width: 781px) {
  html body .bastet-portada .bastet-trust .wp-block-columns {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  html body .bastet-portada .bastet-trust .wp-block-column {
    flex-basis: calc(50% - 14px) !important;
  }
}
@media (max-width: 480px) {
  html body .bastet-portada .bastet-trust .wp-block-columns { flex-direction: column !important; }
  html body .bastet-portada .bastet-trust .wp-block-column { flex-basis: 100% !important; }
}

/* --------------------------------------------------------------------------
   15. Piezas que viajan al pie por atajo
   El pie lo monta Astra, así que estas reglas tienen que valer fuera de
   nuestras secciones: por eso no cuelgan de ninguna .bastet-*.
   -------------------------------------------------------------------------- */

html body .bastet-redes { display: inline-flex; gap: 8px; align-items: center; }
html body .bastet-redes a {
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  border: 1px solid currentColor !important;
  display: inline-grid !important; place-items: center;
  color: inherit !important; text-decoration: none !important;
  opacity: .85; transition: opacity .18s ease, background-color .18s ease;
}
html body .bastet-redes a:hover { opacity: 1; background-color: rgba(255,255,255,.14) !important; }
html body .bastet-redes svg { width: 19px; height: 19px; fill: currentColor; }

/* El logo sobre fondo oscuro cuando no hay versión en blanco.
   Nunca invert(): la casa del logo es amarilla y saldría azul. */
html body .bastet-logo { display: inline-flex; align-items: center; }
html body .bastet-logo--chip {
  background: #FFFFFF !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
}
html body .bastet-logo img { display: block; border-radius: 0 !important; }

/* La pastilla de estado también funciona suelta, fuera de la banda de tienda */
html body .bastet-status {
  display: inline-flex !important; align-items: center; gap: 9px;
  border-radius: 999px !important; padding: 7px 15px !important;
  font-size: .9rem !important; font-weight: 600 !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

/* --------------------------------------------------------------------------
   15 bis. Mi cuenta
   --------------------------------------------------------------------------
   El marcado entero lo pone WooCommerce y es el suyo de siempre, así que esto
   es solo CSS: no hay plantillas copiadas en el tema. Importa, porque las
   plantillas de WooCommerce copiadas se quedan viejas en cada actualización
   y luego nadie sabe por qué falla el carrito.

   Los campos de formulario se definen para TODA la tienda, no solo para esta
   página: el finalizar compra usa exactamente las mismas clases, así que
   cuando llegue su turno ya estará hecho.
   -------------------------------------------------------------------------- */

:root {
  --bastet-icon-panel:   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>');
  --bastet-icon-caja:    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5L12 3l9 4.5v9L12 21l-9-4.5z"/><path d="M3 7.5L12 12l9-4.5M12 12v9"/></svg>');
  --bastet-icon-baja:    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M4 18.5h16"/></svg>');
  --bastet-icon-persona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.6"/><path d="M4.5 20c.9-3.6 3.9-5.6 7.5-5.6s6.6 2 7.5 5.6"/></svg>');
  --bastet-icon-salir:   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 20H5.5A1.5 1.5 0 014 18.5v-13A1.5 1.5 0 015.5 4H10"/><path d="M15.5 8.5L19 12l-3.5 3.5M19 12H9"/></svg>');
  --bastet-icon-carro:   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h2.2l2.3 10.5a1.5 1.5 0 001.5 1.2h7.9a1.5 1.5 0 001.5-1.1L20.5 7H6"/><circle cx="9.5" cy="19.5" r="1.4"/><circle cx="17" cy="19.5" r="1.4"/></svg>');
  --bastet-icon-tarjeta: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3 10h18"/><path d="M7 15h3"/></svg>');
}

/* ---------- Campos de formulario de la tienda ---------- */

html body .woocommerce form .form-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}
html body .woocommerce form .form-row label {
  font-family: var(--bastet-texto) !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  line-height: 1.3 !important;
  color: var(--bastet-ink) !important;
  margin: 0 !important;
}
/* El asterisco de obligatorio en rojo sobre blanco no llega a 4,5:1 y además
   el rojo aquí no dice nada: se queda en turquesa, que sí es de la casa. */
html body .woocommerce .required {
  color: var(--bastet-brand) !important;
  text-decoration: none !important;
  border: 0 !important;
}

html body .woocommerce input[type="text"],
html body .woocommerce input[type="email"],
html body .woocommerce input[type="tel"],
html body .woocommerce input[type="password"],
html body .woocommerce input[type="number"],
html body .woocommerce textarea,
html body .woocommerce select,
html body .woocommerce .select2-selection--single {
  width: 100% !important;
  font-family: var(--bastet-texto) !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  color: var(--bastet-ink) !important;
  background-color: var(--bastet-surface) !important;
  border: 1px solid var(--bastet-line) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  min-height: 48px !important;   /* el dedo necesita 44 */
  box-shadow: none !important;
  transition: border-color .18s ease;
}
html body .woocommerce textarea { min-height: 120px !important; }
html body .woocommerce input:focus-visible,
html body .woocommerce textarea:focus-visible,
html body .woocommerce select:focus-visible {
  border-color: var(--bastet-brand) !important;
  outline: 3px solid var(--bastet-brand-hi) !important;
  outline-offset: 2px !important;
}
html body .woocommerce ::placeholder { color: var(--bastet-ink-soft) !important; opacity: 1; }

/* La casilla de «Recuérdame» y compañía */
html body .woocommerce .woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 400 !important;
  cursor: pointer;
}
html body .woocommerce .woocommerce-form__input-checkbox {
  width: 20px !important; height: 20px !important;
  min-height: 0 !important;
  margin: 0 !important;
  flex: none !important;
  accent-color: var(--bastet-brand);
}

/* El ojo de «ver la contraseña». WooCommerce lo clava arriba a la derecha y
   con los campos a 48 px se quedaba descolgado; aquí va centrado. */
html body .woocommerce .password-input {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}
/* El botón ya estaba centrado en el campo; lo que no lo estaba era el ojo
   DENTRO del botón. WooCommerce dibuja el ojo con un ::after de su fuente de
   iconos, en línea y con line-height de 16px, así que se apoyaba en la
   primera línea de un botón de 40 px de alto: salía pegado al borde de
   arriba del campo, medio fuera. Poniendo el botón en flex, el icono se
   centra solo. margin y translate a cero porque cualquiera de los dos
   descoloca un centrado hecho con top y transform. */
html body .woocommerce .show-password-input {
  position: absolute !important;
  top: 50% !important; right: 8px !important;
  transform: translateY(-50%) !important;
  translate: none !important;
  margin: 0 !important;
  width: 40px !important; height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--bastet-ink-soft) !important;
  cursor: pointer;
}
html body .woocommerce input[type="password"] { padding-right: 52px !important; }

/* ---------- Avisos ---------- */

html body .woocommerce-message,
html body .woocommerce-info,
html body .woocommerce-error {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 0 24px !important;
  padding: 16px 20px !important;
  border: 1px solid var(--bastet-line) !important;
  border-left: 4px solid var(--bastet-brand) !important;
  border-radius: 10px !important;
  background-color: var(--bastet-surface-2) !important;
  color: var(--bastet-ink) !important;
  font-family: var(--bastet-texto) !important;
  list-style: none !important;
}
html body .woocommerce-error { border-left-color: #B3261E !important; }
html body .woocommerce-message::before,
html body .woocommerce-info::before,
html body .woocommerce-error::before { content: none !important; }
/* En el marcado de WooCommerce el botón va ANTES del texto, así que en una
   fila flexible con margin-left:auto se iba arriba a la derecha y el texto
   caía debajo. Con order se queda detrás del texto, que es como se lee. */
html body .woocommerce-message .button,
html body .woocommerce-info .button,
html body .woocommerce-error .button {
  order: 2 !important;
  margin-left: auto !important;
}

/* ---------- La página ---------- */

html body.woocommerce-account .entry-title {
  font-family: var(--bastet-titulares) !important;
  font-weight: 400 !important;
  font-size: clamp(1.9rem, 4vw, 2.6rem) !important;
  line-height: 1.1 !important;
  color: var(--bastet-ink) !important;
  margin: 0 0 var(--bastet-gap-l) !important;
}
/* WooCommerce mete un h2 («Acceder») que salía más grande que el h1 de la
   página. El orden visual tiene que coincidir con el del encabezado. */
html body.woocommerce-account .woocommerce h2 {
  font-family: var(--bastet-titulares) !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
  color: var(--bastet-ink) !important;
  margin: 0 0 18px !important;
}

/* ---------- Sin sesión: acceso y registro ---------- */

/* Un formulario de acceso estirado a 969 px es ilegible: la vista tiene que
   recorrer toda la pantalla para ir de la etiqueta al campo. Se centra. */
html body.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: 460px !important;
  margin-inline: auto !important;
}
/* Si en Ajustes de WooCommerce se activa el registro desde esta página,
   WooCommerce añade la segunda columna y la tarjeta se ensancha sola. */
html body.woocommerce-account:not(.logged-in) .woocommerce:has(#customer_login .u-column2) {
  max-width: 920px !important;
}
html body #customer_login.u-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}
html body #customer_login.u-columns > .u-column1,
html body #customer_login.u-columns > .u-column2 {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  /* Para que las dos tarjetas acaben a la misma altura aunque el registro
     tenga un campo y el acceso tres. */
  display: flex !important;
  flex-direction: column !important;
}
html body #customer_login .woocommerce-form-login,
html body #customer_login .woocommerce-form-register { flex: 1 1 auto !important; }

/* WooCommerce maqueta esto con floats y se limpia con un clearfix metido en
   ::before y ::after. En una rejilla esos dos pseudoelementos dejan de ser
   un clearfix y pasan a ser CELDAS: se comían dos de las cuatro, así que
   «Acceder» se iba a la columna derecha y «Registrarse» caía a una segunda
   fila, con medio ancho en blanco. Medido en la web: col1 en x=517 y col2 en
   x=45 y=846; sin los pseudoelementos, las dos en y=373 y el bloque pasa de
   844 a 449 px de alto. Mismo cuento en la rejilla de direcciones. */
html body #customer_login.u-columns::before,
html body #customer_login.u-columns::after,
html body .woocommerce-Addresses.u-columns::before,
html body .woocommerce-Addresses.u-columns::after {
  display: none !important;
}

html body .woocommerce-form-login,
html body .woocommerce-form-register,
html body .woocommerce-MyAccount-content,
html body .woocommerce-MyAccount-navigation,
html body .woocommerce-Address {
  background-color: var(--bastet-surface) !important;
  border: 1px solid var(--bastet-line) !important;
  border-radius: var(--bastet-radius) !important;
  box-shadow: var(--bastet-shadow);
}
html body .woocommerce-form-login,
html body .woocommerce-form-register {
  padding: 28px !important;
  margin: 0 !important;
}
html body .woocommerce-form-login .button,
html body .woocommerce-form-register .button { width: 100% !important; }
html body .woocommerce-LostPassword {
  margin: 16px 0 0 !important;
  text-align: center !important;
  font-size: .95rem !important;
}
html body .woocommerce-LostPassword a { color: var(--bastet-brand) !important; }

/* ---------- Con sesión: navegación y contenido ---------- */

html body.woocommerce-account.logged-in .woocommerce {
  display: grid !important;
  grid-template-columns: 250px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
}
/* Dentro de .woocommerce hay más hijos de los que se ven: el clearfix que
   WooCommerce deja en ::before/::after y algún div que mete el plugin de
   pagos. En una rejilla cada uno de esos ocupa UNA CELDA, así que empujaban
   todo: la navegación se iba a la columna derecha a 922 px de ancho y el
   contenido caía debajo a la izquierda a 250.
   Por eso aquí no se deja colocar nada automáticamente: se dice exactamente
   en qué celda va cada bloque. Así da igual lo que se cuele por medio ahora
   o lo que meta el próximo plugin. */
html body.woocommerce-account.logged-in .woocommerce::before,
html body.woocommerce-account.logged-in .woocommerce::after { display: none !important; }
/* Los avisos van de lado a lado, encima de las dos columnas. */
html body.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}
html body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { grid-column: 1 !important; grid-row: 2 !important; }
html body.woocommerce-account.logged-in .woocommerce-MyAccount-content    { grid-column: 2 !important; grid-row: 2 !important; }

/* WooCommerce maqueta esto con floats y porcentajes (30% y 68%). Dentro de
   una rejilla eso se vuelve del 30% DE LA COLUMNA: la navegación se quedaba
   en 75 px y «Detalles de la cuenta» salía en tres líneas. */
html body .woocommerce-MyAccount-navigation,
html body .woocommerce-MyAccount-content {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
html body .woocommerce-MyAccount-navigation { padding: 10px !important; }
html body .woocommerce-MyAccount-navigation ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
html body .woocommerce-MyAccount-navigation li { margin: 0 !important; }
html body .woocommerce-MyAccount-navigation li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-family: var(--bastet-texto) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: var(--bastet-ink) !important;
  text-decoration: none !important;
  transition: background-color .18s ease, color .18s ease;
}
html body .woocommerce-MyAccount-navigation li a:hover,
html body .woocommerce-MyAccount-navigation li a:focus-visible {
  background-color: var(--bastet-surface-2) !important;
}
html body .woocommerce-MyAccount-navigation li.is-active a {
  background-color: var(--bastet-brand) !important;
  color: #FFFFFF !important;
}
/* Los iconos van de máscara y no de fondo para que tomen el color del texto:
   así en la fila activa se vuelven blancos solos. */
html body .woocommerce-MyAccount-navigation li a::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--bastet-icono, var(--bastet-icon-panel)) center / contain no-repeat;
          mask: var(--bastet-icono, var(--bastet-icon-panel)) center / contain no-repeat;
}
html body .woocommerce-MyAccount-navigation-link--dashboard      { --bastet-icono: var(--bastet-icon-panel); }
html body .woocommerce-MyAccount-navigation-link--orders         { --bastet-icono: var(--bastet-icon-caja); }
html body .woocommerce-MyAccount-navigation-link--downloads      { --bastet-icono: var(--bastet-icon-baja); }
html body .woocommerce-MyAccount-navigation-link--edit-address   { --bastet-icono: var(--bastet-icon-pin); }
html body .woocommerce-MyAccount-navigation-link--payment-methods{ --bastet-icono: var(--bastet-icon-tarjeta); }
html body .woocommerce-MyAccount-navigation-link--edit-account   { --bastet-icono: var(--bastet-icon-persona); }
html body .woocommerce-MyAccount-navigation-link--customer-logout{ --bastet-icono: var(--bastet-icon-salir); }
/* Salir no es una sección más: se separa y se apaga. */
/* Sin filetes entre las entradas: la fila activa ya separa de sobra y las
   líneas ensuciaban la tarjeta. */
html body .woocommerce-MyAccount-navigation-link { border: none !important; }
/* «Salir» se separa con aire, no con una raya. */
html body .woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 8px !important;
  padding-top: 0 !important;
}
html body .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--bastet-ink-soft) !important; }

html body .woocommerce-MyAccount-content { padding: 28px !important; }
html body .woocommerce-MyAccount-content > :first-child { margin-top: 0 !important; }
html body .woocommerce-MyAccount-content > :last-child { margin-bottom: 0 !important; }
html body .woocommerce-MyAccount-content p { color: var(--bastet-ink-soft) !important; }
html body .woocommerce-MyAccount-content a:not(.button) { color: var(--bastet-brand) !important; }

/* ---------- Pedidos ---------- */

html body .woocommerce-orders-table,
html body .woocommerce table.shop_table {
  width: 100% !important;
  border: 1px solid var(--bastet-line) !important;
  border-radius: var(--bastet-radius) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
}
html body .woocommerce table.shop_table th,
html body .woocommerce table.shop_table td {
  padding: 14px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bastet-line) !important;
  text-align: left !important;
  vertical-align: middle !important;
}
html body .woocommerce table.shop_table thead th {
  background-color: var(--bastet-surface-2) !important;
  font-family: var(--bastet-texto) !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--bastet-ink-soft) !important;
}
html body .woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0 !important; }
html body .woocommerce-orders-table__cell-order-number a { color: var(--bastet-brand) !important; font-weight: 700 !important; }

/* La tabla en móvil se convierte en fichas: una tabla de cinco columnas en
   375 px o se sale o se vuelve ilegible. WooCommerce ya pone en cada celda un
   data-title con el nombre de la columna, así que la etiqueta sale de ahí. */
@media (max-width: 760px) {
  html body .woocommerce table.shop_table { border: 0 !important; }
  html body .woocommerce table.shop_table thead { display: none !important; }
  html body .woocommerce table.shop_table tbody,
  html body .woocommerce table.shop_table tr,
  html body .woocommerce table.shop_table td { display: block !important; width: auto !important; }
  html body .woocommerce table.shop_table tr {
    border: 1px solid var(--bastet-line) !important;
    border-radius: var(--bastet-radius) !important;
    padding: 8px 16px !important;
    margin: 0 0 14px !important;
  }
  html body .woocommerce table.shop_table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--bastet-line) !important;
  }
  html body .woocommerce table.shop_table tr td:last-child { border-bottom: 0 !important; }
  html body .woocommerce table.shop_table td::before {
    content: attr(data-title);
    font-weight: 700 !important;
    font-size: .85rem !important;
    color: var(--bastet-ink-soft) !important;
  }
}

/* ---------- Direcciones ---------- */

html body .woocommerce-Addresses.u-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin: 0 !important;
}
html body .woocommerce-Addresses .woocommerce-Address { width: auto !important; float: none !important; padding: 22px !important; }
html body .woocommerce-Address-title { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 16px !important; }
html body .woocommerce-Address-title h3 { font-size: 1.15rem !important; margin: 0 !important; }
html body .woocommerce-Address-title .edit { color: var(--bastet-brand) !important; font-weight: 600 !important; font-size: .95rem !important; }
html body .woocommerce-Address address { font-style: normal !important; color: var(--bastet-ink-soft) !important; line-height: 1.6 !important; margin: 14px 0 0 !important; }

/* ---------- Móvil ---------- */

@media (max-width: 860px) {
  /* La navegación pasa a ser una fila de pestañas encima del contenido. */
  html body.woocommerce-account.logged-in .woocommerce { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  /* A una sola columna hay que deshacer la colocación a mano de arriba, o la
     navegación y el contenido se pelearían por la misma celda. */
  html body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { grid-column: 1 !important; grid-row: 2 !important; }
  html body.woocommerce-account.logged-in .woocommerce-MyAccount-content    { grid-column: 1 !important; grid-row: 3 !important; }
  html body .woocommerce-MyAccount-navigation { padding: 8px !important; }
  html body .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  html body .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  html body .woocommerce-MyAccount-navigation li a { white-space: nowrap !important; }
  /* En la fila horizontal, «Salir» también se separa con aire y no con raya. */
  html body .woocommerce-MyAccount-navigation-link--customer-logout {
    margin: 0 0 0 10px !important;
    padding: 0 !important;
    border: none !important;
  }
  html body .woocommerce-MyAccount-content { padding: 22px !important; }
  html body .woocommerce-Addresses.u-columns { grid-template-columns: 1fr !important; }
  html body #customer_login.u-columns { grid-template-columns: 1fr !important; }
  html body .woocommerce-form-login,
  html body .woocommerce-form-register { padding: 22px !important; }
}

/* --------------------------------------------------------------------------
   15 ter. Botón flotante del carrito
   --------------------------------------------------------------------------
   No es un carrito nuevo: abre el cajón lateral de Astra Pro. El marcado lo
   pinta inc/carrito-flotante.php y el número lo pone bastet.js leyendo el del
   carrito de la cabecera.

   Va abajo a la DERECHA. El de WhatsApp se mueve a la izquierda: dos burbujas
   en la misma esquina se pelean, y en el móvil además tapan el botón de
   «Añadir al carrito» de las fichas.
   -------------------------------------------------------------------------- */

html body .bastet-carrito {
  position: fixed !important;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  width: 58px; height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: var(--bastet-brand) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 30px -10px rgba(0,55,53,.55);
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
html body .bastet-carrito:hover {
  background-color: var(--bastet-brand-hi) !important;
  color: var(--bastet-ink-brand) !important;
  transform: translateY(-2px);
}
html body .bastet-carrito:focus-visible {
  outline: 3px solid var(--bastet-brand-hi) !important;
  outline-offset: 3px !important;
}
html body .bastet-carrito__icono {
  width: 26px; height: 26px;
  background-color: currentColor;
  -webkit-mask: var(--bastet-icon-carro) center / contain no-repeat;
          mask: var(--bastet-icon-carro) center / contain no-repeat;
}
/* El número, en oro con tinta: blanco sobre oro es el peor par de la paleta. */
html body .bastet-carrito__num {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 24px; height: 24px;
  padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background-color: var(--bastet-gold) !important;
  color: var(--bastet-ink) !important;
  font-family: var(--bastet-texto) !important;
  font-weight: 700 !important;
  font-size: .8rem !important;
  line-height: 1 !important;
  border: 2px solid var(--bastet-surface);
}
/* Con el carrito vacío no pinta nada: es un botón que no lleva a ningún sitio
   útil y encima tapa contenido. El atributo hidden lo quita bastet.js en
   cuanto hay algo dentro. */
html body .bastet-carrito[hidden],
html body .bastet-carrito[data-cuenta="0"] { display: none !important; }

/* Mientras el cajón está abierto el botón sobra: ya estás en el carrito. */
html body:has(.astra-cart-drawer.active) .bastet-carrito {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 600px) {
  html body .bastet-carrito { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}

/* --------------------------------------------------------------------------
   15 quater. Cajón lateral del carrito
   --------------------------------------------------------------------------
   El cajón lo pone Astra Pro (módulo de WooCommerce, carrito tipo «flyout»).
   Aquí solo se le da forma: ni una plantilla copiada ni un plugin más.

   La estructura que monta Astra, por si hay que tocarla:

     .astra-cart-drawer
       .astra-cart-drawer-header     → botón de cerrar + título
       .astra-cart-drawer-content
         .widget_shopping_cart_content
           ul.woocommerce-mini-cart  → un li por producto
           p.woocommerce-mini-cart__total
           p.woocommerce-mini-cart__buttons
   -------------------------------------------------------------------------- */

html body .astra-cart-drawer {
  width: min(400px, 92vw) !important;   /* 256 px no daban para una ficha */
  background-color: var(--bastet-surface) !important;
  color: var(--bastet-ink) !important;
  box-shadow: -24px 0 60px -30px rgba(0,31,30,.5) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;   /* lo que se desplaza es la lista, no el panel */
}

/* Un panel que tapa la página pide fondo oscuro detrás: separa el carrito de
   lo que hay debajo y da una zona grande donde pulsar para cerrar. Astra no
   lo trae; el clic y la tecla Escape los atiende bastet.js. */
html body:has(.astra-cart-drawer.active)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(0, 31, 30, .45);
}

/* ---------- Cabecera ---------- */

html body .astra-cart-drawer-header {
  /* Astra la saca del flujo con position:absolute, así que el contenido
     arrancaba DEBAJO de ella y la lista de productos se pintaba encima del
     título. Vuelve al flujo y la columna flexible coloca cabecera, lista,
     subtotal y botones en orden. */
  position: static !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--bastet-line) !important;
  background-color: var(--bastet-surface) !important;
  flex: none !important;
}
html body .astra-cart-drawer-title {
  font-family: var(--bastet-titulares) !important;
  font-weight: 400 !important;
  font-size: 1.25rem !important;
  line-height: 1.2 !important;
  color: var(--bastet-ink) !important;
  order: 1;
}
/* El de cerrar va el primero en el HTML; se manda al final para que el título
   mande y el aspa quede donde se la busca, arriba a la derecha. */
html body .astra-cart-drawer-close {
  /* Astra lo clava con position:absolute arriba a la derecha y se montaba
     encima del título. Vuelve al flujo para que la cabecera lo coloque. */
  position: static !important;
  inset: auto !important;
  order: 2;
  margin-left: auto !important;
  flex: none !important;
  width: 40px !important; height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid var(--bastet-line) !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  color: var(--bastet-ink) !important;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
html body .astra-cart-drawer-close:hover {
  background-color: var(--bastet-surface-2) !important;
  border-color: var(--bastet-ink-soft) !important;
}
html body .astra-cart-drawer-close:focus-visible {
  outline: 3px solid var(--bastet-brand-hi) !important;
  outline-offset: 2px !important;
}
html body .astra-cart-drawer-close svg { width: 20px !important; height: 20px !important; }

/* ---------- Cuerpo ---------- */

/* La lista es lo único que se desplaza: el subtotal y los botones se quedan
   abajo siempre a la vista. Con el carrito lleno, si no, hay que bajar hasta
   el final para encontrar «Finalizar compra». */
html body .astra-cart-drawer-content { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; padding: 0 !important; }
html body .astra-cart-drawer-content .widget_shopping_cart,
html body .astra-cart-drawer-content .widget_shopping_cart_content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .astra-cart-drawer .woocommerce-mini-cart {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 20px !important;
}

/* ---------- Cada producto ---------- */

/* La fila de cada producto.
   La foto NO va dentro del flujo: ocupa su columna con posicionado absoluto y
   se centra contra la fila entera. Es lo que arregla las dos cosas que se
   veían mal.
   Primera: la foto salía 32 px más alta que su caja, justo la mitad de su
   alto, porque Astra le aplica un `transform` que sigue valiendo aunque se le
   quite el posicionado absoluto. Aquí el desplazamiento es nuestro y va con
   su `top: 50%`.
   Segunda: el nombre iba centrado dentro de una caja de 64 px, la que marcaba
   la foto, así que entre el nombre y el precio quedaban 42 px de aire. Con la
   foto fuera del flujo, el nombre y el precio se apilan pegados —7 px— y el
   bloque entero queda centrado contra la foto. La fila baja de 127 px a 76. */
html body .astra-cart-drawer .mini_cart_item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) 30px !important;
  column-gap: 12px !important;
  row-gap: 2px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--bastet-line) !important;
  list-style: none !important;
}
html body .astra-cart-drawer .mini_cart_item:last-child { border-bottom: 0 !important; }

html body .astra-cart-drawer .mini_cart_item img {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  translate: none !important;
  float: none !important;
  margin: 0 !important;
  width: 64px !important; height: 64px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  border: 1px solid var(--bastet-line) !important;
  background-color: var(--bastet-surface-2) !important;
}

/* El enlace lleva dentro la foto y el nombre, pero como la foto está fuera
   del flujo, aquí solo queda el nombre. */
html body .astra-cart-drawer .mini_cart_item > a:not(.remove) {
  grid-column: 2 !important; grid-row: 1 !important;
  display: block !important;
  text-decoration: none !important;
  font-family: var(--bastet-texto) !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  line-height: 1.3 !important;
  color: var(--bastet-ink) !important;
}
html body .astra-cart-drawer .mini_cart_item > a:not(.remove):hover { color: var(--bastet-brand) !important; }

html body .astra-cart-drawer .mini_cart_item .quantity {
  grid-column: 2 !important; grid-row: 2 !important;
  padding: 0 !important;
  font-family: var(--bastet-texto) !important;
  font-size: .9rem !important;
  color: var(--bastet-ink-soft) !important;
}
html body .astra-cart-drawer .mini_cart_item .quantity .amount { color: var(--bastet-ink) !important; font-weight: 700 !important; }

/* Quitar del carrito. En rojo solo al pasar por encima: en reposo no tiene
   que competir con el producto, pero al ir a pulsarlo sí debe decir que
   borra. */
html body .astra-cart-drawer .mini_cart_item a.remove {
  /* También venía en absoluto, pegada arriba a la derecha: cuarta cosa de
     este cajón que Astra saca del flujo. */
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  width: 30px !important; height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  color: var(--bastet-ink-soft) !important;
  font-size: 0 !important;
  transition: background-color .18s ease, color .18s ease;
}
html body .astra-cart-drawer .mini_cart_item a.remove:hover {
  background-color: var(--bastet-surface-2) !important;
  color: #B3261E !important;
}
html body .astra-cart-drawer .mini_cart_item a.remove:focus-visible {
  outline: 3px solid var(--bastet-brand-hi) !important;
  outline-offset: 2px !important;
}
/* Astra le cuelga al aspa un ::before decorativo a tamaño completo con radio
   100%. Mientras el aspa iba en absoluto, ese pseudoelemento se medía contra
   el propio botón y no se notaba. Al devolver el aspa al flujo pasó a medirse
   contra la fila —que sí está posicionada— y dibujaba un óvalo de 358×76 px
   alrededor del nombre y el precio. Fuera: el hover y el anillo de foco ya los
   ponemos nosotros. */
html body .astra-cart-drawer .mini_cart_item a.remove::before,
html body .astra-cart-drawer .mini_cart_item a.remove::after { content: none !important; }
html body .astra-cart-drawer .mini_cart_item a.remove svg { width: 16px !important; height: 16px !important; }

/* ---------- Subtotal y botones ---------- */

html body .astra-cart-drawer .woocommerce-mini-cart__total {
  flex: none !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  border-top: 1px solid var(--bastet-line) !important;
  background-color: var(--bastet-surface-2) !important;
}
html body .astra-cart-drawer .woocommerce-mini-cart__total strong {
  font-family: var(--bastet-texto) !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  color: var(--bastet-ink-soft) !important;
}
html body .astra-cart-drawer .woocommerce-mini-cart__total .amount {
  font-family: var(--bastet-titulares) !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  color: var(--bastet-ink) !important;
}

html body .astra-cart-drawer .woocommerce-mini-cart__buttons {
  flex: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom)) !important;
  background-color: var(--bastet-surface) !important;
  border-top: 1px solid var(--bastet-line) !important;
}
html body .astra-cart-drawer .woocommerce-mini-cart__buttons .button {
  width: 100% !important;
  justify-content: center !important;
  margin: 0 !important;
  min-height: 48px !important;
}
/* «Finalizar compra» es la acción de la pantalla: va en oro, como el resto de
   llamadas principales del sitio. «Ver carrito» queda de secundaria. */
html body .astra-cart-drawer .woocommerce-mini-cart__buttons .checkout {
  order: -1;
  background-color: var(--bastet-gold) !important;
  color: var(--bastet-ink) !important;
  border-color: var(--bastet-gold) !important;
}
html body .astra-cart-drawer .woocommerce-mini-cart__buttons .checkout:hover,
html body .astra-cart-drawer .woocommerce-mini-cart__buttons .checkout:focus-visible {
  background-color: var(--bastet-gold-hi) !important;
  border-color: var(--bastet-gold-hi) !important;
  color: var(--bastet-ink) !important;
}
html body .astra-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout) {
  background-color: transparent !important;
  color: var(--bastet-brand) !important;
  border: 2px solid currentColor !important;
}
html body .astra-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout):hover,
html body .astra-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout):focus-visible {
  background-color: var(--bastet-brand) !important;
  color: #FFFFFF !important;
}

/* ---------- Carrito vacío ---------- */

/* El mensaje sale DOS veces: el de WooCommerce y el que Astra repite dentro
   de su propio bloque. Se deja el de Astra, que además trae botón. */
html body .astra-cart-drawer .widget_shopping_cart_content > .woocommerce-mini-cart__empty-message { display: none !important; }

html body .astra-cart-drawer .ast-mini-cart-empty {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  padding: 40px 24px !important;
  text-align: center !important;
}
html body .astra-cart-drawer .woocommerce-mini-cart__empty-message {
  margin: 0 !important;
  font-family: var(--bastet-texto) !important;
  font-size: 1rem !important;
  color: var(--bastet-ink-soft) !important;
}
html body .astra-cart-drawer .ast-mini-cart-empty .button {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
}

@media (max-width: 480px) {
  html body .astra-cart-drawer-header { padding: 16px !important; }
  html body .astra-cart-drawer .woocommerce-mini-cart { padding: 4px 16px !important; }
  html body .astra-cart-drawer .woocommerce-mini-cart__total,
  html body .astra-cart-drawer .woocommerce-mini-cart__buttons { padding-inline: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .astra-cart-drawer,
  html body .astra-cart-drawer-close,
  html body .astra-cart-drawer .mini_cart_item a.remove { transition: none !important; }
}

/* --------------------------------------------------------------------------
   15 quinquies. Mega menú de Perros y Gatos
   --------------------------------------------------------------------------
   El mega menú lo monta el módulo Nav Menu de Astra Pro y ya estaba activo:
   Perros abre cuatro columnas y Gatos cinco. Aquí solo se le da forma.

   De dónde venía: el panel medía 651 px de alto porque Astra pone 14,4 px de
   relleno arriba y abajo en CADA enlace, y los títulos de columna salían
   exactamente igual que sus hijos (mismo tamaño, mismo color, mismo peso),
   así que no había ninguna jerarquía: eran 25 enlaces sueltos en cuatro
   montones.

   El número de columnas no se escribe: `auto-fit` reparte las que haya, así
   que si mañana se añade o se quita una categoría, la rejilla se recoloca.

   Y se abre también con el teclado. Astra lo abre solo con :hover, así que
   las 25 categorías de cada especie eran inalcanzables sin ratón.
   -------------------------------------------------------------------------- */

@media (min-width: 921px) {

  /* El panel se ancla a la FILA del menú y no a la lista.
     Astra lo coloca con JavaScript al entrar el ratón, calculando un `left`
     negativo a medida. Con el teclado ese cálculo no llega a hacerse nunca y
     el panel se abría sin situar, a 16.900 px a la izquierda de la pantalla
     (medido en Perros y en Gatos). Haciendo que su contenedor de referencia
     sea la fila, la posición sale sola del CSS y vale igual para el ratón que
     para el teclado, sin un solo byte de JavaScript.
     La lista <ul> es `position: relative` en Astra, y por eso el panel se
     anclaba a ella (770 px) en vez de al ancho de contenido (969). */
  html body .ast-below-header-bar .ast-builder-grid-row { position: relative !important; }
  html body .ast-below-header-bar .main-header-menu:has(.astra-megamenu-li) { position: static !important; }
  html body .astra-megamenu-li { position: static !important; }

  html body .astra-megamenu-li > .astra-megamenu {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    padding: 26px 28px !important;
    background-color: var(--bastet-surface) !important;
    border: 1px solid var(--bastet-line) !important;   /* era el oro viejo */
    border-radius: var(--bastet-radius) !important;
    box-shadow: var(--bastet-shadow) !important;
  }

  /* Abierto: con el ratón y TAMBIÉN con el teclado.
     Astra lo abre solo con :hover, así que con el tabulador el menú no se
     abría nunca: 25 categorías por especie inalcanzables sin ratón. Con
     :focus-within se abre al llegar el foco a cualquier enlace de dentro. */
  html body .astra-megamenu-li:hover > .astra-megamenu,
  html body .astra-megamenu-li:focus-within > .astra-megamenu {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 0 !important;
    align-items: start !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body .astra-megamenu-li:hover > .astra-megamenu > li,
  html body .astra-megamenu-li:focus-within > .astra-megamenu > li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
  }
  /* Las listas de cada columna son desplegables flotantes cuando el menú
     está cerrado; dentro del panel tienen que ser listas normales. */
  html body .astra-megamenu-li:hover > .astra-megamenu > li > .sub-menu,
  html body .astra-megamenu-li:focus-within > .astra-megamenu > li > .sub-menu {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* El filete entre columnas, con nuestra línea. El aire entre columnas lo
     da el relleno y no el gap, para que el filete quede centrado. */
  html body .astra-megamenu > li {
    padding: 0 26px !important;
    border-right: 1px solid var(--bastet-line) !important;
  }
  html body .astra-megamenu > li:first-child { padding-left: 0 !important; }
  html body .astra-megamenu > li:last-child { padding-right: 0 !important; border-right: 0 !important; }

  /* ---------- Título de columna ---------- */

  html body .astra-megamenu > li > a {
    display: block !important;
    font-family: var(--bastet-titulares) !important;
    font-weight: 400 !important;
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    color: var(--bastet-ink) !important;
    padding: 0 0 10px !important;
    margin: 0 0 10px !important;
    border-bottom: 1px solid var(--bastet-line) !important;
    background: transparent !important;
  }
  html body .astra-megamenu > li > a:hover,
  html body .astra-megamenu > li > a:focus-visible {
    color: var(--bastet-brand) !important;
    background: transparent !important;
  }
  /* Las columnas sin hijos (Antiparasitarios, Seguridad en el hogar) son un
     enlace suelto, no un grupo: sin filete debajo no parecen una lista a la
     que le falten elementos. */
  html body .astra-megamenu > li:not(:has(> ul)) > a {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ---------- Enlaces de dentro ---------- */

  html body .astra-megamenu > li > .sub-menu > li { margin: 0 !important; }
  html body .astra-megamenu > li > .sub-menu > li > a {
    display: block !important;
    font-family: var(--bastet-texto) !important;
    font-weight: 400 !important;
    font-size: .95rem !important;
    line-height: 1.3 !important;
    color: var(--bastet-ink-soft) !important;
    /* 7 px arriba y abajo en vez de los 14,4 de Astra: la fila baja de 52 px
       a 33 y el panel entero de 651 a unos 420. */
    padding: 7px 10px !important;
    margin: 0 -10px !important;
    border-radius: 8px !important;
    background: transparent !important;
    transition: background-color .15s ease, color .15s ease;
  }
  html body .astra-megamenu > li > .sub-menu > li > a:hover,
  html body .astra-megamenu > li > .sub-menu > li > a:focus-visible {
    background-color: var(--bastet-surface-2) !important;
    color: var(--bastet-brand) !important;
  }
  html body .astra-megamenu > li > .sub-menu > li > a:focus-visible {
    outline: 3px solid var(--bastet-brand-hi) !important;
    outline-offset: -1px !important;
  }

  /* Astra deja una flecha en los títulos de columna que aquí no significa
     nada: dentro del panel no hay nada más que desplegar. */
  html body .astra-megamenu > li > a > .icon-arrow { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .astra-megamenu > li > .sub-menu > li > a { transition: none !important; }
}

/* --------------------------------------------------------------------------
   16. Movimiento reducido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html body .bastet-hero.is-ready .bastet-slide { transition: none !important; }
  html body .bastet-hero__dot.is-timing span::after { animation: none !important; width: 100% !important; }
  html body .bastet-species .wp-block-column:hover { transform: none !important; }
  html body .bastet-faq .wp-block-details summary::after { transition: none !important; }
  html body .bastet-brands .wp-block-image img { transition: none !important; }
  html body .bastet-carrito { transition: none !important; }
  html body .bastet-carrito:hover { transform: none !important; }
}