/*
Theme Name: Werkadotools
Theme URI: https://werkadotools.com
Description: Tema hijo de Storefront con la identidad visual de Werkadotools
 (mismos colores, tipografías y estilo que la tienda de Shopify).
Author: Werkadotools
Template: storefront
Version: 1.0
Text Domain: werkado
*/

/* ---------------------------------------------------------------
   Tipografías
   Toda la tienda usa IBM Plex (autoalojada, NADA de Google Fonts). Las
   declaraciones @font-face viven en assets/listado-nuevo.css, que se carga
   siempre, así que aquí basta con apuntar las variables a esas familias.

   Oswald y Open Sans SE ELIMINARON (2026-08-08): solo las gastaban el menú y
   la barra roja, y mantener dos familias enteras (111 KB) para eso no se
   sostenía. Oswald en mayúsculas además es el tic visual de las tiendas de
   recambios genéricas, justo el registro del que huye este diseño.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Paleta — los mismos valores exactos que la tienda de Shopify
   --------------------------------------------------------------- */
:root {
  --wk-rojo: #CC0000;
  --wk-rojo-hover: #AA0000;
  --wk-negro: #111111;
  --wk-negro-header: #0D0D0D;
  --wk-blanco: #FFFFFF;
  --wk-texto: rgba(255,255,255,.75);
  --wk-borde: rgba(255,255,255,.12);
  --wk-titulo: "WkPlexCond", "WkPlex", Arial, sans-serif;
  --wk-cuerpo: "WkPlex", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Curvas propias: las de serie del navegador son flojas y las animaciones
     salen sin carácter. Nunca ease-in en interfaz: arranca lento y la
     tienda parece pesada justo en el instante que el ojo está mirando. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Ritmo de espaciado: todo múltiplo de 8, para que nada quede "casi" */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
}

/* ---------------------------------------------------------------
   Base oscura
   --------------------------------------------------------------- */
body,
.site,
#page,
.site-content,
.woocommerce-page {
  background-color: var(--wk-negro);
  color: var(--wk-texto);
  font-family: var(--wk-cuerpo);
}

body { font-size: 16px; line-height: 1.6; }

a { color: var(--wk-blanco); }
a:hover { color: var(--wk-rojo); }

h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.entry-title,
.widget-title,
.section-title {
  font-family: var(--wk-titulo);
  color: var(--wk-blanco);
  text-transform: uppercase;
  font-weight: 700;
  text-wrap: balance;
}

/* Tipografía: cuanto MÁS grande el texto, MENOS espaciado entre letras.
   Con 2px fijo en todos los tamaños los titulares grandes se deshilachaban
   y los pequeños quedaban apretados. Es lo contrario de lo que hay que hacer. */
h1, .entry-title, .page-title {
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: .5px;
}
h2 { font-size: clamp(23px, 2.1vw, 30px); line-height: 1.15; letter-spacing: .8px; }
h3 { font-size: 20px; line-height: 1.2; letter-spacing: 1.1px; }
h4, h5, h6 { letter-spacing: 1.4px; }

/* ---------------------------------------------------------------
   EL ROJO, SEGÚN EL FONDO
   Hay dos rojos a propósito: el de MARCA (#CC0000), que solo funciona sobre
   negro, y el de INTERACCIÓN (#B31217), más oscuro, que es el único que llega
   a contraste AA sobre el papel claro.
   listado-nuevo.css redefine --wk-rojo en :root al de interacción, y eso se
   colaba también en la cabecera y el pie, que son negros: la marca perdía su
   rojo justo donde sí debía usarlo. Se reasigna la variable SOLO dentro de
   esas superficies oscuras, así las reglas de abajo no hay que tocarlas.
   --------------------------------------------------------------- */
