/*
Theme Name: Nevera Padel v2
Theme URI: https://neverapadel.com
Author: Nevera Padel
Author URI: https://neverapadel.com
Description: Tema de bloques para Nevera Padel. Fondo blanco, tipografia condensada alojada en el propio tema, retícula de producto sin tarjetas y ficha de producto con columna de compra fija. Diseñado para WooCommerce.
Version: 2.2.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nevera-padel-v2
Tags: e-commerce, full-site-editing, block-patterns, custom-colors, custom-logo, wide-blocks, sticky-post
*/

/* ==================================================================
   Nevera Padel v2
   Los colores, tamanos y tipografias viven en theme.json y llegan
   aqui como variables --wp--preset--*. Este archivo solo tiene lo
   que theme.json no puede hacer: pseudoclases, animacion, reticulas
   y los arreglos de WooCommerce.
   ================================================================== */

:root {
  --np-linea: 1px solid var(--wp--preset--color--linea);
  --np-linea-fuerte: 1px solid var(--wp--preset--color--tinta);
  --np-rapido: 140ms ease-out;
  --np-alto-encabezado: 4.5rem;
  --np-pegado: calc(var(--np-alto-encabezado) + 1.5rem);
}

html { scroll-padding-top: calc(var(--np-alto-encabezado) + 1rem); }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--wp--preset--color--blanco);
}

/* Los titulares son condensados y en mayusculas. El interletraje se
   queda en cero o positivo: en negativo, si la fuente tarda en cargar,
   las letras del respaldo se montan unas sobre otras. */
h1, h2, h3, h4,
.wp-block-heading,
.np-titular,
.woocommerce div.product .product_title {
  letter-spacing: 0.005em;
  font-kerning: normal;
}
/* Interlineado minimo de los titulares en mayusculas.
   Medido sobre el propio Oswald 600: una mayuscula acentuada (Á É Í
   Ó Ú) sube hasta 1.071em sobre la linea base y la Q baja a 0.160em
   por debajo. Con menos de 1.231 de interlineado, el acento de un
   renglon se mete en la cola del renglon de arriba y se ven las
   letras encimadas. De ahi el 1.25. */

/* Accesibilidad: el foco siempre se ve */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--tinta);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   1. Barra de avisos (marquesina)
   Sin medidas en porcentaje: la pista mide max-content, los dos
   grupos son identicos y la animacion recorre exactamente -50%,
   que es el ancho de un grupo. Asi encaja en cualquier pantalla y
   los textos no se montan en celular.
   ------------------------------------------------------------------ */
.np-aviso {
  background: var(--wp--preset--color--tinta);
  color: var(--wp--preset--color--blanco);
  font-family: var(--wp--preset--font-family--texto);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-block: 0.65rem;
  overflow: hidden;
  display: flex;
  position: relative;
  z-index: 60;
}
.np-aviso__pista {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  animation: np-correr 34s linear infinite;
  will-change: transform;
}
.np-aviso__grupo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-around;
  gap: 3.5rem;
  padding-right: 3.5rem;
  min-width: 50vw;
  white-space: nowrap;
}
.np-aviso__grupo > span { flex: 0 0 auto; }
@keyframes np-correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.np-aviso:hover .np-aviso__pista,
.np-aviso:focus-within .np-aviso__pista { animation-play-state: paused; }
/* Si el sistema tiene las animaciones apagadas (Windows lo permite),
   se muestra un solo grupo centrado y quieto, nunca los dos encimados. */
@media (prefers-reduced-motion: reduce) {
  .np-aviso__pista { animation: none; width: 100%; }
  .np-aviso__grupo[aria-hidden="true"] { display: none; }
  .np-aviso__grupo { min-width: 100%; padding-right: 0; justify-content: center; gap: 2rem; }
}
@media (max-width: 600px) {
  .np-aviso { letter-spacing: 0.06em; }
  .np-aviso__grupo { gap: 2.5rem; padding-right: 2.5rem; min-width: 0; }
}
/* En celular con las animaciones apagadas no caben los tres avisos
   en una linea, y encimarlos es justo el error que estamos
   arreglando: se deja solo el primero. */
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .np-aviso__grupo > span + span { display: none; }
}

