/*
Theme Name: Para-Sport 2026
Theme URI: https://www.para-sport.com
Description: Tema de Para-Sport S.A. — rama civil. Tema hijo de Storefront (tema oficial de WooCommerce), para no mantener a mano las plantillas críticas de checkout, carrito y mi cuenta.
Author: Para-Sport
Version: 0.2.0
Template: storefront
License: GNU General Public License v2 or later
Text Domain: parasport-2026
*/

/* ==========================================================================
   IDENTIDAD DE MARCA
   Fuente: presentación de Claude Design (11-ago-2026).
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS DEL SISTEMA DE DISEÑO

   Vienen de `contenido/rediseno/design-system/tokens/` (Claude Design, 12-ago-
   2026). Se pegan aquí en vez de importarlos con @import porque cada @import
   es una petición más, y el argumento de este tema es que la portada carga en
   0,23 s. Si se actualiza el sistema, se vuelve a pegar este bloque.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   COLOR — Para-Sport
   Dos colores de marca: rojo y oliva. Todo lo demás es lienzo.
   ========================================================================== */
:root {
  /* --- Marca --- */
  --ps-rojo:            #F82900;  /* CONFIRMADO. Acento, nunca fondo grande. */
  --ps-rojo-oscuro:     #C42000;  /* hover / pressed */
  --ps-rojo-tenue:      #FDF3F0;  /* fondo teñido de aviso */

  --ps-oliva:           #2A2C21;  /* DEFINITIVO (medido sobre el parche) */
  --ps-oliva-hondo:     #1E211A;  /* pie */
  --ps-oliva-claro:     #3D4133;  /* hover sobre oliva */

  /* --- Neutros (no son marca: son lienzo) --- */
  --ps-blanco:          #FFFFFF;
  --ps-gris:            #F5F5F5;
  --ps-linea:           #DCDED6;  /* gris con sesgo verde, no gris puro */
  --ps-tinta:           #1F2119;
  --ps-tinta-suave:     #676B5E;
  --ps-tinta-tenue:     #8E9184;

  /* --- Sobre oliva (texto invertido) --- */
  --ps-sobre-oliva:     #EDEFE7;
  --ps-sobre-oliva-2:   #C6C9BC;
  --ps-sobre-oliva-3:   #A8AC9D;
  --ps-sobre-oliva-4:   #85897B;

  /* --- Semánticos --- */
  --ps-verde:           #4E8C3A;  /* en stock, confirmación */
  --ps-verde-tenue:     #EFF5EC;
  --ps-error:           var(--ps-rojo);
  --ps-error-tenue:     var(--ps-rojo-tenue);

  /* --- Transparencias sobre oliva --- */
  --ps-velo-1:          rgba(255,255,255,.07);
  --ps-velo-2:          rgba(255,255,255,.10);
  --ps-borde-velo:      rgba(255,255,255,.14);
  --ps-borde-velo-alto: rgba(255,255,255,.34);
}

/* ==========================================================================
   TIPOGRAFÍA — Para-Sport
   Sin webfonts. Pila del sistema: cero bytes descargados, que es la razón de
   que la portada pese 79 KB y cargue en 0,23 s. El logotipo (sans itálica de
   cortes angulares, A sin travesaño) vive en los SVG de assets/, no en una
   fuente instalada.
   Si algún día se compra una tipografía de marca, se aloja en assets/fonts/ y
   se declara aquí con @font-face — nunca por CDN de Google.
   ========================================================================== */
:root {
  --ps-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; /* @kind font */
  --ps-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace; /* @kind font */

  /* Escala. Los tamaños con decimal vienen del tema y se respetan tal cual. */
  --ps-t-11:   11px;
  --ps-t-12:   12.5px;
  --ps-t-13:   13.5px;
  --ps-t-14:   14.5px;
  --ps-t-15:   15.5px;
  --ps-t-16:   16px;
  --ps-t-17:   17px;
  --ps-t-19:   19px;
  --ps-t-21:   21px;
  --ps-t-22:   22px;
  --ps-t-27:   27px;
  --ps-t-h1:   clamp(30px, 4.4vw, 47px); /* @kind font */
  --ps-t-titulo-pag: clamp(28px, 4vw, 42px); /* @kind font */

  /* Pesos. 650 y 750 son intencionados: la pila del sistema los interpola. */
  --ps-p-normal:  400; /* @kind font */
  --ps-p-medio:   500; /* @kind font */
  --ps-p-semi:    600; /* @kind font */
  --ps-p-fuerte:  650; /* @kind font */
  --ps-p-titulo:  750; /* @kind font */
  --ps-p-maximo:  800; /* @kind font */

  --ps-alto-titulo: 1.08; /* @kind font */
  --ps-alto-medio:  1.25; /* @kind font */
  --ps-alto-texto:  1.65; /* @kind font */

  --ps-track-titulo: -.02em; /* @kind font */
  --ps-track-etiqueta: .1em; /* @kind font */  /* mono en versalitas */

  --ps-medida: 78ch; /* @kind spacing */  /* ancho máximo de columna de texto */
}

/* Clave técnica: etiqueta mono en mayúsculas. Es el recurso de marca para
   metadatos (referencias, horarios, cifras, "DESDE 1986"). */
.ps-clave {
  font-family: var(--ps-mono);
  font-size: var(--ps-t-12);
  letter-spacing: var(--ps-track-etiqueta);
  text-transform: uppercase;
}

/* Cifras: siempre mono y tabulares. Precios, tallas, carga alar, tarifas. */
.ps-cifra-num {
  font-family: var(--ps-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--ps-p-fuerte);
}

/* ==========================================================================
   ESPACIO Y RETÍCULA
   Base de 4 px pero sin dogma: los valores heredados del tema (18, 26, 54)
   se conservan porque son los que están validados en producción.
   ========================================================================== */
:root {
  --ps-e-1:  4px;
  --ps-e-2:  8px;
  --ps-e-3:  12px;
  --ps-e-4:  14px;
  --ps-e-5:  18px;
  --ps-e-6:  24px;
  --ps-e-7:  26px;
  --ps-e-8:  32px;
  --ps-e-9:  44px;
  --ps-e-10: 54px;   /* aire vertical de sección */
  --ps-e-11: 68px;   /* aire del hero */

  --ps-ancho:      1440px;  /* contenedor — subido de 1180 el 12-ago: en pantallas anchas
                              (2500 px) 1180 dejaba media pantalla en blanco y las
                              tarjetas de producto quedaban minúsculas. */
  --ps-canal:      24px;    /* padding lateral del contenedor */
  --ps-hueco-rejilla: 18px; /* separación de tarjetas de producto */
  --ps-columnas-tienda: 4; /* @kind other */
}

/* ==========================================================================
   RADIOS
   Nada de esquinas muy redondeadas: es material técnico, no una app de ocio.
   3-4 px en piezas pequeñas, 8 px como máximo en la tarjeta de producto.
   ========================================================================== */
:root {
  --ps-r-1: 3px;   /* etiquetas, badges, onsale */
  --ps-r-2: 4px;   /* botones, campos */
  --ps-r-3: 5px;   /* fichas de marca, cajas de dato */
  --ps-r-4: 6px;   /* paneles, alertas grandes */
  --ps-r-5: 8px;   /* tarjeta de producto */
  --ps-r-pastilla: 10px; /* contador del carrito */
}

/* ==========================================================================
   SOMBRAS
   Todas tintadas con la tinta oliva (31,33,25), nunca negro puro, y siempre
   suaves: la sombra sirve para levantar una tarjeta, no para decorar.
   ========================================================================== */
:root {
  --ps-sombra-1: 0 6px 18px rgba(31,33,25,.08);   /* ficha en hover */
  --ps-sombra-2: 0 8px 24px rgba(31,33,25,.07);   /* categoría en hover */
  --ps-sombra-3: 0 12px 28px rgba(31,33,25,.18); /* tarjeta de producto en hover */
  --ps-sombra-4: 0 14px 30px rgba(31,33,25,.16); /* desplegable del menú */
}

/* ==========================================================================
   MOVIMIENTO
   Cortísimo y sin rebotes. Nada se mueve por decoración.
   ========================================================================== */
:root {
  --ps-t-rapida: .14s; /* @kind other */
  --ps-t-media:  .15s; /* @kind other */
  --ps-t-lenta:  .16s; /* @kind other */
  --ps-ease: ease; /* @kind other */
  --ps-elevacion-hover: translateY(-3px); /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root { --ps-t-rapida: 0s; /* @kind other */ --ps-t-media: 0s; /* @kind other */ --ps-t-lenta: 0s; /* @kind other */ }
}

/* ==========================================================================
   ALIAS SEMÁNTICOS
   Lo que se usa al maquetar. Si un día cambia el oliva, cambia arriba.
   ========================================================================== */