.wk-versand-bar,
.site-header,
.wk-footer,
.site-footer {
  --wk-rojo: var(--wk-rojo-marca, #CC0000);
}

/* ---------------------------------------------------------------
   Cabecera
   --------------------------------------------------------------- */
.site-header {
  background-color: var(--wk-negro-header) !important;
  border-bottom: 1px solid var(--wk-borde);
  padding-top: 1.4em;
  padding-bottom: 1.2em;
}

.site-header .custom-logo-link img,
.site-branding img { max-width: 260px; height: auto; }

.site-header .site-description,
.site-branding .site-description {
  color: rgba(255,255,255,.55);
  font-family: var(--wk-titulo);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
}

/* Barra roja de aviso (equivalente a la de Shopify) */
.wk-versand-bar {
  background: var(--wk-rojo);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .91px;
  text-transform: uppercase;
  padding: 9px 12px;
  font-family: var(--wk-cuerpo);
}
.wk-versand-bar a { color: #fff; text-decoration: underline; }

/* Menú principal */
.storefront-primary-navigation,
.main-navigation,
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
  background-color: var(--wk-negro-header);
}

/* Storefront limita TODO el contenido a 1170 px, pero las secciones de la
   portada están a 1400: el listado salía más estrecho que la portada y no
   cuadraba con ella. Un único ancho para toda la tienda. */
.col-full {
  max-width: 1400px;
  padding-left: 24px;
  padding-right: 24px;
}

/* Storefront reparte esta franja en dos columnas y deja al menú 786 px de
   1280 — con los nombres de BGS no cabe ni de lejos. Se pasa a una fila
   flexible: el menú ocupa todo el ancho y el carrito se va al extremo. */
.storefront-primary-navigation .col-full {
  display: flex;
  align-items: center;
  gap: 16px;
}
.storefront-primary-navigation .main-navigation {
  width: auto !important;
  flex: 1 1 auto;
  float: none !important;
  margin: 0 !important;
}
.storefront-primary-navigation .site-header-cart {
  width: auto !important;
  flex: 0 0 auto;
  float: none !important;
  margin: 0 0 0 auto !important;
  list-style: none;
}

/* Compacto: con los nombres largos de BGS, a 14px el menú ocupaba 3 filas */
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  font-family: var(--wk-titulo);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 600;
  font-size: 12.5px;
  color: #fff;
  padding: .9em .62em;
  white-space: nowrap;
  position: relative;
}

/* El hover NO cambia el texto a rojo: rojo sobre negro se queda en 2,8:1 y no
   llega a AA — el enlace se volvía MENOS legible justo al apuntarlo. El rojo
   pasa a ser un filete bajo la palabra: la marca sigue ahí y el texto se queda
   en blanco, que es 19:1. El filete se dibuja con transform (compuesto en GPU)
   en vez de animar el ancho, que provoca relayout en cada fotograma. */
.main-navigation ul.menu > li > a::after,
.main-navigation ul.nav-menu > li > a::after {
  content: "";
  position: absolute;
  left: .62em;
  right: .62em;
  bottom: .45em;
  height: 2px;
  background: var(--wk-rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms cubic-bezier(.2,.6,.2,1);
}
.main-navigation ul.menu > li > a:hover::after,
.main-navigation ul.nav-menu > li > a:hover::after,
.main-navigation ul.menu > li.current-menu-item > a::after,
.main-navigation ul.menu > li > a:focus-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .main-navigation ul.menu > li > a::after { transition: none; }
}

.main-navigation ul.menu ul a,
.main-navigation ul.nav-menu ul a {
  color: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--wk-borde);
  font-size: 14px;
}

/* Carrito de la cabecera — solo cesta y nº de artículos: el importe ocupaba
   casi 200 px y era lo que empujaba el menú a una segunda fila. */
.site-header-cart .cart-contents .amount { display: none; }
.site-header-cart .cart-contents .count { font-size: 13px; }
.site-header-cart .cart-contents,
.site-header-cart .widget_shopping_cart {
  color: #fff;
  background-color: transparent;
}
.site-header-cart .cart-contents:hover { color: var(--wk-rojo); }
.site-header-cart .widget_shopping_cart {
  background-color: var(--wk-negro-header);
  border: 1px solid var(--wk-borde);
}