/* ------------------------------------------------------------------
   2. Encabezado
   ------------------------------------------------------------------ */
/* Ojo con este bloque: el contenedor NO puede ser flex.
   WordPress le pone al hijo la clase alignwide y lo limita a 84rem
   con margenes automaticos. Si el contenedor es flex, ese hijo pasa
   a ser un elemento flexible, se encoge al ancho de su contenido y
   queda centrado, asi que el logo deja de estar pegado a la
   izquierda y el "space-between" de dentro no reparte nada. */
.np-encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wp--preset--color--blanco);
  border-bottom: var(--np-linea);
}
.np-encabezado > .wp-block-group,
.np-encabezado > .alignwide {
  min-height: var(--np-alto-encabezado);
}
.np-encabezado .wp-block-site-logo img { max-height: 40px; width: auto; }
.np-encabezado .wp-block-navigation a {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--wp--preset--font-size--xs);
}
.np-encabezado .wp-block-navigation a:hover { text-decoration: none; }
.np-encabezado .wp-block-navigation .wp-block-navigation-item { position: relative; }
.np-encabezado .wp-block-navigation .wp-block-navigation-item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--np-rapido);
}
.np-encabezado .wp-block-navigation .wp-block-navigation-item > a:hover::after,
.np-encabezado .wp-block-navigation .current-menu-item > a::after { transform: scaleX(1); }

/* El panel del menu en celular. WordPress le pone
   background-color: inherit, que resuelve a transparente, y los
   enlaces quedan encima del contenido de la pagina. */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--blanco);
  color: var(--wp--preset--color--tinta);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}
.wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--tinta); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
  font-size: var(--wp--preset--font-size--lg);
  padding-block: 0.5rem;
}

/* Acciones de la derecha: buscar y carrito */
.np-acciones {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 0 0 auto;
}
.np-acciones .wp-block-search { margin: 0; }
.np-acciones .wp-block-search__input {
  border: var(--np-linea);
  border-radius: 0;
  padding: 0.5rem 0.7rem;
  font-size: var(--wp--preset--font-size--xs);
  width: 11rem;
  background: var(--wp--preset--color--blanco);
}
.np-acciones .wp-block-search__button {
  border-radius: 0;
  padding: 0.5rem 0.9rem;
  font-size: var(--wp--preset--font-size--xs);
}
.np-carrito {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--np-rapido);
}
.np-carrito:hover { text-decoration: none; border-bottom-color: var(--wp--preset--color--tinta); }
.np-carrito__num {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.25rem;
  background: var(--wp--preset--color--tinta);
  color: var(--wp--preset--color--blanco);
  font-size: 0.6875rem;
  line-height: 1;
}
.np-carrito__num:empty, .np-carrito--vacio .np-carrito__num { display: none; }
@media (max-width: 900px) {
  .np-acciones .wp-block-search { display: none; }
}

/* ------------------------------------------------------------------
   3. Portada
   ------------------------------------------------------------------ */
.np-titular {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--display);
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  margin: 0;
}
/* La palabra que carga la marca va hueca: el unico gesto decorativo */
.np-hueco {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--wp--preset--color--tinta);
  paint-order: stroke fill;
}
@media (max-width: 782px) { .np-hueco { -webkit-text-stroke-width: 1px; } }

.np-dato {
  display: grid;
  gap: 0;
  border-top: var(--np-linea-fuerte);
}
.np-dato > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: var(--np-linea);
  font-size: var(--wp--preset--font-size--sm);
}
.np-dato > div > p { margin: 0; }
.np-dato > div > p:first-child {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  color: var(--wp--preset--color--apagado);
}
.np-dato > div > p:last-child { font-weight: 600; text-align: right; }

/* Tira de garantias sobre fondo negro.
   Son bloques nativos (grupo + columnas), asi que los textos se
   editan desde el editor como cualquier parrafo. */