:root {
  /* Superficies */
  --superficie-pagina:    var(--ps-blanco);
  --superficie-apagada:   var(--ps-gris);
  --superficie-oscura:    var(--ps-oliva);
  --superficie-pie:       var(--ps-oliva-hondo);
  --superficie-tarjeta:   var(--ps-oliva);      /* la tarjeta de producto es oliva */
  --superficie-foto:      var(--ps-blanco);     /* la foto del producto va sobre blanco */

  /* Texto */
  --texto-cuerpo:         var(--ps-tinta);
  --texto-secundario:     var(--ps-tinta-suave);
  --texto-tenue:          var(--ps-tinta-tenue);
  --texto-invertido:      var(--ps-sobre-oliva);
  --texto-invertido-2:    var(--ps-sobre-oliva-2);
  --texto-enlace:         var(--ps-rojo);
  --texto-enlace-hover:   var(--ps-rojo-oscuro);

  /* Líneas y foco */
  --borde:                var(--ps-linea);
  --borde-fuerte:         var(--ps-oliva);
  --foco:                 var(--ps-rojo);

  /* Acciones */
  --accion-fondo:         var(--ps-rojo);
  --accion-fondo-hover:   var(--ps-rojo-oscuro);
  --accion-texto:         var(--ps-blanco);
  --accion-2-fondo:       var(--ps-oliva);       /* "Solicitar presupuesto" */
  --accion-2-fondo-hover: var(--ps-oliva-claro);

  /* Estados de producto */
  --estado-stock:         var(--ps-verde);
  --estado-sin-stock:     var(--ps-rojo);
}

/* Foco de teclado: obligatorio y visible en todo el sitio. */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Alias de compatibilidad: el tema llama --ps-wrap a lo que el sistema
   llama --ps-ancho. Se mantiene para no reescribir 40 reglas. */
:root { --ps-wrap: var(--ps-ancho); }


/* ==========================================================================
   BASE
   ========================================================================== */

body {
    color: var(--ps-tinta);
    background: var(--ps-blanco);
    font-family: var(--ps-sans);
}

a { color: var(--ps-rojo); }
a:hover { color: var(--ps-rojo-oscuro); }

.ps-wrap { max-width: var(--ps-wrap); margin: 0 auto; padding: 0 24px; }

/* Storefront pone su propio ancho; lo alineamos con el nuestro */
.site .col-full { max-width: var(--ps-wrap); }

:focus-visible { outline: 2px solid var(--ps-rojo); outline-offset: 2px; }

/* ==========================================================================
   BOTONES
   ========================================================================== */

.button,
button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: var(--ps-rojo);
    color: var(--ps-blanco);
    border: none;
    border-radius: 4px;
    font-weight: 650;
    letter-spacing: .01em;
    text-shadow: none;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: var(--ps-rojo-oscuro);
    color: var(--ps-blanco);
}

.ps-btn-ghost,
.woocommerce a.button.ps-btn-ghost {
    background: transparent;
    color: var(--ps-blanco);
    border: 1.5px solid rgba(255,255,255,.34);
}
.ps-btn-ghost:hover,
.woocommerce a.button.ps-btn-ghost:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.55);
    color: var(--ps-blanco);
}

/* ==========================================================================
   CABECERA
   ========================================================================== */

.site-header,
.ps-top {
    background: var(--ps-oliva);
    color: #EDEFE7;
    padding: 0;
    border: none;
}
.site-header { margin-bottom: 0; }