/* Buscador */
.site-search .widget_product_search input[type="search"],
.woocommerce-product-search input[type="search"],
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"],
textarea, select {
  background-color: #1c1c1c;
  color: #fff;
  border: 1px solid var(--wk-borde);
  border-radius: 0;
}
::placeholder { color: rgba(255,255,255,.45); }

/* ---------------------------------------------------------------
   Botones — rojo, sin redondeo, como en Shopify
   --------------------------------------------------------------- */
button, .button, input[type="submit"], input[type="button"],
.woocommerce #respond input#submit, .woocommerce a.button,
.woocommerce button.button, .woocommerce input.button,
.added_to_cart, .wc-block-components-button {
  background-color: var(--wk-rojo) !important;
  color: #fff !important;
  border-radius: 0 !important;
  border: 0;
  font-family: var(--wk-cuerpo);
  font-weight: 600;
  letter-spacing: 1px;
  padding: .85em 1.9em;
  text-transform: none;
  /* Propiedades concretas, nunca "all": solo transform y color, que van
     por GPU y no obligan al navegador a recalcular la maqueta. */
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
button:hover, .button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.added_to_cart:hover, .wc-block-components-button:hover {
  background-color: var(--wk-rojo-hover) !important;
  color: #fff !important;
}
/* Al pulsar, el botón cede: es la confirmación de que la tienda te ha oído.
   Sin esto un clic no devuelve nada hasta que carga la página siguiente. */
button:active, .button:active, input[type="submit"]:active,
.woocommerce a.button:active, .woocommerce button.button:active,
.added_to_cart:active, .wc-block-components-button:active {
  transform: scale(.97);
}

.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--wk-rojo) !important;
}

/* ---------------------------------------------------------------
   Listado de productos
   --------------------------------------------------------------- */
/* Rejilla propia: Storefront usa "float" y con títulos de distinto largo
   las tarjetas quedan a alturas distintas y los botones desalineados. */
.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 22px;
  margin: 0 0 2.5em;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { display: none; }

.woocommerce ul.products li.product,
ul.products li.product {
  background: transparent;
  text-align: left;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  /* columna: así el precio y el botón se pueden anclar abajo */
  display: flex;
  flex-direction: column;
}

/* El título ocupa siempre dos líneas: si no, cada tarjeta empieza el
   precio a una altura y la fila parece desordenada. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin-bottom: .4em;
}

/* Precio, avisos legales y botón, siempre pegados abajo y alineados */
.woocommerce ul.products li.product .price,
ul.products li.product .price { margin: 0 0 .4em; }

.woocommerce ul.products li.product .wc-gzd-additional-info,
ul.products li.product .wc-gzd-additional-info { margin: 0 0 .2em; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
ul.products li.product .button,
ul.products li.product .added_to_cart {
  margin-top: auto;
  align-self: flex-start;
  padding: .7em 1.4em;
  font-size: 14px;
}

/* Las fotos de BGS son de 2800 px y de proporciones distintas:
   se encuadran en un cuadrado blanco para que la rejilla quede pareja. */
.woocommerce ul.products li.product a img,
ul.products li.product img {
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: .8em;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 10px;
  transition: transform 220ms var(--ease-out);
}
/* El hover solo en ratón: en móvil el navegador lo dispara al tocar y
   deja la tarjeta "pegada" en estado hover después del toque. */
@media (hover: hover) and (pointer: fine) {
  ul.products li.product:hover img { transform: scale(1.04); }
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wk-cuerpo) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.35;
  color: #fff;
  padding-top: 0;
}

.woocommerce ul.products li.product .price,
ul.products li.product .price {
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  font-family: var(--wk-cuerpo);
}
.woocommerce ul.products li.product .price del { color: rgba(255,255,255,.45); font-weight: 400; }
.woocommerce ul.products li.product .price ins { color: var(--wk-rojo); text-decoration: none; }

.woocommerce span.onsale, .woocommerce ul.products li.product .onsale {
  background-color: var(--wk-rojo);
  color: #fff;
  border-radius: 0;
  font-family: var(--wk-titulo);
  text-transform: uppercase;
  letter-spacing: 1px;
  min-height: auto;
  min-width: auto;
  padding: .35em .8em;
  line-height: 1.4;
}