.np-tira {
  background: var(--wp--preset--color--tinta);
  color: var(--wp--preset--color--blanco);
}
.np-tira .wp-block-columns { gap: 0 !important; margin-block: 0; }
.np-tira .wp-block-column {
  padding: var(--wp--preset--spacing--30);
  border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--blanco) 20%, transparent);
}
.np-tira .wp-block-column:first-child { border-left: 0; }
.np-tira h3 {
  color: var(--wp--preset--color--blanco);
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.1;
  margin: 0 0 0.35rem;
}
.np-tira p {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  color: color-mix(in srgb, var(--wp--preset--color--blanco) 72%, transparent);
  line-height: 1.55;
}
@media (max-width: 781px) {
  .np-tira .wp-block-column {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--blanco) 20%, transparent);
  }
  .np-tira .wp-block-column:first-child { border-top: 0; }
}

/* Tira de marcas, puro tipo */
.np-marcas {
  padding-block: var(--wp--preset--spacing--30) !important;
  border-top: var(--np-linea);
  border-bottom: var(--np-linea);
}
.np-marcas p { margin: 0; }
.np-marcas p:first-child {
  font-size: var(--wp--preset--font-size--xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--wp--preset--color--apagado);
}
.np-marcas p:last-child {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--lg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  word-spacing: 0.6em;
}

/* Bloques de categoria */
.np-categorias { margin-block: 0; }
.np-categorias .wp-block-column { display: flex; }
.np-cat {
  position: relative;
  display: flex !important;
  flex-direction: column;
  /* Arriba el titulo y abajo el enlace: si se alinea todo al pie,
     los tres titulos quedan a distinta altura segun cuanto ocupe su
     parrafo, y se ve descuadrado. */
  justify-content: flex-start;
  flex: 1 1 auto;
  min-height: 14rem;
  padding: var(--wp--preset--spacing--30) !important;
  overflow: hidden;
  border: var(--np-linea-fuerte);
  transition: transform var(--np-rapido);
}
.np-cat:hover { transform: translateY(-3px); }
.np-cat h3 {
  font-size: var(--wp--preset--font-size--2xl);
  margin: 0 0 0.4rem;
  line-height: 1;
}
.np-cat p {
  margin: 0 0 1.1rem;
  font-size: var(--wp--preset--font-size--sm);
  max-width: 24ch;
  line-height: 1.5;
}
.np-cat p:last-child {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 1.1rem;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  max-width: none;
}
.np-cat p:last-child a { border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.np-cat p:last-child a:hover { text-decoration: none; opacity: 0.7; }
.np-cat--negra { background: var(--wp--preset--color--tinta); border-color: var(--wp--preset--color--tinta); }
.np-cat--negra, .np-cat--negra h3, .np-cat--negra a { color: var(--wp--preset--color--blanco); }
.np-cat--pista { background: var(--wp--preset--color--pista); border-color: var(--wp--preset--color--pista); }
.np-cat--pista, .np-cat--pista h3, .np-cat--pista a { color: var(--wp--preset--color--blanco); }
.np-cat--clara { background: var(--wp--preset--color--blanco); }

/* Encabezado de seccion: titulo a la izquierda, enlace a la derecha */
.np-seccion__cabeza {
  align-items: flex-end;
  margin-bottom: var(--wp--preset--spacing--30);
}
.np-seccion__cabeza h2 { margin: 0; }
.np-seccion__cabeza p {
  margin: 0.4rem 0 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--apagado);
  max-width: 46ch;
}
.np-seccion__ir p,
p.np-seccion__ir {
  margin: 0;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.np-seccion__ir a,
p.np-seccion__ir a { border-bottom: 2px solid var(--wp--preset--color--tinta); padding-bottom: 2px; }
.np-seccion__ir a:hover { text-decoration: none; color: var(--wp--preset--color--pista); border-bottom-color: var(--wp--preset--color--pista); }

/* ------------------------------------------------------------------
   4. Reticula de producto
   El arreglo del hueco: WooCommerce le mete un ::before y un ::after
   a ul.products para limpiar los float. Al convertir la lista en
   grid, esos dos pseudoelementos se vuelven celdas y se comen el
   primer lugar de la fila. Hay que apagarlos.
   ------------------------------------------------------------------ */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after,
.woocommerce div.product::before,
.woocommerce div.product::after,
.woocommerce .woocommerce-tabs::before,
.woocommerce .woocommerce-tabs::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products,
.woocommerce .products ul,
.wc-block-grid__products,
.wp-block-woocommerce-product-template {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
@media (max-width: 1100px) {
  .woocommerce ul.products,
  .woocommerce .products ul,
  .wc-block-grid__products,
  .wp-block-woocommerce-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 782px) {
  .woocommerce ul.products,
  .woocommerce .products ul,
  .wc-block-grid__products,
  .wp-block-woocommerce-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
  }
}

.woocommerce ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0;
  clear: none !important;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { display: block; }

/* Sin tarjeta, sin sombra, sin esquina redonda: manda la foto.
   El fondo de la foto es blanco igual que el de la pagina, asi que
   el producto parece recortado sobre el papel. */
.woocommerce ul.products li.product a img {
  margin: 0 0 0.9rem;
  border-radius: 0;
  background: var(--wp--preset--color--blanco);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 0.5rem;
  transition: opacity var(--np-rapido), transform var(--np-rapido);
}
.woocommerce ul.products li.product:hover a img { opacity: 0.9; transform: scale(1.02); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--texto) !important;
  font-size: var(--wp--preset--font-size--sm) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4;
  padding: 0 !important;
  margin: 0 0 0.3rem;
}
.woocommerce ul.products li.product .price {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--wp--preset--color--tinta);
  margin: 0;
  display: block;
}
.woocommerce ul.products li.product .price del { opacity: 0.45; margin-right: 0.4rem; font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; font-weight: 700; }