.ps-top-bar {
    display: flex; align-items: center; gap: 28px;
    padding: 9px 24px; font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    color: #B9BDAF;
}
.ps-tel { font-family: var(--ps-mono); color: #EDEFE7; }
.ps-tel:hover { color: var(--ps-rojo); }
.ps-sep { margin-left: auto; }

.ps-head {
    display: flex; align-items: center; gap: 32px;
    padding: 18px 24px 20px;
}

/* Marca provisional (se sustituye por assets/logo.svg cuando llegue) */
.ps-marca { display: inline-flex; align-items: center; gap: 11px; }
.ps-marca-ps {
    font-weight: 800; font-size: 26px; letter-spacing: -.06em; font-style: italic;
    color: var(--ps-rojo); border: 2.5px solid var(--ps-rojo);
    border-radius: 4px; padding: 1px 7px 2px; line-height: 1.05;
}
.ps-marca-txt {
    font-weight: 800; font-size: 25px; font-style: italic;
    color: #FFF; transform: skewX(-2deg);
}
.ps-logo-img { max-height: 46px; width: auto; display: block; }
.ps-logo, .ps-logo:hover { text-decoration: none; }

.ps-buscar { flex: 1; max-width: 460px; }
.ps-buscar form { margin: 0; position: relative; }
.ps-buscar input[type="search"],
.ps-buscar input[type="text"] {
    width: 100%; padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.07);
    color: #FFF; border-radius: 4px;
    font-family: var(--ps-sans); font-size: 14px;
}
.ps-buscar input::placeholder { color: #9DA192; }
.ps-buscar button,
.ps-buscar input[type="submit"] { display: none; }

.ps-acciones {
    display: flex; align-items: center; gap: 22px;
    margin-left: auto; font-size: 14px;
}
.ps-acciones a { color: #EDEFE7; }
.ps-acciones a:hover { color: var(--ps-rojo); }
.ps-carrito { display: inline-flex; align-items: center; gap: 9px; }
.ps-n {
    background: var(--ps-rojo); color: #FFF; font-family: var(--ps-mono);
    font-size: 12px; font-weight: 700; min-width: 20px; height: 20px;
    border-radius: 10px; display: inline-flex; align-items: center;
    justify-content: center; padding: 0 6px;
}

.ps-menu { border-top: 1px solid rgba(255,255,255,.10); }

/* OJO: acotar al primer nivel con `> ul`. Sin eso, estas reglas se aplican
   también a los desplegables y los dejan en fila, sin fondo y fuera de sitio. */
.ps-menu .ps-wrap > ul {
    display: flex; gap: 24px; list-style: none; margin: 0; padding: 0 24px;
    flex-wrap: wrap;
}
.ps-menu .ps-wrap > ul > li { margin: 0; position: relative; }
.ps-menu .ps-wrap > ul > li > a {
    display: block; padding: 13px 0; font-size: 14px; font-weight: 600;
    color: #DDE0D5; border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.ps-menu .ps-wrap > ul > li > a:hover,
.ps-menu .current-menu-item > a {
    color: #FFF; border-bottom-color: var(--ps-rojo);
}

/* Marca de "tiene desplegable". */
.ps-menu .ps-con-hijas > a::after {
    content: "";
    display: inline-block; vertical-align: middle;
    margin-left: 7px;
    border: 4px solid transparent;
    border-top-color: currentColor;
    transform: translateY(2px);
}

/* --- Desplegable ------------------------------------------------------- */

.ps-submenu {
    position: absolute; top: 100%; left: -14px; z-index: 60;
    min-width: 252px;
    margin: 0; padding: 8px 0;
    list-style: none;
    background: var(--ps-blanco);
    border: 1px solid var(--ps-linea);
    border-top: 3px solid var(--ps-rojo);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 14px 30px rgba(31,33,25,.16);
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.ps-menu .ps-con-hijas:hover > .ps-submenu,
.ps-menu .ps-con-hijas:focus-within > .ps-submenu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
/* Puente invisible sobre el hueco entre el enlace y el panel: sin esto el
   desplegable se cierra al mover el ratón hacia él. */
.ps-menu .ps-con-hijas > .ps-submenu::before {
    content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 6px;
}
.ps-submenu li { margin: 0; }
.ps-submenu a {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 9px 18px;
    font-size: 14px; font-weight: 500;
    color: var(--ps-tinta);
    border-left: 3px solid transparent;
}
.ps-submenu a:hover {
    background: var(--ps-gris);
    border-left-color: var(--ps-rojo);
    color: var(--ps-tinta);
}
.ps-sub-n {
    font-family: var(--ps-mono); font-size: 11.5px;
    color: var(--ps-tinta-tenue); font-variant-numeric: tabular-nums;
}
.ps-submenu-marcas { column-count: 2; column-gap: 0; min-width: 340px; }
.ps-submenu-marcas li { break-inside: avoid; }

/* Las páginas fijas (servicio técnico, sobre nosotros, contacto) van al final
   y algo más apagadas: el catálogo manda, ellas acompañan. */
.ps-menu .ps-menu-pag-inicio { margin-left: auto; }
.ps-menu .ps-menu-pag > a { color: #A8AC9D; font-weight: 500; font-size: 13px; }
.ps-menu .ps-menu-pag > a:hover { color: #FFF; }

/* ==========================================================================
   BARRA DE CONFIANZA
   ========================================================================== */

.ps-confianza { background: var(--ps-gris); border-bottom: 1px solid var(--ps-linea); }
.ps-confianza ul {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
    list-style: none; margin: 0; padding: 16px 24px;
}
.ps-confianza li { margin: 0; font-size: 13.5px; line-height: 1.4; }
.ps-confianza b { display: block; font-weight: 650; color: var(--ps-tinta); }
.ps-confianza span { color: var(--ps-tinta-suave); font-size: 12.5px; }

/* ==========================================================================
   PORTADA
   ========================================================================== */

.ps-hero {
    background: var(--ps-oliva); color: #FFF;
    padding: 68px 0 72px; position: relative; overflow: hidden;
}
.ps-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(90% 130% at 88% 8%, rgba(248,41,0,.16), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.22));
}
.ps-hero .ps-wrap { position: relative; z-index: 1; max-width: 800px; }
.ps-eyebrow {
    font-family: var(--ps-mono); font-size: 12.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ps-rojo); margin: 0 0 16px;
}
.ps-hero h1 {
    font-size: clamp(30px, 4.4vw, 47px); line-height: 1.08; margin: 0 0 18px;
    font-weight: 800; letter-spacing: -.02em; color: #FFF; text-wrap: balance;
}
.ps-hero-txt { font-size: 17px; color: #C6C9BC; margin: 0 0 30px; max-width: 60ch; }
.ps-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.ps-seccion { padding: 54px 0; }
.ps-cab { display: flex; align-items: baseline; gap: 18px; margin-bottom: 26px; }
.ps-cab h2 { font-size: 21px; font-weight: 750; margin: 0; letter-spacing: -.01em; }
.ps-todos { margin-left: auto; font-size: 13.5px; font-weight: 600; }

.ps-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ps-cat {
    border: 1px solid var(--ps-linea); border-radius: 6px; padding: 20px 14px;
    text-align: center; background: var(--ps-blanco); color: var(--ps-tinta);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ps-cat:hover {
    border-color: var(--ps-oliva); color: var(--ps-tinta);
    box-shadow: 0 8px 24px rgba(31,33,25,.07);
}
.ps-cat-n { font-weight: 650; font-size: 14px; display: block; }
.ps-cat-c { font-family: var(--ps-mono); font-size: 11.5px; color: var(--ps-tinta-tenue); }

.ps-marcas { background: var(--ps-gris); }
.ps-marcas-fila { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
.ps-logo-m {
    background: #FFF; border: 1px solid var(--ps-linea); border-radius: 5px;
    height: 62px; display: flex; align-items: center; justify-content: center;
    font-weight: 750; font-size: 13px; color: var(--ps-tinta-suave);
    text-align: center; padding: 6px;
    transition: border-color .15s ease, color .15s ease;
}
.ps-logo-m:hover { border-color: var(--ps-oliva); color: var(--ps-tinta); }

.ps-aseso { background: var(--ps-oliva); color: #FFF; padding: 54px 0; }
.ps-aseso .ps-wrap {
    display: grid; grid-template-columns: 1.25fr 1fr; gap: 54px; align-items: center;
}
.ps-aseso h2 { font-size: 27px; margin: 0 0 13px; font-weight: 750; color: #FFF; }
.ps-aseso p { color: #C6C9BC; margin: 0 0 22px; font-size: 15.5px; }
.ps-contacto-b { display: flex; gap: 11px; flex-wrap: wrap; }
.ps-dato {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px; padding: 15px 17px;
}
.ps-k {
    font-family: var(--ps-mono); font-size: 10.5px; letter-spacing: .09em;
    text-transform: uppercase; color: #9BA08E; display: block; margin-bottom: 3px;
}
.ps-v { font-family: var(--ps-mono); font-size: 15px; font-weight: 650; color: #FFF; }

/* ==========================================================================
   TIENDA — tarjeta de producto
   Tarjeta oliva con la foto sobre blanco, como la maqueta del casco Fusion.
   El min-width:0 es lo que evita que el texto reviente la columna.
   ========================================================================== */

.woocommerce ul.products,
ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* WooCommerce y el tema meten un clearfix con ::before/::after. En una
   rejilla esos pseudo-elementos se convierten en CELDAS y desplazan todos
   los productos una posición. Hay que anularlos SIN el prefijo .woocommerce,
   porque la portada no lleva esa clase en el body. */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
}

.woocommerce ul.products li.product,
ul.products li.product {
    background: var(--ps-oliva);
    border-radius: 8px;
    padding: 14px;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: transform .16s ease, box-shadow .16s ease;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(31,33,25,.18);
}

.woocommerce ul.products li.product a img,
ul.products li.product a img {
    background: var(--ps-blanco);
    border-radius: 5px;
    margin: 0 0 13px;
    padding: 8px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
    color: #FFF;
    font-size: 14.5px;
    font-weight: 650;
    padding: 0 0 9px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.woocommerce ul.products li.product .price,
ul.products li.product .price {
    color: #FFF;
    font-family: var(--ps-mono);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: block;
    margin: 0 0 12px;
}
.woocommerce ul.products li.product .price del { color: #9BA08E; }
.woocommerce ul.products li.product .price .woocommerce-price-suffix,
ul.products li.product .price .woocommerce-price-suffix {
    color: #9BA08E; font-size: 10.5px; font-weight: 400;
}

.woocommerce ul.products li.product .button,
ul.products li.product .button {
    margin-top: auto;
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding: 11px 10px;
}

.woocommerce ul.products li.product .star-rating { color: var(--ps-rojo); margin: 0 auto 8px; }

.woocommerce span.onsale {
    background: var(--ps-rojo); color: var(--ps-blanco);
    border-radius: 3px; min-height: auto; min-width: auto;
    padding: 3px 9px; line-height: 1.5; font-weight: 700;
    font-family: var(--ps-mono); font-size: 11px;
    top: 8px; left: 8px; right: auto; margin: 0;
}

/* ==========================================================================
   FICHAS DE SUBCATEGORÍA

   En una categoría con hijas, WooCommerce lista primero las subcategorías.
   Como ninguna tiene foto todavía, saldrían cuatro cuadros grises con la
   imagen de relleno: se ocultan y queda una ficha de texto, igual que las
   de la portada. El día que haya fotos, se ven solas.
   ========================================================================== */

ul.products li.product-category {
    background: var(--ps-blanco);
    border: 1px solid var(--ps-linea);
    border-radius: 6px;
    padding: 0;
    min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}
ul.products li.product-category:hover {
    border-color: var(--ps-oliva);
    box-shadow: 0 6px 18px rgba(31,33,25,.08);
}
ul.products li.product-category > a {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 108px; padding: 20px 16px;
    text-align: center; text-decoration: none;
}
/* Sólo la imagen de relleno: si algún día la categoría tiene foto propia,
   esta regla deja de aplicarse y la foto se ve. */
ul.products li.product-category img[src*="woocommerce-placeholder"] { display: none; }
ul.products li.product-category img { margin: 0 0 12px; border-radius: 4px; }

ul.products li.product-category .woocommerce-loop-category__title {
    font-size: 14.5px; font-weight: 650; line-height: 1.3;
    color: var(--ps-tinta); margin: 0; padding: 0;
    text-transform: uppercase; letter-spacing: .02em;
}
ul.products li.product-category .count {
    display: block; margin-top: 7px;
    background: none; color: var(--ps-tinta-tenue);
    font-family: var(--ps-mono); font-size: 11.5px; font-weight: 400;
    text-transform: none; letter-spacing: 0;
}

/* ==========================================================================
   FICHA DE PRODUCTO — sobre fondo blanco: aquí van specs y tablas de tallas,
   que son los textos que cierran ventas de 3.000 €.
   ========================================================================== */

.single-product div.product .price {
    color: var(--ps-tinta);
    font-family: var(--ps-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.single-product div.product .price .woocommerce-price-suffix {
    font-family: var(--ps-sans); font-size: 12.5px; color: var(--ps-tinta-suave);
}
.single-product div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--ps-rojo);
}
.woocommerce div.product p.stock.out-of-stock { color: var(--ps-rojo); font-weight: 650; }
.woocommerce div.product p.stock.in-stock { color: #4E8C3A; font-weight: 650; }

/* ==========================================================================
   AVISOS DE WOOCOMMERCE

   Storefront los pinta como barras de color plano: azul #3d9cd2 para la
   información, verde #0f834d para la confirmación y naranja #e2401c para el
   error. Ninguno es de la marca y el azul chirría con todo lo demás.

   Se rehacen con el mismo lenguaje que los avisos de las páginas de
   contenido (.ps-alerta): fondo teñido, texto oscuro y una franja de color a
   la izquierda. El color sólo aparece donde significa algo.
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
    background-color: var(--ps-gris);
    color: var(--ps-tinta);
    border-left: 3px solid var(--ps-oliva);
    border-radius: 0 4px 4px 0;
    padding: 1.05em 1.6em 1.05em 3.2em;
    margin-bottom: 1.8em;
    font-size: 15px;
}

/* El icono lo coloca Storefront con ::before en blanco: hay que recolorearlo
   o desaparece sobre el fondo claro. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
p.no-comments::before {
    color: var(--ps-oliva);
    left: 1.15em;
    top: 1.1em;
}

/* Confirmación: el verde es el mismo que ya usa el tema para "en stock",
   así que el sitio habla con un solo verde. */
.woocommerce-message {
    background-color: #EFF5EC;
    border-left-color: #4E8C3A;
}
.woocommerce-message::before { color: #4E8C3A; }

/* Información: neutro. No es ni bueno ni malo, no necesita color. */
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
    background-color: var(--ps-gris);
    border-left-color: var(--ps-oliva);
}

/* Error: aquí sí manda el rojo de marca. */
.woocommerce-error {
    background-color: #FDF3F0;
    border-left-color: var(--ps-rojo);
}
.woocommerce-error::before { color: var(--ps-rojo); }

.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
    color: var(--ps-rojo);
    text-decoration: underline;
}
.woocommerce-message a:not(.button):hover,
.woocommerce-info a:not(.button):hover,
.woocommerce-error a:not(.button):hover {
    color: var(--ps-rojo-oscuro);
    opacity: 1;
}

/* El botón que va dentro del aviso ("Ver carrito") lo dejaba Storefront como
   texto blanco sobre color: sobre fondo claro sería invisible. Se convierte
   en un botón de verdad, que además es la acción que queremos que se pulse. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-noreviews .button {
    float: right;
    background: var(--ps-rojo);
    color: var(--ps-blanco);
    border: 0;
    border-radius: 3px;
    padding: .45em 1.1em;
    margin: -.15em 0 0 1.2em;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover,
.woocommerce-noreviews .button:hover {
    background: var(--ps-rojo-oscuro);
    color: var(--ps-blanco);
    opacity: 1;
}

/* "No se han encontrado productos" no es un aviso, es un estado vacío:
   Storefront ya lo deja sin caja y así se queda. */
.woocommerce-info.woocommerce-no-products-found {
    background-color: transparent;
    border: 0;
    padding: 1em 0;
    color: var(--ps-tinta-suave);
}

/* ==========================================================================
   ELEMENTOS PROPIOS (vienen de mu-plugins, independientes del tema)
   ========================================================================== */

.ps-bajo-pedido {
    display: inline-block;
    background: var(--ps-rojo); color: var(--ps-blanco);
    font-family: var(--ps-mono);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 3px;
    margin-bottom: 7px; width: fit-content;
}

.ps-solicitar-presupuesto {
    display: inline-block;
    background: var(--ps-oliva); color: var(--ps-blanco) !important;
    font-weight: 600; padding: .6em 1.2em; border-radius: 4px;
    text-decoration: none; transition: background .15s ease;
}
.ps-solicitar-presupuesto:hover { background: var(--ps-oliva-claro); color: var(--ps-blanco) !important; }

/* En la tarjeta oliva, el botón de presupuesto hace de llamada a la acción:
   ocupa el ancho completo y se coloca abajo, como el "Añadir al carrito". */
ul.products li.product .ps-solicitar-presupuesto {
    background: var(--ps-rojo);
    width: 100%;
    text-align: center;
    margin-top: auto;
    padding: 11px 10px;
    font-size: 14px;
}
ul.products li.product .ps-solicitar-presupuesto:hover { background: var(--ps-rojo-oscuro); }

/* (El botón "Leer más" duplicado en productos de presupuesto se quita desde
   functions.php, no con CSS: es más fiable.) */

/* ==========================================================================
   PIE
   ========================================================================== */

.site-footer {
    background: var(--ps-oliva-hondo);
    color: #A8AC9D;
    padding: 44px 0 22px;
}
.site-footer a { color: #A8AC9D; }
.site-footer a:hover { color: var(--ps-rojo); }
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer .widget-title { color: #FFF; }

.ps-pie-bajo {
    border-top: 1px solid rgba(255,255,255,.09);
    margin-top: 30px; padding-top: 18px;
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 12.5px; color: #85897B;
}
.ps-der { margin-left: auto; font-family: var(--ps-mono); }

/* ==========================================================================
   PÁGINAS DE CONTENIDO (.ps-pagina)

   Sobre Nosotros, Contacto, Ayuda y Servicio L&B. Antes se maquetaban con
   WPBakery; ahora son HTML limpio y el estilo vive aquí. Así el contenido
   sobrevive a cualquier cambio de plugin.
   ========================================================================== */

.page .entry-header .entry-title {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    text-wrap: balance;
    margin-bottom: .5em;
}
.page .entry-header .entry-title::after {
    content: ""; display: block;
    width: 56px; height: 3px; background: var(--ps-rojo);
    margin-top: 18px;
}

.ps-pagina { max-width: 78ch; }
.ps-pagina > * + * { margin-top: 1.15em; }
.ps-pagina h2 {
    font-size: 22px; line-height: 1.25; margin-top: 2.2em;
    padding-bottom: .35em; border-bottom: 1px solid var(--ps-linea);
}
.ps-pagina h3 { font-size: 17px; margin-top: 1.8em; }
.ps-pagina h4 { font-size: 15px; margin-top: 1.5em; color: var(--ps-tinta-suave); }
.ps-pagina p, .ps-pagina li { line-height: 1.65; }
.ps-pagina ul, .ps-pagina ol { padding-left: 1.3em; }
.ps-pagina li + li { margin-top: .45em; }

.ps-intro {
    font-size: 18px; line-height: 1.6;
    color: var(--ps-tinta-suave);
    border-left: 3px solid var(--ps-linea);
    padding-left: 18px;
}

/* Aviso destacado: se usa para lo que, si se pasa por alto, cuesta dinero
   o una unidad rota (garantía anulada, dirección de envío equivocada). */
.ps-alerta {
    background: #FDF3F0; border-left: 3px solid var(--ps-rojo);
    padding: 14px 18px; border-radius: 0 4px 4px 0;
}
.ps-alerta-fuerte { background: var(--ps-rojo); color: #FFF; border-left-color: var(--ps-rojo-oscuro); }

.ps-aseso-mini {
    margin-top: 3em; padding: 26px 28px;
    background: var(--ps-gris); border-radius: 6px;
}
.ps-aseso-mini h2 { margin-top: 0; border: 0; padding: 0; }
.ps-aseso-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.2em; }

/* --- Ayuda: acordeón nativo, sin JavaScript ni plugin --------------------- */

.ps-acc {
    border: 1px solid var(--ps-linea);
    border-radius: 5px;
    background: var(--ps-blanco);
}
.ps-acc + .ps-acc { margin-top: 10px; }
.ps-acc > summary {
    cursor: pointer; list-style: none;
    padding: 16px 20px;
    font-weight: 650; font-size: 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.ps-acc > summary::-webkit-details-marker { display: none; }
.ps-acc > summary::after {
    content: "+";
    font-family: var(--ps-mono); font-size: 20px; font-weight: 400;
    color: var(--ps-rojo); line-height: 1;
}
.ps-acc[open] > summary::after { content: "–"; }
.ps-acc[open] > summary { border-bottom: 1px solid var(--ps-linea); }
.ps-acc > summary:hover { background: var(--ps-gris); }
.ps-acc-cuerpo { padding: 4px 20px 20px; }
.ps-acc-cuerpo > * + * { margin-top: 1em; }
.ps-acc-cuerpo h3 { font-size: 15px; margin-top: 1.6em; }
.ps-acc-cuerpo h4 { font-size: 14px; margin-top: 1.3em; }
.ps-acc-cuerpo p, .ps-acc-cuerpo li { font-size: 14.5px; color: var(--ps-tinta-suave); }
.ps-ayuda-pie { margin-top: 2.4em; font-size: 14.5px; color: var(--ps-tinta-suave); }

/* Tabla de tratamientos del RGPD: son cuatro columnas de texto denso, así que
   se deja respirar y se desplaza dentro de su caja en pantallas estrechas. */
.ps-tabla-datos { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ps-tabla-datos th, .ps-tabla-datos td {
    border: 1px solid var(--ps-linea); padding: 10px 12px;
    text-align: left; vertical-align: top; line-height: 1.5;
}
.ps-tabla-datos thead th { background: var(--ps-gris); font-size: 12.5px; }
.ps-tabla-datos tbody td:first-child { font-weight: 600; color: var(--ps-tinta); }
.ps-fecha-rev {
    font-family: var(--ps-mono); font-size: 12px;
    color: var(--ps-tinta-tenue); margin-top: 2em;
}

/* --- Servicio técnico L&B ------------------------------------------------ */

.ps-sello {
    background: var(--ps-oliva); color: #E6E9DD;
    padding: 22px 26px; border-radius: 6px;
}
.ps-sello-k {
    font-family: var(--ps-mono); font-size: 11.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ps-rojo); margin: 0 0 8px;
}
.ps-sello-v { font-size: 18px; line-height: 1.45; margin: 0; }
.ps-sello-v strong { color: #FFF; }
.ps-sello-n { font-size: 13.5px; margin: 10px 0 0; color: #A8AC9D; }
.ps-sello-n a { color: #E6E9DD; }

.ps-triaje { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ps-triaje-c {
    border: 1px solid var(--ps-linea); border-top-width: 3px;
    border-radius: 5px; padding: 18px;
}
.ps-triaje-c.ps-ok { border-top-color: #4E8C3A; }
.ps-triaje-c.ps-dk { border-top-color: var(--ps-tinta-tenue); }
.ps-triaje-c.ps-no { border-top-color: var(--ps-rojo); }
.ps-triaje-t { font-weight: 700; font-size: 15px; margin: 0 0 12px; }
.ps-triaje ul { margin: 0; padding-left: 1.1em; }
.ps-triaje li { font-size: 14px; }
.ps-triaje-n { font-size: 13px; color: var(--ps-tinta-suave); margin: 14px 0 0; }
.ps-nota-li { color: var(--ps-tinta-tenue); font-size: 13px; }

.ps-tabla-precios { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ps-tabla-precios th, .ps-tabla-precios td {
    border: 1px solid var(--ps-linea); padding: 11px 14px; text-align: left;
    vertical-align: top;
}
.ps-tabla-precios thead th { background: var(--ps-gris); font-size: 13px; }
.ps-precio-c {
    font-family: var(--ps-mono); font-weight: 700; font-variant-numeric: tabular-nums;
    white-space: nowrap; text-align: right;
}
/* Precio base bajo el precio final: la tarifa de L&B se publica sin IVA y el
   cliente paga con IVA. Se enseñan los dos para que nadie se lleve sorpresas. */
.ps-precio-n {
    display: block; font-weight: 400; font-size: 12px;
    color: var(--ps-tinta-tenue); margin-top: 3px;
}
.ps-td-n { display: block; font-size: 12.5px; color: var(--ps-tinta-tenue); margin-top: 3px; }
.ps-tabla-n { font-size: 13px; color: var(--ps-tinta-suave); }

/* OJO: el número NO se coloca con `display: grid` sobre el <li>. En una
   rejilla, cada elemento hijo pasa a ser una celda —también los <strong> y
   los <a> que van dentro de la frase—, así que el paso se rompía en trozos
   repartidos por las columnas. Con posición absoluta el texto sigue siendo
   un párrafo normal. */
/* Se escribe como `.ps-pagina .ps-pasos` porque la regla base `.ps-pagina ol`
   tiene más especificidad que `.ps-pasos` a secas y le ganaba el padding. */
.ps-pagina .ps-pasos { counter-reset: paso; list-style: none; padding-left: 0; margin-left: 0; }
.ps-pagina .ps-pasos > li + li { margin-top: 0; }
.ps-pasos > li {
    counter-increment: paso;
    position: relative;
    padding: 14px 0 14px 48px;
    border-bottom: 1px solid var(--ps-linea);
    line-height: 1.6;
}
.ps-pasos > li::before {
    content: counter(paso);
    position: absolute; left: 0; top: 14px;
    font-family: var(--ps-mono); font-weight: 700; font-size: 14px;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--ps-oliva); color: #FFF;
    display: flex; align-items: center; justify-content: center;
}
/* Los <strong> se dejan en línea a propósito: en varios pasos son la entrada
   de la frase ("Envía el aparato a la dirección de abajo…") y ponerlos en
   bloque partiría la oración por la mitad. */

.ps-direcciones { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ps-dir { border: 1px solid var(--ps-linea); border-radius: 5px; padding: 18px; }
.ps-dir-k {
    font-family: var(--ps-mono); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ps-tinta-tenue); margin: 0 0 10px;
}
.ps-dir address { font-style: normal; line-height: 1.6; font-size: 14.5px; margin: 0; }
.ps-dir-n { color: var(--ps-tinta-suave); }
.ps-dir-c { margin: 12px 0 0; font-size: 14px; font-family: var(--ps-mono); }

.ps-consejos > li { font-size: 15px; }

.ps-doc {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    border: 1px solid var(--ps-linea); border-radius: 6px;
    padding: 20px 24px; background: var(--ps-gris);
    margin-top: 2.4em;
}
.ps-doc-k {
    font-family: var(--ps-mono); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ps-tinta-tenue); margin: 0 0 6px;
}
.ps-doc-t { font-weight: 650; margin: 0; }
.ps-doc-n { font-size: 13px; color: var(--ps-tinta-suave); margin: 5px 0 0; }

/* --- Sobre Nosotros ------------------------------------------------------ */

.ps-cifras {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--ps-linea); border: 1px solid var(--ps-linea);
    border-radius: 6px; overflow: hidden;
}
.ps-cifra { background: var(--ps-blanco); padding: 20px 14px; text-align: center; }
.ps-cifra-n {
    display: block; font-family: var(--ps-mono); font-size: 24px; font-weight: 700;
    color: var(--ps-rojo); line-height: 1;
}
.ps-cifra-k { display: block; font-size: 12.5px; color: var(--ps-tinta-suave); margin-top: 8px; }

.ps-mision {
    font-size: 19px; line-height: 1.5; font-weight: 600;
    border-left: 3px solid var(--ps-rojo); padding-left: 20px;
}
.ps-valores > li { font-size: 15.5px; }

/* --- Contacto ------------------------------------------------------------ */

.ps-contacto { max-width: none; }
.ps-contacto-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 40px; }
.ps-contacto-form h2 { margin-top: 0; }
.ps-contacto-datos { display: flex; flex-direction: column; gap: 14px; }
.ps-dato-b { border: 1px solid var(--ps-linea); border-radius: 5px; padding: 18px; }
.ps-dato-k {
    font-family: var(--ps-mono); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ps-tinta-tenue); margin: 0 0 10px;
}
.ps-dato-v { font-size: 16px; font-style: normal; line-height: 1.55; margin: 0; }
.ps-dato-alt { font-size: 14.5px; color: var(--ps-tinta-suave); margin-top: 3px; }
.ps-dato-n { font-size: 13px; color: var(--ps-tinta-suave); margin: 9px 0 0; }
.ps-dato-aviso { border-color: var(--ps-rojo); background: #FDF3F0; }
.ps-dato-aviso .ps-dato-k { color: var(--ps-rojo); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {
    .ps-contacto-grid { grid-template-columns: 1fr; gap: 30px; }
    .ps-triaje { grid-template-columns: 1fr; }
    .ps-cifras { grid-template-columns: repeat(2, 1fr); }
    .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .ps-cats { grid-template-columns: repeat(3, 1fr); }
    .ps-marcas-fila { grid-template-columns: repeat(4, 1fr); }
    .ps-confianza ul { grid-template-columns: repeat(2, 1fr); }
    .ps-aseso .ps-wrap { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 640px) {
    .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
    .ps-cats { grid-template-columns: repeat(2, 1fr); }
    .ps-marcas-fila { grid-template-columns: repeat(3, 1fr); }
    .ps-head { flex-wrap: wrap; gap: 14px; }
    .ps-buscar { order: 3; max-width: none; flex-basis: 100%; }
    .ps-menu .ps-wrap > ul { overflow-x: auto; flex-wrap: nowrap; gap: 20px; }
    /* En táctil no hay hover: el desplegable sobra. El enlace lleva a la
       categoría, que ya enseña sus subcategorías como fichas. */
    .ps-submenu { display: none; }
    .ps-menu .ps-con-hijas > a::after { display: none; }
    .ps-top-bar { font-size: 12px; gap: 14px; }
    .ps-oculta-movil { display: none; }

    .ps-direcciones { grid-template-columns: 1fr; }
    .ps-doc { flex-direction: column; align-items: flex-start; }
    .ps-intro { font-size: 16.5px; }
    /* La tabla de tarifas no se comprime: se desplaza dentro de su caja
       para que la página nunca haga scroll lateral. */
    .ps-tabla-precios,
    .ps-tabla-datos { display: block; overflow-x: auto; white-space: nowrap; }
    .ps-tabla-precios td, .ps-tabla-precios th { white-space: normal; min-width: 120px; }
    .ps-tabla-datos td, .ps-tabla-datos th { white-space: normal; min-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ==========================================================================
   FICHA DE PRODUCTO — maqueta del sistema de diseño (12-ago-2026)

   Valores tomados de design-system/components/: Etiqueta, Precio, EstadoStock,
   Boton y Sello. Se aplican sobre el marcado que ya genera WooCommerce, sin
   sobrescribir plantillas.
   ========================================================================== */

/* --- Dos columnas: la foto manda un poco sobre el texto -------------------- */

.single-product div.product {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: start;
}
.single-product div.product > .woocommerce-product-gallery { grid-column: 1; margin: 0; float: none; width: auto; }
.single-product div.product > .summary { grid-column: 2; margin: 0; float: none; width: auto; }
/* Lo que va a lo ancho, bajo las dos columnas. */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells,
.single-product div.product > .ps-sellos,
.single-product div.product > .woocommerce-product-gallery + .summary ~ * { grid-column: 1 / -1; }

/* --- Etiquetas sobre el título ------------------------------------------- */

.ps-f-etiquetas { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.ps-etiqueta {
    display: inline-block; width: fit-content;
    font-family: var(--ps-mono); font-size: 10.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 8px; border-radius: var(--ps-r-1);
}
.ps-etiqueta--rojo   { background: var(--ps-rojo);  color: var(--ps-blanco); }
.ps-etiqueta--oliva  { background: var(--ps-oliva); color: var(--ps-blanco); }
.ps-etiqueta--neutro { background: var(--ps-gris);  color: var(--ps-tinta-suave); }

/* --- Título, referencia --------------------------------------------------- */

.single-product .summary .product_title {
    font-size: var(--ps-t-titulo-pag);
    line-height: var(--ps-alto-titulo);
    letter-spacing: var(--ps-track-titulo);
    font-weight: var(--ps-p-titulo);
    margin: 0 0 10px;
}
.ps-f-ref {
    font-family: var(--ps-mono); font-size: var(--ps-t-12);
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--ps-tinta-tenue); margin: 0 0 22px;
}

/* --- Precio grande -------------------------------------------------------- */

.single-product .summary .price {
    font-family: var(--ps-mono); font-size: 26px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ps-tinta); display: block; margin: 0 0 8px;
}
.single-product .summary .price del { color: var(--ps-tinta-tenue); font-weight: 400; margin-right: 8px; }
.single-product .summary .price ins { text-decoration: none; }
.single-product .summary .price .woocommerce-price-suffix {
    font-family: var(--ps-sans); font-size: var(--ps-t-12); font-weight: 400;
    margin-left: 8px; color: var(--ps-tinta-suave);
}

/* --- Estado y plazo ------------------------------------------------------- */

.ps-f-estado { font-weight: var(--ps-p-fuerte); font-size: var(--ps-t-14); margin: 0 0 22px; }
.ps-f-estado--pedido { color: var(--ps-tinta-suave); }
.ps-f-estado--stock  { color: var(--ps-verde); }
.single-product .summary p.stock { display: none; } /* lo dice ya la línea de arriba */

/* --- Descripción corta ---------------------------------------------------- */

.single-product .summary .woocommerce-product-details__short-description {
    font-size: var(--ps-t-16); line-height: var(--ps-alto-texto);
    color: var(--ps-tinta-suave); margin: 0 0 26px; max-width: 56ch;
}

/* --- Comprar -------------------------------------------------------------- */

.single-product .summary form.cart { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.single-product .summary form.cart .quantity input.qty {
    width: 72px; padding: 12px;
    border: 1px solid var(--ps-linea); border-radius: var(--ps-r-2);
    font-family: var(--ps-mono); font-size: 15px; text-align: center;
}
.single-product .summary form.cart button.single_add_to_cart_button {
    font-size: 15px; padding: 13px 24px; border-radius: var(--ps-r-2);
    background: var(--ps-rojo); color: var(--ps-blanco); font-weight: var(--ps-p-fuerte);
}
.single-product .summary form.cart button.single_add_to_cart_button:hover { background: var(--ps-rojo-oscuro); }

.ps-btn-consultar,
.woocommerce .ps-btn-consultar {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ps-oliva); color: var(--ps-blanco) !important;
    font-size: 15px; font-weight: var(--ps-p-fuerte);
    padding: 13px 24px; border-radius: var(--ps-r-2);
    text-decoration: none; margin: 0 0 14px;
    transition: background-color var(--ps-t-media) var(--ps-ease);
}
.ps-btn-consultar:hover,
.woocommerce .ps-btn-consultar:hover { background: var(--ps-oliva-claro); color: var(--ps-blanco) !important; }

.ps-f-tranquilidad { font-size: var(--ps-t-13); color: var(--ps-tinta-tenue); margin: 0 0 30px; }

/* --- Sellos de autoridad -------------------------------------------------- */

/* auto-fit: con dos sellos van uno al lado del otro; con uno solo ocupa toda
   la fila. Con "1fr 1fr" fijo, un sello suelto se quedaba a media anchura y el
   hueco de al lado parecía que faltaba algo. */
.ps-sellos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin: 56px 0 0; }
.ps-sello {
    background: var(--ps-oliva); color: var(--ps-sobre-oliva);
    border-radius: var(--ps-r-4); padding: 24px 26px;
}
.ps-sello-k {
    font-family: var(--ps-mono); font-size: 11.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ps-rojo); margin: 0 0 8px;
}
.ps-sello-v { font-size: var(--ps-t-19); color: #FFF; margin: 0 0 8px; font-weight: var(--ps-p-semi); }
.ps-sello-n { font-size: var(--ps-t-13); color: var(--ps-sobre-oliva-3); margin: 0; }
.ps-sello-n a { color: var(--ps-sobre-oliva-2); text-decoration: underline; }
.ps-sello-n a:hover { color: #FFF; }

/* --- Migas de pan --------------------------------------------------------- */

.woocommerce-breadcrumb {
    font-family: var(--ps-mono); font-size: var(--ps-t-12);
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--ps-tinta-tenue); margin: 0 0 24px;
}
.woocommerce-breadcrumb a { color: inherit; text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--ps-rojo); }

@media (max-width: 1000px) {
    .single-product div.product { grid-template-columns: 1fr; gap: 28px; }
    .single-product div.product > .woocommerce-product-gallery,
    .single-product div.product > .summary { grid-column: 1; }
    .ps-sellos { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TIENDA A ANCHO COMPLETO

   Storefront reparte 73,9% de contenido y 22% de barra lateral. En la tienda
   no hay lateral: los filtros van en horizontal, como en la maqueta.
   ========================================================================== */

.ps-sin-lateral .content-area {
    width: 100%;
    float: none;
    margin-right: 0;
}
.ps-sin-lateral #secondary,
.ps-sin-lateral .widget-area { display: none; }

/* ==========================================================================
   NAVEGACIÓN EN UNA SOLA LÍNEA

   Con 10 elementos el menú se partía en dos filas y "CONTACTO" caía solo.
   ========================================================================== */

.ps-menu .ps-wrap > ul { flex-wrap: nowrap; gap: 20px; overflow: visible; }
.ps-menu .ps-wrap > ul > li > a { font-size: 13.5px; }
.ps-menu .ps-menu-pag > a { font-size: 12.5px; }
.ps-menu .ps-menu-pag-inicio { margin-left: auto; padding-left: 10px; }

@media (max-width: 1240px) {
    .ps-menu .ps-wrap > ul { gap: 15px; }
    .ps-menu .ps-wrap > ul > li > a { font-size: 12.5px; }
    .ps-menu .ps-menu-pag > a { font-size: 11.5px; }
}

.ps-miga-sep { color: var(--ps-tinta-tenue); margin: 0 2px; }

/* ==========================================================================
   LISTADO DE CATEGORÍA — cabecera y filtros
   ========================================================================== */

.woocommerce-products-header { margin: 0 0 6px; }
.woocommerce-products-header__title,
.tax-product_cat .entry-title,
.post-type-archive-product .page-title {
    font-size: var(--ps-t-titulo-pag);
    line-height: var(--ps-alto-titulo);
    letter-spacing: var(--ps-track-titulo);
    font-weight: var(--ps-p-titulo);
    margin: 0 0 14px;
}
.term-description,
.woocommerce-product-details__short-description,
.taxonomy-description {
    font-size: var(--ps-t-17);
    line-height: var(--ps-alto-texto);
    color: var(--ps-tinta-suave);
    max-width: 62ch;
    margin: 0 0 30px;
}

/* --- Barra de filtros ----------------------------------------------------- */

.ps-filtros {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 18px 0; margin: 0 0 26px;
    border-top: 1px solid var(--ps-linea);
    border-bottom: 1px solid var(--ps-linea);
}
.ps-filtros-k {
    font-family: var(--ps-mono); font-size: var(--ps-t-12);
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ps-tinta-tenue); margin-right: 6px;
}
.ps-chip {
    display: inline-block;
    padding: 8px 16px; border-radius: var(--ps-r-2);
    border: 1px solid var(--ps-linea); background: var(--ps-blanco);
    font-size: var(--ps-t-14); font-weight: var(--ps-p-medio);
    color: var(--ps-tinta); text-decoration: none;
    transition: border-color var(--ps-t-media) var(--ps-ease),
                background-color var(--ps-t-media) var(--ps-ease);
}
.ps-chip:hover { border-color: var(--ps-oliva); color: var(--ps-tinta); }
.ps-chip--activo {
    background: var(--ps-oliva); border-color: var(--ps-oliva);
    color: var(--ps-blanco);
}
.ps-chip--activo:hover { background: var(--ps-oliva-claro); color: var(--ps-blanco); }
.ps-filtros-n {
    margin-left: auto;
    font-family: var(--ps-mono); font-size: var(--ps-t-12);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ps-tinta-tenue);
    font-variant-numeric: tabular-nums;
}

/* La ordenación de WooCommerce, discreta y a la derecha. */
.woocommerce-ordering { margin: 0 0 22px; }
.woocommerce-ordering select {
    font-family: var(--ps-sans); font-size: var(--ps-t-14);
    padding: 8px 12px; border: 1px solid var(--ps-linea);
    border-radius: var(--ps-r-2); background: var(--ps-blanco); color: var(--ps-tinta);
}

@media (max-width: 640px) {
    .ps-filtros { gap: 8px; }
    .ps-filtros-n { margin-left: 0; flex-basis: 100%; }
    .ps-chip { font-size: var(--ps-t-13); padding: 7px 13px; }
}

/* El contenedor de ordenación de Storefront lleva dentro la paginación
   superior. Se deja discreto y a la derecha, bajo la barra de filtros. */
.ps-sin-lateral .storefront-sorting {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin: 0 0 24px;
}
.ps-sin-lateral .storefront-sorting .woocommerce-ordering { margin: 0 0 0 auto; }
.ps-sin-lateral .storefront-sorting .woocommerce-pagination { margin: 0; }

/* ==========================================================================
   AJUSTES DE ANCHO Y DETALLE (12-ago, tras revisión de Arturo)
   ========================================================================== */

/* Storefront limita `.col-full` a ~1064 px, y además usa `content-box` con un
   relleno de 2,6em. Se iguala al contenedor del sistema —mismo ancho, mismo
   relleno y border-box— para que la cabecera y el contenido queden alineados
   al píxel; si no, el contenido sobresale unos 48 px por cada lado. */
.site .col-full,
.storefront-breadcrumb .col-full,
.site-content .col-full {
    max-width: var(--ps-ancho);
    box-sizing: border-box;
    padding-left: var(--ps-canal);
    padding-right: var(--ps-canal);
    margin-left: auto;
    margin-right: auto;
}

/* Las estrellas de valoración salían en el morado por defecto de Storefront.
   Storefront las pinta con CSS en línea, así que hace falta ganarle. */
.star-rating span:before,
.woocommerce .star-rating span:before,
ul.products li.product .star-rating span:before,
p.stars a:before,
p.stars.selected a.active:before,
p.stars:hover a:before { color: var(--ps-rojo) !important; }

/* Con la rejilla más ancha, la foto del producto puede respirar más. */
.woocommerce ul.products li.product a img,
ul.products li.product a img { padding: 12px; }

/* En pantallas muy anchas, cinco columnas aprovechan mejor que cuatro
   estiradas. El diseño de la tarjeta aguanta igual. */
@media (min-width: 1560px) {
    .woocommerce ul.products,
    ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .ps-cats { grid-template-columns: repeat(6, 1fr); }
}

/* Fichas de marca con logo. Los logos vienen de la web antigua y tienen
   proporciones muy distintas (unos apaisados, otros casi cuadrados), así que
   la ficha fija la altura y `object-fit: contain` hace el resto. */
.ps-logo-m--img { padding: 14px 18px; }
.ps-logo-m--img img {
    max-width: 100%; max-height: 34px; width: auto; height: auto;
    object-fit: contain; display: block;
    filter: grayscale(1); opacity: .62;
    transition: filter var(--ps-t-media) var(--ps-ease), opacity var(--ps-t-media) var(--ps-ease);
}
.ps-logo-m--img:hover img { filter: grayscale(0); opacity: 1; }

/* ==========================================================================
   BARRA DE MARCAS bajo la navegación (sustituye a la barra de confianza)
   ========================================================================== */

.ps-marcas-barra {
    background: var(--ps-gris);
    border-bottom: 1px solid var(--ps-linea);
    padding: 16px 0;
}
.ps-marcas-barra .ps-wrap {
    display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
.ps-marcas-barra-k {
    font-family: var(--ps-mono); font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ps-tinta-tenue); white-space: nowrap;
}
.ps-marcas-barra-fila {
    display: flex; align-items: center; gap: 34px;
    flex-wrap: wrap; flex: 1;
}
.ps-marcas-barra-fila a { display: flex; align-items: center; }
.ps-marcas-barra-fila img {
    max-height: 26px; width: auto; max-width: 108px;
    object-fit: contain; display: block;
    filter: grayscale(1); opacity: .55;
    transition: filter var(--ps-t-media) var(--ps-ease), opacity var(--ps-t-media) var(--ps-ease);
}
.ps-marcas-barra-fila a:hover img { filter: grayscale(0); opacity: 1; }


@media (max-width: 900px) {
    .ps-marcas-barra { padding: 12px 0; }
    .ps-marcas-barra-k { display: none; }
    .ps-marcas-barra-fila { gap: 24px; overflow-x: auto; flex-wrap: nowrap; }
    .ps-marcas-barra-fila img { max-height: 22px; }
}

/* ==========================================================================
   BANNER DE NOVEDADES (el antiguo héroe)

   Cuando hay una entrada publicada, la franja oliva pasa a destacarla: texto a
   la izquierda, foto a la derecha. Sin entradas, se queda a una columna con la
   propuesta de valor.
   ========================================================================== */

.ps-hero { margin-top: 34px; }          /* aire respecto a la barra de marcas */
.ps-hero .ps-wrap { max-width: var(--ps-ancho); }
.ps-hero-txt-col { max-width: 62ch; }

.ps-hero--novedad .ps-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    max-width: var(--ps-ancho);
}
.ps-hero--novedad h1 { font-size: clamp(26px, 3.4vw, 38px); }
.ps-hero--novedad .ps-hero-txt { margin-bottom: 26px; }

.ps-hero-foto img {
    width: 100%; height: auto; display: block;
    border-radius: var(--ps-r-4);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

@media (max-width: 900px) {
    .ps-hero { margin-top: 22px; }
    .ps-hero--novedad .ps-wrap { grid-template-columns: 1fr; gap: 26px; }
    .ps-hero-foto { order: -1; }        /* en móvil, la foto primero */
}

/* Sin la etiqueta "Distribución oficial" delante, los logos se reparten a lo
   ancho del contenedor: centrados quedaban amontonados a la izquierda. */
.ps-marcas-barra .ps-wrap { justify-content: center; }
.ps-marcas-barra-fila {
    justify-content: space-between;
    gap: 28px;
    width: 100%;
}

/* Logos de la barra, a color (31-ago: Arturo quiere verlos con su color original).
   `mix-blend-mode: multiply` funde el fondo blanco de los JPG con el de la barra —
   varios logos son JPG con el fondo pegado y si no, se les ve el recuadro.
   OJO: los de CYPRES y Bonehead tienen el fondo NEGRO, y con multiply salen como un
   rectángulo negro. Se arregla recortando el fondo de esos dos ficheros, no con CSS. */
.ps-marcas-barra {
    padding: 0;
    display: flex;
    align-items: center;
    min-height: 64px;
}
.ps-marcas-barra .ps-wrap { width: 100%; }
.ps-marcas-barra-fila a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Caja de altura fija: así todos los logos se centran contra la misma línea y
       no manda el más alto. Sin esto, un logo casi cuadrado (Vigil) subía la fila. */
    height: 42px;
    line-height: 0;
}
.ps-marcas-barra-fila img {
    max-height: 42px;
    max-width: 150px;
    mix-blend-mode: multiply;
    filter: none;                 /* anula el grayscale de la regla de arriba */
    opacity: 1;
}
.ps-marcas-barra-fila a:hover img { opacity: .7; }

@media (max-width: 900px) {
    .ps-marcas-barra-fila img { max-height: 30px; max-width: 110px; }
}

/* ==========================================================================
   PIE — columnas

   Sustituye al widget de texto que había (cuatro líneas sueltas sin enlaces,
   pegadas unas a otras, que además repetían la barra inferior).
   ========================================================================== */

/* Aire entre el último bloque de la página y el pie: iban pegados. */
.site-footer { margin-top: 56px; }
.ps-aseso { margin-bottom: 0; }

.ps-pie-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.2fr;
    gap: 32px;
    padding-bottom: 8px;
}
.ps-pie-cols h3 {
    color: var(--ps-blanco);
    font-size: var(--ps-t-14); font-weight: var(--ps-p-fuerte);
    margin: 0 0 14px;
}
.ps-pie-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ps-pie-cols li { margin: 0; }
.ps-pie-cols a {
    color: var(--ps-sobre-oliva-3); text-decoration: none; font-size: var(--ps-t-13);
    transition: color var(--ps-t-media) var(--ps-ease);
}
.ps-pie-cols a:hover { color: var(--ps-blanco); }

.ps-pie-contacto p { margin: 0 0 8px; font-size: var(--ps-t-13); }
.ps-pie-tel {
    font-family: var(--ps-mono); font-size: var(--ps-t-16) !important;
    color: var(--ps-blanco) !important; font-weight: var(--ps-p-fuerte);
}
.ps-pie-tel:hover { color: var(--ps-rojo) !important; }
/* Idiomas bajo el teléfono y una etiqueta encima de cada correo (19-sep-2026). */
.ps-pie-idiomas { color: var(--ps-sobre-oliva-4); }
.ps-pie-contacto .ps-pie-k {
    display: block; margin-bottom: 2px;
    color: var(--ps-sobre-oliva-4); font-size: var(--ps-t-12, 12px);
    text-transform: uppercase; letter-spacing: .06em;
}
.ps-pie-contacto a { overflow-wrap: anywhere; }

/* El área de widgets de Storefront queda vacía: que no deje un hueco. */
.site-footer .footer-widgets:empty,
.site-footer .footer-widgets.col-1:not(:has(.widget)) { display: none; padding: 0; margin: 0; border: 0; }

@media (max-width: 900px) {
    .ps-pie-cols { grid-template-columns: 1fr 1fr; gap: 26px; }
    .site-footer { margin-top: 36px; }
}
@media (max-width: 560px) {
    .ps-pie-cols { grid-template-columns: 1fr; }
}

/* --- Legibilidad del pie ---------------------------------------------------
   Storefront imprime CSS en línea desde el personalizador con selectores
   `:not()` que ganan a los del tema. Los colores del pie se han fijado ahí
   (ver theme mods storefront_footer_*). Aquí sólo lo que ese CSS no cubre. */

/* La barra móvil hereda el pie oscuro pero Storefront la deja con texto
   #333333: ilegible. */
.site-footer .storefront-handheld-footer-bar,
.storefront-handheld-footer-bar {
    background-color: var(--ps-oliva);
    border-top-color: rgba(255,255,255,.12);
}
.site-footer .storefront-handheld-footer-bar a:not(.button):not(.components-button),
.storefront-handheld-footer-bar a:not(.button):not(.components-button) {
    color: var(--ps-sobre-oliva-2);
}
.storefront-handheld-footer-bar .count {
    background-color: var(--ps-rojo);
    color: var(--ps-blanco);
    border-color: var(--ps-oliva);
}

/* La línea de abajo iba en #85897B: poco contraste para texto pequeño. */
.ps-pie-bajo { color: var(--ps-sobre-oliva-3); }
.site-footer .ps-pie-bajo a:not(.button):not(.components-button) {
    color: var(--ps-sobre-oliva-3);
    text-decoration: none;
}
.site-footer .ps-pie-bajo a:not(.button):not(.components-button):hover { color: var(--ps-blanco); }

/* ==========================================================================
   GALERÍA DE LA FICHA

   OJO con dónde va el recuadro. `__wrapper` es la cinta del carrusel y
   `__image` es cada diapositiva, cuyo ancho calcula flexslider por JavaScript:
   ponerles borde o relleno descuadra esa cuenta y las fotos se solapan (pasaba
   en cuanto un producto tenía más de una foto). El recuadro va en la IMAGEN,
   con box-sizing para que no sume ancho.
   ========================================================================== */

.single-product .woocommerce-product-gallery { position: relative; }
.single-product .woocommerce-product-gallery__wrapper { margin: 0; padding: 0; border: 0; }
.single-product .woocommerce-product-gallery__image { border: 0; padding: 0; background: none; }

.single-product .woocommerce-product-gallery__image img {
    box-sizing: border-box;
    width: 100%; height: auto; display: block;
    background: var(--ps-gris);
    border: 1px solid var(--ps-linea);
    border-radius: var(--ps-r-3);
    padding: 28px;
}

/* Sin flechas: ya hay miniaturas debajo. */
.single-product .woocommerce-product-gallery .flex-direction-nav { display: none; }

/* Miniaturas. Se anula el ancho en línea que les pone flexslider para poder
   repartirlas en una rejilla de cuatro. */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin: 14px 0 0; padding: 0; list-style: none;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
    margin: 0; float: none; width: auto !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
    box-sizing: border-box;
    width: 100%; height: auto; display: block;
    background: var(--ps-blanco);
    border: 1px solid var(--ps-linea);
    border-radius: var(--ps-r-2);
    padding: 8px; opacity: 1; cursor: pointer;
    transition: border-color var(--ps-t-media) var(--ps-ease);
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover {
    border-color: var(--ps-oliva); background: var(--ps-gris);
}

/* La lupa del zoom, sobre la esquina de la foto. */
.single-product .woocommerce-product-gallery__trigger { top: 1em; right: 1em; z-index: 3; }

/* Producto sin botón de compra: se le da una salida en vez de un hueco. */
.ps-f-agotado {
    border: 1px solid var(--ps-linea);
    border-left: 3px solid var(--ps-rojo);
    border-radius: 0 var(--ps-r-4) var(--ps-r-4) 0;
    background: var(--ps-gris);
    padding: 18px 22px; margin: 0 0 22px;
}
.ps-f-agotado-t { font-weight: var(--ps-p-fuerte); font-size: var(--ps-t-15); margin: 0 0 6px; }
.ps-f-agotado-n { font-size: var(--ps-t-14); color: var(--ps-tinta-suave); margin: 0 0 14px; }
.ps-f-agotado .ps-btn-consultar { margin: 0; }

/* En la ficha, el hueco del precio de un producto por presupuesto. */
.ps-f-sin-precio {
    font-family: var(--ps-sans); font-size: var(--ps-t-17);
    font-weight: var(--ps-p-medio); color: var(--ps-tinta-suave);
    display: block;
}
/* El botón suelto del mu-plugin no debe salir en la ficha: ahí va en la caja. */
.single-product .summary .ps-solicitar-presupuesto { display: none; }

/* --------------------------------------------------------------------------
   Barra de marcas: centrada entre el menú y las novedades (31-ago)

   Tenía 68 px de blanco por arriba y 34 por abajo. El de arriba NO era nuestro:
   Storefront mete `margin-bottom: 4.235801032em` a la cabecera con
   `.no-wc-breadcrumb .site-header` — dos clases, más específico que nuestro
   `.site-header { margin-bottom: 0 }`, por eso el nuestro no ganaba. Aplica en
   todas las páginas, no solo en la portada.

   Se anula con la misma especificidad y el aire pasa a la propia barra, igual
   arriba y abajo. Para cambiarlo, un solo número.
   -------------------------------------------------------------------------- */
/* La regla que ganaba es esta, con CUATRO clases de especificidad:
   `.home.page:not(.page-template-template-homepage) .site-header`
   — el `:not()` cuenta como una clase más. Hay que repetirla tal cual para
   empatar; al cargar nuestra hoja después, gana la nuestra. */
.home.page:not(.page-template-template-homepage) .site-header,
.home.blog .site-header,
.home.post-type-archive-product .site-header,
.no-wc-breadcrumb .site-header { margin-bottom: 0; }

.ps-marcas-barra { margin: 34px 0; }
.ps-hero { margin-top: 0; }

/* --------------------------------------------------------------------------
   Selector de idioma en la cabecera (31-ago)
   Texto «ES | EN», sin banderas: una bandera representa un país, no un idioma,
   y la española es incorrecta para un cliente de México o Argentina.
   -------------------------------------------------------------------------- */
.ps-idiomas .trp-language-switcher { display: inline-block; }
.ps-idiomas .trp-language-switcher > div {
    background: none; border: none; padding: 0; min-width: 0;
}
.ps-idiomas a,
.ps-idiomas .trp-ls-shortcode-current-language a {
    font-family: var(--ps-mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ps-sobre-oliva-2);
    padding: 0 2px;
}
.ps-idiomas a:hover { color: #FFF; }
.ps-idiomas .trp-ls-shortcode-current-language a { color: #FFF; }
.ps-idiomas i { color: var(--ps-sobre-oliva-3); font-style: normal; margin: 0 2px; }
.ps-idiomas .ps-idioma-activo { color: #FFF; font-weight: 600; }