/* Textos legales de Germanized más discretos */
.wc-gzd-additional-info,
.woocommerce ul.products li.product .wc-gzd-additional-info {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
}
.wc-gzd-additional-info a { color: rgba(255,255,255,.7); text-decoration: underline; }

/* ---------------------------------------------------------------
   Ficha de producto
   --------------------------------------------------------------- */
.single-product div.product .product_title { font-size: 32px; }

.single-product div.product .woocommerce-product-gallery {
  background: #fff;
  padding: 12px;
}
.single-product div.product .woocommerce-product-gallery img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.single-product div.product p.price,
.single-product div.product span.price {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  font-family: var(--wk-cuerpo);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--wk-borde);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--wk-titulo);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.6);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wk-rojo); }
.woocommerce div.product .woocommerce-tabs .panel {
  background: transparent;
  color: var(--wk-texto);
}

.woocommerce div.product form.cart div.quantity input.qty {
  background: #1c1c1c;
  color: #fff;
  border: 1px solid var(--wk-borde);
}

.product_meta { color: rgba(255,255,255,.55); font-size: 13px; }
.product_meta a { color: rgba(255,255,255,.8); }

.stock.in-stock { color: #6dd36d; }
.stock.out-of-stock { color: var(--wk-rojo); }

/* Tablas (datos técnicos, carrito, pedido) */
.woocommerce table.shop_table,
.woocommerce table.shop_attributes,
table {
  background: transparent;
  color: var(--wk-texto);
  border-color: var(--wk-borde);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_attributes th { color: #fff; }
.woocommerce table.shop_table td,
.woocommerce table.shop_attributes td { border-color: var(--wk-borde); }

/* ---------------------------------------------------------------
   Avisos, migas y paginación
   --------------------------------------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.woocommerce-noreviews, p.no-comments {
  background-color: #1c1c1c;
  color: #fff;
  border-top-color: var(--wk-rojo);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--wk-rojo); }

.storefront-breadcrumb {
  background-color: transparent;
  border-bottom: 1px solid var(--wk-borde);
  padding: 1em 0;
  margin-bottom: 2em;
}
.storefront-breadcrumb a { color: rgba(255,255,255,.6); }
.storefront-breadcrumb a:hover { color: var(--wk-rojo); }

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li { border-color: var(--wk-borde); }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span { color: #fff; }
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--wk-rojo);
  color: #fff;
}

.woocommerce-ordering select,
.woocommerce-result-count { color: rgba(255,255,255,.7); }

/* ---------------------------------------------------------------
   Pie
   --------------------------------------------------------------- */
.site-footer {
  background-color: var(--wk-negro-header);
  color: rgba(255,255,255,.6);
  border-top: 3px solid var(--wk-rojo);
  padding-top: 2.5em;
}
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer .widget-title {
  color: #fff;
  font-size: 16px;
  letter-spacing: 1.5px;
}
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: var(--wk-rojo); }
.site-info { border-top: 1px solid var(--wk-borde); padding-top: 1.4em; font-size: 13px; }

/* Widgets */
.widget { color: var(--wk-texto); }
.widget a { color: rgba(255,255,255,.8); }

/* ---------------------------------------------------------------
   Móvil
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  h1, .entry-title, .page-title { font-size: 28px; letter-spacing: 1.2px; }
  .single-product div.product .product_title { font-size: 23px; }
  .site-header .custom-logo-link img { max-width: 190px; }
  .wk-versand-bar { font-size: 12px; letter-spacing: .6px; }
}

/* ===============================================================
   PORTADA — mismas medidas y colores que la de Shopify
   =============================================================== */

/* Las secciones rompen el contenedor de Storefront y van a todo el ancho */
.wk-home > section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* --- 1. Banner ------------------------------------------------ */
.wk-hero {
  position: relative;
  min-height: 720px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: -2.5em;   /* pega el banner al menú, como en Shopify */
}
.wk-hero__inner { position: relative; z-index: 2; max-width: 820px; padding: 0 24px; }
.wk-hero h1 {
  font-family: var(--wk-titulo);
  font-size: 58px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 2.9px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 .5em;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.wk-hero p {
  font-size: 16px;
  color: rgba(255,255,255,.85);
  margin: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
/* Fundido inferior hacia el fondo de la página (el mismo truco del tema real:
   se ancla arriba y abajo, sin height, o el navegador lo deja en 0 px) */
.wk-hero__fade {
  position: absolute;
  left: 0; right: 0; top: 35%; bottom: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(17,17,17,0) 0%, rgba(17,17,17,.55) 45%, #111 72%, #111 100%);
}

/* --- Secciones ------------------------------------------------ */
.wk-seccion { background: var(--wk-negro); padding: 60px 24px 36px; }
.wk-seccion__titulo {
  font-family: var(--wk-titulo);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  margin: 0 0 1.6em;
}
.wk-seccion__cabecera {
  max-width: 1400px;
  margin: 0 auto 1.4em;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.wk-seccion__cabecera .wk-seccion__titulo { margin: 0; text-align: left; }
.wk-enlace {
  font-family: var(--wk-titulo);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  color: var(--wk-rojo);
}

/* --- 2. Rejilla de categorías --------------------------------- */
.wkc-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.wkc-item {
  display: block;
  border: 2px solid transparent;
  transition: border-color 180ms ease, transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .wkc-item:hover { border-color: var(--wk-rojo); transform: translateY(-3px); }
}
.wkc-item:active { transform: translateY(-1px) scale(.995); }
.wkc-img-wrap {
  background: #fff;
  padding: 14px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wkc-img-wrap img { width: 100%; height: 100%; object-fit: contain; }
.wkc-label {
  display: block;
  background: #1c1c1c;
  color: #ccc;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .84px;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 6px 12px;
  line-height: 1.3;
}
.wkc-item:hover .wkc-label { color: #fff; }

/* --- 3 y 4. Filas de productos -------------------------------- */
.wk-home ul.products {
  max-width: 1400px;
  margin: 0 auto;
  grid-template-columns: repeat(5, 1fr);
}

/* --- 4. Bloques de categoría ---------------------------------- */
/* OJO CON LA ESPECIFICIDAD: la regla de arriba `.wk-home > section` (clase +
   etiqueta) pesa MÁS que `.wk-bloque` (solo clase), así que su `width:100vw`
   y su `margin-left:calc(50% - 50vw)` ganaban y el bloque quedaba corrido
   300 px a la izquierda en pantallas anchas. Hay que igualar el peso
   escribiendo el selector completo. */
.wk-home > section.wk-bloque {
  max-width: 1400px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: center;
}
/* Los bloques alternan el lado del texto, como en la tienda real */
.wk-home > section.wk-bloque--invertido { grid-template-columns: 1fr 300px; }
.wk-bloque--invertido .wk-bloque__texto { order: 2; }
.wk-bloque--invertido .wk-bloque__productos { order: 1; }

.wk-bloque .wk-seccion__titulo { text-align: left; margin: .2em 0 .5em; font-size: 28px; }
.wk-bloque__texto p { color: rgba(255,255,255,.7); margin-bottom: 1.4em; }
.wk-bloque__productos ul.products { grid-template-columns: repeat(4, 1fr); }
.wk-eyebrow {
  font-family: var(--wk-titulo);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wk-rojo);
}

/* --- 5. Ventajas ---------------------------------------------- */
.wk-ventajas {
  background: #0d0d0d;
  border-top: 1px solid var(--wk-borde);
  padding: 34px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.wk-ventaja strong {
  display: block;
  font-family: var(--wk-titulo);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #fff;
  font-size: 15px;
  margin-bottom: .35em;
}
.wk-ventaja span { color: rgba(255,255,255,.6); font-size: 14px; }

/* --- Móvil ---------------------------------------------------- */
@media (max-width: 1100px) {
  .wkc-grid { grid-template-columns: repeat(4, 1fr); }
  .wk-home ul.products { grid-template-columns: repeat(3, 1fr); }
  .wk-bloque { grid-template-columns: 1fr; gap: 20px; }
  .wk-bloque__productos ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .wk-hero { min-height: 480px; }
  .wk-hero h1 { font-size: 30px; letter-spacing: 1.6px; }
  .wkc-grid { grid-template-columns: repeat(2, 1fr); }
  .wk-home ul.products,
  .wk-bloque__productos ul.products { grid-template-columns: repeat(2, 1fr); }
  .wk-ventajas { grid-template-columns: 1fr; }
}

/* ===============================================================
   PIE — cuatro columnas, como en Shopify
   =============================================================== */
.wk-footer { max-width: 1400px; margin: 0 auto; padding: 10px 0 0; }
.wk-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 2.2em;
}
.wk-footer__col h3 {
  font-family: var(--wk-titulo);
  font-size: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1em;
}
.wk-footer__col ul { list-style: none; margin: 0; padding: 0; }
.wk-footer__col li { margin-bottom: .55em; }
.wk-footer__col a { color: rgba(255,255,255,.7); font-size: 14px; }
.wk-footer__col a:hover { color: var(--wk-rojo); }
.wk-footer__destacado {
  font-family: var(--wk-titulo);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--wk-rojo) !important;
}
.wk-footer__marca img { max-width: 210px; height: auto; margin-bottom: 1em; }
.wk-footer__marca p { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.6; }
.wk-footer__social { display: flex; gap: 12px; margin-top: 1.2em; }
.wk-footer__social a { color: rgba(255,255,255,.7); display: inline-flex; }
.wk-footer__social a:hover { color: var(--wk-rojo); }
.wk-footer .site-info {
  border-top: 1px solid var(--wk-borde);
  padding-top: 1.4em;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}

@media (max-width: 900px) {
  .wk-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .wk-footer__cols { grid-template-columns: 1fr; }
}

/* ===============================================================
   Retoques de orden
   =============================================================== */

/* "Alle Produkte" como botón rojo al final del menú, igual que en Shopify */
.main-navigation ul.menu > li:last-child > a {
  background: var(--wk-rojo);
  color: #fff !important;
  padding: .7em 1em;
  margin-left: .5em;
}
.main-navigation ul.menu > li:last-child > a:hover { background: var(--wk-rojo-hover); }

/* El título de la página dejaba un hueco enorme antes del listado */
.woocommerce-products-header,
.page-header {
  margin: 0 0 1.2em;
  padding: 1.6em 0 0;
}
.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
  text-align: center;
  margin: 0;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 1.2em; }

/* Migas y barra de orden: misma línea de base */
.storefront-breadcrumb { margin-bottom: 0; padding: .9em 0; }

/* Descripción de categoría con aire, no pegada al listado */
.term-description { margin-bottom: 1.6em; color: rgba(255,255,255,.7); }

/* ===============================================================
   ACABADO — los detalles que nadie mira pero todos notan
   =============================================================== */

/* --- Selección y foco -------------------------------------------------
   El foco visible es lo que permite comprar con el teclado. Storefront lo
   deja casi invisible sobre fondo negro. */
::selection { background: var(--wk-rojo); color: #fff; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--wk-rojo);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }   /* nada de aros al hacer clic */

/* --- Tarjeta de producto ---------------------------------------------
   La foto va sobre blanco y el resto sobre negro: sin un borde, la imagen
   "flota" recortada. Un borde de 1px la asienta y da dónde marcar el hover. */
.woocommerce ul.products li.product a img,
ul.products li.product img {
  border: 1px solid rgba(255,255,255,.06);
}
@media (hover: hover) and (pointer: fine) {
  ul.products li.product:hover img { border-color: rgba(204,0,0,.55); }
  ul.products li.product .woocommerce-loop-product__title { transition: color 160ms ease; }
  ul.products li.product:hover .woocommerce-loop-product__title { color: #fff; }
}

/* ⚠️ OBSOLETO — la ficha de producto la compone entera assets/listado-nuevo.css.
   Estas reglas son del diseño OSCURO (fíjate en el texto blanco) y, al llevar
   !important con más especificidad, ganaban a las del diseño claro: el título
   de la portada salía a 14,5px en vez de 15 y el texto legal a 11,5 en vez de
   12. Se acotan a `body:not(.wk-neu)` en vez de borrarlas, por si algún día se
   vuelve al tema oscuro; hoy wk-neu está siempre puesto, así que no se aplican.
   La regla general que sale de aquí: cuando dos hojas se pelean a golpe de
   !important, hay que APAGAR la vieja, no subir la especificidad de la nueva. */
body:not(.wk-neu) .woocommerce ul.products li.product .woocommerce-loop-product__title,
body:not(.wk-neu) ul.products li.product .woocommerce-loop-product__title {
  color: rgba(255,255,255,.82);
  font-size: 14.5px !important;
  line-height: 1.4;
}
body:not(.wk-neu) .woocommerce ul.products li.product .price,
body:not(.wk-neu) ul.products li.product .price {
  font-size: 19px;
  letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
}
body:not(.wk-neu) .wc-gzd-additional-info { font-size: 11.5px !important; }

/* --- Menú desplegable -------------------------------------------------
   Aparece al pasar el ratón, así que se ve muchas veces: animación muy
   corta y solo de entrada. Nada aparece de la nada: arranca al 98 %. */
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
  border: 1px solid var(--wk-borde);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  transform-origin: top center;
  padding: var(--sp-1) 0;
}
.main-navigation ul li:hover > ul.sub-menu,
.main-navigation ul li:hover > ul.children {
  animation: wk-desplegar 160ms var(--ease-out);
}
@keyframes wk-desplegar {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.main-navigation ul.menu ul a { border-bottom: 0; padding: .55em 1.1em; }
.main-navigation ul.menu ul li:hover > a { background: rgba(255,255,255,.05); color: #fff; }

/* --- Enlaces del menú: subrayado que crece desde la izquierda ---------- */
.main-navigation ul.menu > li > a { position: relative; }
.main-navigation ul.menu > li > a::after {
  content: '';
  position: absolute;
  left: .62em; right: .62em; bottom: .45em;
  height: 2px;
  background: var(--wk-rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .main-navigation ul.menu > li > a:hover::after { transform: scaleX(1); }
}
.main-navigation ul.menu > li:last-child > a::after { display: none; }

/* --- Banner: el texto entra, no aparece de golpe ----------------------
   Se ve una vez por visita, así que aquí sí compensa. */
.wk-hero__inner > * {
  animation: wk-entrar 520ms var(--ease-out) both;
}
.wk-hero__inner p { animation-delay: 90ms; }
@keyframes wk-entrar {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- Aire y ritmo ----------------------------------------------------- */
.wk-seccion { padding: var(--sp-8) var(--sp-3) var(--sp-6); }
.wk-seccion__titulo { margin-bottom: var(--sp-4); }
.wk-ventajas { padding: var(--sp-4) var(--sp-3); }
.site-content { padding-bottom: var(--sp-8); }

/* Una línea fina separa las secciones sin gritar */
.wk-bestseller { border-top: 1px solid rgba(255,255,255,.07); }
.wk-bloque     { border-top: 1px solid rgba(255,255,255,.07); }

/* --- Ficha de producto ------------------------------------------------ */
.single-product div.product .woocommerce-product-gallery { border: 1px solid rgba(255,255,255,.08); }
.single-product div.product p.price,
.single-product div.product span.price {
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.single-product div.product form.cart { margin-top: var(--sp-3); }

/* --- Pie --------------------------------------------------------------- */
.wk-footer__col a { transition: color 150ms ease; }

/* --- Accesibilidad: menos movimiento ----------------------------------
   Quien lo pide en su sistema sigue viendo cambios de color y opacidad
   (que ayudan a entender), pero nada se mueve de sitio. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  ul.products li.product:hover img,
  .wkc-item:hover { transform: none; }
}