.woocommerce ul.products li.product .button {
  margin-top: 0.7rem;
  align-self: flex-start;
  display: inline-block;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 0;
  border-bottom: 2px solid var(--wp--preset--color--tinta);
  border-radius: 0;
  padding: 0 0 3px;
  background: none;
  color: var(--wp--preset--color--tinta);
  opacity: 0;
  transition: opacity var(--np-rapido);
}
.woocommerce ul.products li.product .button:hover { background: none; color: var(--wp--preset--color--pista); border-bottom-color: var(--wp--preset--color--pista); }
.woocommerce ul.products li.product:hover .button,
.woocommerce ul.products li.product .button:focus-visible,
.woocommerce ul.products li.product .added_to_cart { opacity: 1; }
@media (hover: none) {
  .woocommerce ul.products li.product .button { opacity: 1; }
}
.woocommerce ul.products li.product .added_to_cart {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--wp--preset--font-size--xs);
  text-decoration: underline;
}

/* Etiquetas: solo dos, y dicen algo concreto */
.woocommerce span.onsale {
  position: absolute;
  top: 0; left: 0;
  background: var(--wp--preset--color--tinta);
  color: var(--wp--preset--color--blanco);
  border-radius: 0;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: 0.4rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  z-index: 2;
}
.np-agotado {
  position: absolute;
  top: 0; right: 0;
  background: var(--wp--preset--color--blanco);
  border: var(--np-linea-fuerte);
  padding: 0.35rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 2;
}

/* Barra de la tienda: resultados y orden */
.woocommerce .woocommerce-ordering {
  margin-bottom: var(--wp--preset--spacing--30);
  float: none;
}
.woocommerce .woocommerce-ordering select {
  border: var(--np-linea);
  border-radius: 0;
  padding: 0.6rem 0.8rem;
  font-family: var(--wp--preset--font-family--texto);
  font-size: var(--wp--preset--font-size--sm);
  background: var(--wp--preset--color--blanco);
}
.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin-top: var(--wp--preset--spacing--40);
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border: var(--np-linea);
  min-width: 2.5rem;
  padding: 0.6rem 0.5rem;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--wp--preset--color--tinta);
  color: var(--wp--preset--color--blanco);
  border-color: var(--wp--preset--color--tinta);
}

/* Cuando una categoria no tiene productos, decir algo util */
.np-vacio {
  border: var(--np-linea);
  padding: var(--wp--preset--spacing--40);
  text-align: center;
}
.np-vacio h2 { margin: 0 0 0.6rem; font-size: var(--wp--preset--font-size--xl); }
.np-vacio p { margin: 0 0 1.25rem; color: var(--wp--preset--color--apagado); }

/* ------------------------------------------------------------------
   5. Ficha de producto
   Dos columnas: a la izquierda foto, descripcion y relacionados; a
   la derecha la caja de compra, que se queda pegada mientras el
   usuario baja. Se arma con grid y areas con nombre porque el
   marcado de WooCommerce no se puede reordenar desde CSS de otra
   forma.
   ------------------------------------------------------------------ */
.woocommerce div.product {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23rem;
  grid-template-areas:
    "galeria  compra"
    "detalle  compra"
    "ficha    compra"
    "ventas   ventas"
    "relacion relacion";
  column-gap: var(--wp--preset--spacing--50);
  align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery {
  grid-area: galeria;
  width: 100% !important;
  max-width: 44rem;
  float: none !important;
  margin: 0 auto var(--wp--preset--spacing--40);
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  background: var(--wp--preset--color--blanco);
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.woocommerce div.product div.images { width: 100% !important; float: none !important; }

/* La columna de compra ocupa las dos primeras filas completas y queda
   vacia: lo que se pega es la caja de dentro. Tiene que ser asi
   porque "position: sticky" se limita a su bloque contenedor, que es
   el elemento padre y no el area de la retícula. Si se pega la
   columna misma, al bajar se desliza sobre los productos
   relacionados y los tapa. */
.woocommerce div.product .summary {
  grid-area: compra;
  align-self: stretch;
  width: 100% !important;
  float: none !important;
  margin: 0;
  position: static;
}
.np-compra {
  position: sticky;
  top: var(--np-pegado);
  border: var(--np-linea-fuerte);
  padding: var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--blanco);
  /* En pantallas bajas (una laptop de 13 pulgadas con muchas
     pestanas) la caja podria ser mas alta que la ventana y el boton
     quedaria siempre fuera de vista. Con el tope, la caja se recorre
     por dentro y el boton siempre se alcanza. */
  max-height: calc(100vh - var(--np-pegado) - 1rem);
  overflow-y: auto;
  scrollbar-width: thin;
}
@supports (max-height: 100dvh) {
  .np-compra { max-height: calc(100dvh - var(--np-pegado) - 1rem); }
}
.woocommerce div.product .product_title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--xl);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 0.6rem;
  padding: 0;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: var(--wp--preset--font-size--2xl);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  color: var(--wp--preset--color--tinta);
  margin: 0 0 0.25rem;
  line-height: 1;
}
.woocommerce div.product p.price del { font-size: var(--wp--preset--font-size--lg); opacity: 0.45; }
.woocommerce div.product p.price ins { text-decoration: none; }
.np-iva {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--apagado);
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: var(--np-linea);
}
.woocommerce div.product form.cart { margin: 0 0 1rem; }
.woocommerce div.product form.cart .button { width: 100%; text-align: center; }
.woocommerce div.product form.cart div.quantity { margin-bottom: 0.6rem; float: none; }
.woocommerce div.product form.cart div.quantity input.qty {
  border: var(--np-linea);
  border-radius: 0;
  padding: 0.85rem 0.5rem;
  width: 5rem;
  font-family: var(--wp--preset--font-family--texto);
  text-align: center;
}
.woocommerce div.product .product_meta {
  grid-area: ficha;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--apagado);
  padding-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
}
.woocommerce div.product .product_meta > span { display: block; }
.woocommerce div.product .stock { font-size: var(--wp--preset--font-size--xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.woocommerce div.product .stock.in-stock { color: var(--wp--preset--color--pista); }
.woocommerce div.product .stock.out-of-stock { color: var(--wp--preset--color--tinta); }

/* Garantias dentro de la caja de compra */
.np-garantias {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border-top: var(--np-linea);
  padding-top: 1rem;
}
.np-garantias li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.45;
  padding-block: 0.3rem;
}
.np-garantias li::before { content: "—"; flex: 0 0 auto; color: var(--wp--preset--color--apagado); }

/* Lo que incluye un paquete */
.np-incluye {
  border-top: var(--np-linea);
  padding-top: 1rem;
  margin-block: 1rem;
}
.np-incluye h2 {
  font-size: var(--wp--preset--font-size--xs) !important;
  font-family: var(--wp--preset--font-family--texto) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.6rem !important;
}
.np-incluye ul { list-style: none; margin: 0; padding: 0; }
.np-incluye li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  border-bottom: var(--np-linea);
  font-size: var(--wp--preset--font-size--xs);
}
.np-incluye li:last-child { border-bottom: 0; }
.np-incluye__ahorro {
  display: block;
  margin-top: 0.7rem;
  background: var(--wp--preset--color--pelota);
  color: var(--wp--preset--color--tinta);
  padding: 0.45rem 0.6rem;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--xs);
}

/* Acordeon: reemplaza las pestanas de WooCommerce y arranca cerrado */
.np-acordeon { grid-area: detalle; border-top: var(--np-linea-fuerte); }
.np-acordeon__item { border-bottom: var(--np-linea); }
.np-acordeon__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding-block: 1.15rem;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--lg);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.np-acordeon__item > summary::-webkit-details-marker { display: none; }
.np-acordeon__item > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.4rem;
  line-height: 1;
  transition: transform var(--np-rapido);
}
.np-acordeon__item[open] > summary::after { content: "–"; }
.np-acordeon__item > summary:hover { color: var(--wp--preset--color--pista); }
.np-acordeon__cuerpo { padding-bottom: 1.5rem; max-width: 60ch; }
.np-acordeon__cuerpo > :first-child { margin-top: 0; }
.np-acordeon__cuerpo > :last-child { margin-bottom: 0; }
.np-acordeon__cuerpo h2, .np-acordeon__cuerpo h3 { font-size: var(--wp--preset--font-size--lg); }
.np-acordeon__cuerpo table.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--sm);
}
.np-acordeon__cuerpo table.woocommerce-product-attributes th,
.np-acordeon__cuerpo table.woocommerce-product-attributes td {
  border: 0;
  border-bottom: var(--np-linea);
  padding: 0.7rem 0;
  text-align: left;
  background: none;
  vertical-align: top;
}
.np-acordeon__cuerpo table.woocommerce-product-attributes th {
  width: 40%;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--apagado);
}
.np-acordeon__cuerpo table.woocommerce-product-attributes td p { margin: 0; }

.woocommerce div.product .related { grid-area: relacion; }
.woocommerce div.product .up-sells { grid-area: ventas; }
.woocommerce div.product .related,
.woocommerce div.product .up-sells {
  border-top: var(--np-linea-fuerte);
  margin-top: var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--40);
}
/* La etiqueta de oferta se ancla a la galeria, no al documento. */
.woocommerce div.product > span.onsale {
  top: 0;
  left: 0;
  z-index: 3;
}
.woocommerce div.product .related > h2,
.woocommerce div.product .up-sells > h2 {
  font-size: var(--wp--preset--font-size--2xl);
  margin: 0 0 var(--wp--preset--spacing--30);
}

@media (max-width: 1024px) {
  .woocommerce div.product {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "galeria" "compra" "detalle" "ficha" "ventas" "relacion";
    row-gap: var(--wp--preset--spacing--30);
  }
  .np-compra { position: static; top: auto; }
  .woocommerce div.product .woocommerce-product-gallery { margin-bottom: 0; max-width: 32rem; }
  .np-acordeon { margin-top: var(--wp--preset--spacing--20); }
}

/* En celular el boton vive en una barra fija abajo, que es el
   equivalente movil de la columna pegada. */
.np-compra-movil {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--blanco);
  border-top: var(--np-linea-fuerte);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
}
.np-compra-movil__precio {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1;
}
.np-compra-movil__precio del { display: none; }
.np-compra-movil button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: var(--wp--preset--color--tinta);
  color: var(--wp--preset--color--blanco);
  font-family: var(--wp--preset--font-family--texto);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--sm);
  letter-spacing: 0.02em;
  padding: 0.9rem 1.6rem;
  cursor: pointer;
}
@media (max-width: 782px) {
  .np-compra-movil { display: flex; }
  body.np-tiene-barra { padding-bottom: 4.75rem; }
}

/* ------------------------------------------------------------------
   6. Preguntas frecuentes
   ------------------------------------------------------------------ */
.np-faq { border-top: var(--np-linea-fuerte); }
.np-faq details { border-bottom: var(--np-linea); }
.np-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding-block: 1.15rem;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--base);
}
.np-faq summary::-webkit-details-marker { display: none; }
.np-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.4rem;
  line-height: 1;
}
.np-faq details[open] summary::after { content: "–"; }
.np-faq summary:hover { color: var(--wp--preset--color--pista); }
.np-faq details > p {
  margin: 0 0 1.35rem;
  max-width: 62ch;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--apagado);
  line-height: 1.7;
}

/* ------------------------------------------------------------------
   7. Banda de cierre
   ------------------------------------------------------------------ */
.np-cierre {
  background: var(--wp--preset--color--tinta);
  color: var(--wp--preset--color--blanco);
}
.np-cierre__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  flex-wrap: wrap;
  padding-block: var(--wp--preset--spacing--40);
}
.np-cierre__caja > .wp-block-group { flex: 1 1 26rem; min-width: 0; }
.np-cierre h2 {
  margin: 0;
  color: var(--wp--preset--color--blanco);
  font-size: var(--wp--preset--font-size--2xl);
  max-width: 24ch;
}
.np-cierre p {
  margin: 0.5rem 0 0;
  font-size: var(--wp--preset--font-size--sm);
  color: color-mix(in srgb, var(--wp--preset--color--blanco) 72%, transparent);
  max-width: 40ch;
}
.np-cierre .wp-block-button__link,
.np-cierre .np-boton {
  background: var(--wp--preset--color--pelota);
  color: var(--wp--preset--color--tinta);
  border: 0;
  border-radius: 0;
  font-family: var(--wp--preset--font-family--texto);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--sm);
  letter-spacing: 0.02em;
  padding: 1rem 1.875rem;
  display: inline-block;
  white-space: nowrap;
}
.np-cierre .np-boton:hover { text-decoration: none; background: var(--wp--preset--color--blanco); }

/* ------------------------------------------------------------------
   8. Pie de pagina
   ------------------------------------------------------------------ */
.np-pie {
  background: var(--wp--preset--color--tinta);
  color: var(--wp--preset--color--blanco);
}
.np-pie a,
.np-pie .wp-block-site-title a { color: var(--wp--preset--color--blanco); }
.np-pie h2, .np-pie h3 {
  color: var(--wp--preset--color--blanco);
  font-family: var(--wp--preset--font-family--texto);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.9rem;
}
.np-pie p, .np-pie li {
  font-size: var(--wp--preset--font-size--sm);
  color: color-mix(in srgb, var(--wp--preset--color--blanco) 75%, transparent);
}
.np-pie__abajo {
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--blanco) 20%, transparent);
  padding-block: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--xs);
  color: color-mix(in srgb, var(--wp--preset--color--blanco) 60%, transparent);
}

/* ------------------------------------------------------------------
   9. Botones, avisos y formularios de WooCommerce
   ------------------------------------------------------------------ */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  border-radius: 0;
  border: 0;
  background: var(--wp--preset--color--tinta);
  color: var(--wp--preset--color--blanco);
  font-family: var(--wp--preset--font-family--texto);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--sm);
  letter-spacing: 0.02em;
  padding: 1rem 1.875rem;
  transition: background var(--np-rapido);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--wp--preset--color--pista);
  color: var(--wp--preset--color--blanco);
}
.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled { background: var(--wp--preset--color--apagado); opacity: 1; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top: 0;
  border-left: 3px solid var(--wp--preset--color--tinta);
  background: var(--wp--preset--color--hueso);
  border-radius: 0;
  font-size: var(--wp--preset--font-size--sm);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--wp--preset--color--tinta); }
.woocommerce-error { border-left-color: #9B2226; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.wp-block-search__input,
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], textarea, select {
  border: var(--np-linea);
  border-radius: 0;
  padding: 0.85rem 1rem;
  background: var(--wp--preset--color--blanco);
  font-family: var(--wp--preset--font-family--texto);
  font-size: var(--wp--preset--font-size--sm);
}
.woocommerce form .form-row label { font-size: var(--wp--preset--font-size--xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

.woocommerce table.shop_table,
.woocommerce-cart table.cart {
  border: var(--np-linea);
  border-radius: 0;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--sm);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var(--wp--preset--color--linea); }
.woocommerce table.shop_table thead th {
  font-size: var(--wp--preset--font-size--xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------
   10. Utilidades
   ------------------------------------------------------------------ */
.np-linea-arriba { border-top: var(--np-linea); }
.np-linea-arriba-fuerte { border-top: var(--np-linea-fuerte); }
.np-apagado { color: var(--wp--preset--color--apagado); }
.np-sangria { padding-block: var(--wp--preset--spacing--50); }
.screen-reader-text,
.np-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .np-cat:hover { transform: none; }
  .woocommerce ul.products li.product:hover a img { transform: none; }
}

/* ------------------------------------------------------------------
   11. Carrito y finalizar compra
   Son las dos paginas que cobran, asi que no pueden quedarse con el
   estilo por omision de WooCommerce.
   ------------------------------------------------------------------ */
.woocommerce-cart table.cart img { width: 72px; background: var(--wp--preset--color--blanco); }
.woocommerce-cart table.cart td.product-name a { font-weight: 600; }
.woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.woocommerce-cart .cart-collaterals { margin-top: var(--wp--preset--spacing--40); }
.woocommerce-cart .cart_totals {
  border: var(--np-linea-fuerte);
  padding: var(--wp--preset--spacing--30);
  float: none !important;
  width: 100% !important;
  max-width: 26rem;
  margin-left: auto;
}
.woocommerce-cart .cart_totals h2 { font-size: var(--wp--preset--font-size--xl); margin-top: 0; }
.woocommerce .cart_totals table.shop_table { border: 0; }
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td { padding: 0.7rem 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { width: 100%; text-align: center; }

.woocommerce-checkout .col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100% !important; float: none !important; }
.woocommerce-checkout #customer_details { margin-bottom: var(--wp--preset--spacing--40); }
.woocommerce-checkout h3 { font-size: var(--wp--preset--font-size--xl); }
.woocommerce-checkout #order_review_heading { margin-top: 0; }
.woocommerce-checkout #order_review {
  border: var(--np-linea-fuerte);
  padding: var(--wp--preset--spacing--30);
}
.woocommerce-checkout #order_review table.shop_table { border: 0; }
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: var(--np-linea);
  padding: 0 0 1rem;
}
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--wp--preset--color--hueso);
  border-radius: 0;
  font-size: var(--wp--preset--font-size--sm);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #place_order { width: 100%; }
@media (min-width: 1025px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26rem;
    gap: var(--wp--preset--spacing--50);
    align-items: start;
  }
  .woocommerce-checkout form.checkout > #customer_details { grid-column: 1; margin-bottom: 0; }
  .woocommerce-checkout form.checkout > #order_review_heading,
  .woocommerce-checkout form.checkout > #order_review { grid-column: 2; }
  .woocommerce-checkout .col2-set { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 782px) {
  .woocommerce-checkout .col2-set { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-cart .cart_totals { max-width: none; }
}

/* Confirmacion del pedido */
.woocommerce-order .woocommerce-order-overview {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  border: var(--np-linea-fuerte);
  padding: var(--wp--preset--spacing--30);
  margin: 0 0 var(--wp--preset--spacing--40);
}
.woocommerce-order .woocommerce-order-overview li {
  border: 0 !important;
  font-size: var(--wp--preset--font-size--xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--apagado);
}
.woocommerce-order .woocommerce-order-overview li strong {
  display: block;
  font-size: var(--wp--preset--font-size--base);
  text-transform: none;
  letter-spacing: 0;
  color: var(--wp--preset--color--tinta);
  margin-top: 0.25rem;
}