/**
 * Piel de la ficha del vehículo, en la línea de la landing.
 *
 * La ficha la monta WooCommerce dentro del tema (hoy Astra), y el resultado de
 * fábrica no tiene nada que ver con autocaravanastrt.com: tipografías del tema,
 * grises, esquinas rectas y espaciados apretados. Este archivo la reviste con la
 * identidad de la marca SIN sustituir plantillas de WooCommerce, a propósito:
 *
 *   - Un override de `single-product.php` habría que revisarlo en cada
 *     actualización de WooCommerce, y aquí no aporta nada que no se pueda hacer
 *     con CSS.
 *   - Si el cliente cambia de tema, esto sigue funcionando.
 *
 * Todo va bajo `body.trt-ficha`, una clase que añade el plugin solo en las fichas
 * de tipo «Alquiler TRT»: así no se toca ninguna otra página del sitio.
 *
 * Estructura real que se está vistiendo (verificada en producción):
 *
 *   div.summary.entry-summary
 *     nav.woocommerce-breadcrumb
 *     h1.product_title
 *     p.price
 *     div.trt-reservas--ficha   ← el bloque de reserva, ya con su propio estilo
 *     div.product_meta
 *   div.woocommerce-tabs
 *
 * Depende de `trt-fuentes` para Anton y Space Grotesk.
 */

/*
 * PALETA OSCURA.
 *
 * Los nombres de las variables se conservan aunque los valores se inviertan: así
 * las reglas de más abajo siguen leyéndose igual («texto en --trt-ink sobre fondo
 * --trt-bone») y no hay que reescribirlas una por una. Lo que cambia es lo que
 * significa cada token, no quién lo usa.
 *
 * Dos ajustes que no son un simple intercambio:
 *
 *   - `--trt-ink-600` (texto secundario) pasa a un gris CLARO. El #4b4b4b de la
 *     versión clara sobre fondo negro sería prácticamente ilegible.
 *   - `--trt-brand-texto` es nueva. El rojo de marca #c81e1e sobre negro da unos
 *     3,3:1 de contraste: vale para filetes, bordes y rellenos grandes, pero no
 *     para texto pequeño. Para eso se usa un rojo aclarado que sube a ~6,5:1.
 *     El rojo de la marca no se toca donde se ve como color; se aclara solo donde
 *     tiene que leerse como letra.
 */
body.trt-ficha {
    --trt-ink: #fafafa;          /* texto principal */
    --trt-ink-800: #e5e5e5;      /* texto fuerte */
    --trt-ink-600: #a3a3a3;      /* texto secundario, legible sobre negro */
    --trt-ink-200: #2a2a2a;      /* separadores */
    --trt-bone: #0a0a0a;         /* fondo de la página */
    --trt-superficie: #141414;   /* tarjetas y paneles sobre el fondo */
    --trt-brand: #c81e1e;
    --trt-brand-dark: #a81717;
    --trt-brand-texto: #ff5a5a;  /* el rojo, cuando tiene que leerse */
    --trt-radio: 12px;

    /*
     * Fondo: negro con un resplandor rojo arriba, que se apaga hacia abajo.
     *
     * Son dos degradados radiales solapados y no uno lineal: un lineal de rojo a
     * negro en una página larga deja una banda muy visible donde acaba la
     * transición, y el rojo llega hasta zonas donde ya no aporta nada. Con dos
     * resplandores desplazados el color se concentra donde está el titular y el
     * precio, y desaparece sin costura.
     *
     * `fixed` para que no se estire con el largo de la página: así el resplandor se
     * queda donde tiene que estar y al hacer scroll el contenido entra en negro.
     */
    background-color: var(--trt-bone);
    background-image:
        radial-gradient(1100px 520px at 50% -8%, rgba(200, 30, 30, .30), rgba(200, 30, 30, 0) 62%),
        radial-gradient(900px 480px at 92% 6%, rgba(200, 30, 30, .16), rgba(200, 30, 30, 0) 58%);
    background-repeat: no-repeat;
    background-attachment: fixed;

    font-family: var(--trt-fuente-cuerpo);
    color: var(--trt-ink);
}

/*
 * El fondo oscuro hay que llevarlo a los contenedores del TEMA, no solo al body:
 * Astra pinta de blanco su cabecera, su pie y el envoltorio del contenido, y sin
 * esto quedaría una franja blanca arriba y otra abajo. Va todo bajo
 * `body.trt-ficha`, así que ninguna otra página del sitio se ve afectada.
 */
body.trt-ficha #page,
body.trt-ficha #content,
body.trt-ficha .site-content,
body.trt-ficha .ast-container,
body.trt-ficha .site-header,
body.trt-ficha .ast-primary-header-bar,
body.trt-ficha .main-header-bar,
body.trt-ficha .site-footer,
body.trt-ficha .ast-small-footer,
body.trt-ficha .site-below-footer-wrap,
body.trt-ficha .site-primary-footer-wrap {
    /*
     * TRANSPARENTES, no del color del fondo: si estos contenedores pintaran su
     * propio negro taparían el degradado del body y el resplandor no se vería en
     * ninguna parte. Las tarjetas (el panel de reserva, el panel de pestañas) sí
     * llevan fondo propio, que para eso son tarjetas.
     */
    background-color: transparent;
    color: var(--trt-ink);
}

/* Enlaces del tema (menú, pie, migas) sobre fondo oscuro. */
body.trt-ficha .site-header a,
body.trt-ficha .site-footer a,
body.trt-ficha .ast-small-footer a {
    color: var(--trt-ink);
}

body.trt-ficha .site-header a:hover,
body.trt-ficha .site-footer a:hover,
body.trt-ficha .ast-small-footer a:hover {
    color: var(--trt-brand-texto);
}

body.trt-ficha .site-title a,
body.trt-ficha .site-title a:hover {
    color: var(--trt-ink);
}

/* La cabecera se separa del contenido con una línea, no con un cambio de color. */
body.trt-ficha .site-header,
body.trt-ficha .ast-primary-header-bar {
    border-bottom: 1px solid var(--trt-ink-200);
}

body.trt-ficha .site-footer,
body.trt-ficha .ast-small-footer {
    border-top: 1px solid var(--trt-ink-200);
    color: var(--trt-ink-600);
}

/* Astra fija la tipografía en muchos elementos: hay que reclamarlos. */
body.trt-ficha .site-content,
body.trt-ficha .entry-summary,
body.trt-ficha .woocommerce-tabs,
body.trt-ficha .entry-content {
    font-family: var(--trt-fuente-cuerpo);
}

/* --- Titulares --- */

/*
 * El título se busca por dos vías porque cada tipo de tema lo marca distinto:
 * los temas clásicos (Astra, el de producción) usan `.product_title`, y los de
 * bloques `.wp-block-post-title`. Cubrir los dos evita que la ficha se quede a
 * medio vestir si el cliente cambia de tema.
 */
body.trt-ficha .product_title,
body.trt-ficha .wp-block-post-title,
body.trt-ficha .woocommerce-tabs h2,
body.trt-ficha .entry-content h2,
body.trt-ficha .entry-content h3 {
    font-family: var(--trt-fuente-titulo);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.05;
    color: var(--trt-ink);
}

body.trt-ficha .product_title,
body.trt-ficha .wp-block-post-title {
    margin: .35em 0 .5em;
    font-size: clamp(2.1rem, 6vw, 4rem);
}

/* Un filete rojo bajo el H1, igual que los titulares de sección de la landing. */
body.trt-ficha .product_title::after,
body.trt-ficha .wp-block-post-title::after {
    content: '';
    display: block;
    width: 3.5rem;
    height: 4px;
    margin-top: .55rem;
    background: var(--trt-brand);
}

body.trt-ficha .entry-content h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
}

body.trt-ficha .entry-content h3 {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}

/* --- Migas de pan: presentes pero discretas --- */

body.trt-ficha .woocommerce-breadcrumb {
    margin-bottom: 1.25rem;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--trt-ink-600);
}

body.trt-ficha .woocommerce-breadcrumb a {
    color: var(--trt-ink-600);
    text-decoration: none;
}

body.trt-ficha .woocommerce-breadcrumb a:hover,
body.trt-ficha .woocommerce-breadcrumb a:focus-visible {
    color: var(--trt-brand);
}

/* --- Precio «desde X €/día» --- */

/*
 * Igual que con el título, el precio tiene dos marcados: `p.price` dentro de
 * `.summary` en los temas clásicos, y el bloque
 * `.wp-block-woocommerce-product-price` en los de bloques.
 */
body.trt-ficha .summary > .price,
body.trt-ficha .wp-block-woocommerce-product-price,
body.trt-ficha .summary > .price .amount,
body.trt-ficha .summary > .price bdi,
body.trt-ficha .wp-block-woocommerce-product-price .amount,
body.trt-ficha .wp-block-woocommerce-product-price bdi {
    font-family: var(--trt-fuente-cuerpo);
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 700;
    color: var(--trt-ink);
}

body.trt-ficha .summary > .price,
body.trt-ficha .wp-block-woocommerce-product-price {
    display: inline-block;
    margin: 0 0 1.75rem;
    padding: .55rem 1.1rem;
    border: 1px solid var(--trt-brand);
    border-radius: 999px;
    /* Sobre negro hace falta bastante más alfa que sobre hueso: con .06 el relleno
       no se distinguía del fondo y la pastilla parecía solo un borde. */
    background: rgba(200, 30, 30, .18);
    line-height: 1.3;
}

/* --- Galería --- */

body.trt-ficha .woocommerce-product-gallery {
    margin-bottom: 2rem;
}

body.trt-ficha .woocommerce-product-gallery__wrapper,
body.trt-ficha .woocommerce-product-gallery__image {
    border-radius: var(--trt-radio);
    overflow: hidden;
}

body.trt-ficha .woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--trt-radio);
}

/* Miniaturas: separadas y con el borde de la marca al pasar por encima. */
body.trt-ficha .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: .8rem 0 0;
    padding: 0;
    list-style: none;
}

body.trt-ficha .flex-control-thumbs li {
    flex: 0 0 calc(25% - .45rem);
    margin: 0;
}

body.trt-ficha .flex-control-thumbs img {
    border-radius: 8px;
    opacity: .72;
    transition: opacity .2s ease, box-shadow .2s ease;
    cursor: pointer;
}

body.trt-ficha .flex-control-thumbs img:hover,
body.trt-ficha .flex-control-thumbs img.flex-active {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--trt-brand);
}

/* El zoom de WooCommerce sobre una imagen redondeada deja esquinas cuadradas. */
body.trt-ficha .woocommerce-product-gallery .zoomImg {
    border-radius: var(--trt-radio);
}

/* --- El bloque de reserva --- */

body.trt-ficha .trt-reservas--ficha {
    margin: 0 0 2.5rem;
    border-radius: var(--trt-radio);
    overflow: hidden;
}

/* --- Pestañas de descripción y reseñas --- */

body.trt-ficha .woocommerce-tabs {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
    padding-top: 2rem;
    border-top: 1px solid var(--trt-ink-200);
}

body.trt-ficha .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 2rem;
    padding: 0;
    border-bottom: 1px solid var(--trt-ink-200);
    list-style: none;
}

/* WooCommerce dibuja las pestañas con bordes y pseudoelementos redondeados que
   aquí solo estorban. */
body.trt-ficha .woocommerce-tabs ul.tabs::before,
body.trt-ficha .woocommerce-tabs ul.tabs li::before,
body.trt-ficha .woocommerce-tabs ul.tabs li::after {
    display: none;
}

body.trt-ficha .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

body.trt-ficha .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: .85rem 1.4rem;
    border-bottom: 3px solid transparent;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--trt-ink-600);
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}

body.trt-ficha .woocommerce-tabs ul.tabs li a:hover,
body.trt-ficha .woocommerce-tabs ul.tabs li a:focus-visible {
    color: var(--trt-ink);
}

body.trt-ficha .woocommerce-tabs ul.tabs li.active a {
    border-bottom-color: var(--trt-brand);
    color: var(--trt-ink);
}

body.trt-ficha .woocommerce-Tabs-panel {
    max-width: 46rem;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--trt-ink-800);
}

body.trt-ficha .woocommerce-Tabs-panel a {
    color: var(--trt-brand);
}

/*
 * El encabezado «Descripción» de la pestaña repite lo que ya dice la solapa
 * activa, así que se oculta. Al ser un H2 real, se mantiene accesible a los
 * lectores de pantalla: solo se saca del flujo visual.
 */
body.trt-ficha #tab-description > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Piezas que no aportan nada con un solo vehículo en catálogo --- */

body.trt-ficha .product_meta,
body.trt-ficha .related.products,
body.trt-ficha .up-sells {
    display: none;
}

/*
 * La categoría del producto que Astra imprime encima del título.
 *
 * Con un único vehículo en catálogo no aporta nada, y además repite lo que ya
 * dicen las migas de pan. Se quita porque, mientras el producto no tenga una
 * categoría asignada, ahí se leía «Sin categorizar» en azul justo encima del
 * H1 — daba una sensación de web a medio terminar.
 *
 * Ojo: esto NO arregla las migas, que siguen mostrando la categoría. Para que
 * ahí se lea algo con sentido hay que asignarle una categoría de verdad al
 * producto (p. ej. «Autocaravanas») en la ficha del producto.
 */
body.trt-ficha .single-product-category {
    display: none;
}

/* --- Avisos de WooCommerce, en la línea de la marca --- */

body.trt-ficha .woocommerce-message,
body.trt-ficha .woocommerce-error,
body.trt-ficha .woocommerce-info {
    border-radius: var(--trt-radio);
    border-top-width: 0;
    border-left: 4px solid var(--trt-brand);
    background: var(--trt-superficie);
    color: var(--trt-ink);
    font-family: var(--trt-fuente-cuerpo);
    color: var(--trt-ink);
}

body.trt-ficha .woocommerce-message {
    border-left-color: #22c55e;
}

body.trt-ficha .woocommerce-message .button,
body.trt-ficha .woocommerce-error .button,
body.trt-ficha .woocommerce-info .button {
    border-radius: var(--trt-radio);
    background: var(--trt-ink);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

body.trt-ficha .woocommerce-message .button:hover,
body.trt-ficha .woocommerce-error .button:hover,
body.trt-ficha .woocommerce-info .button:hover {
    background: var(--trt-brand);
    color: #fff;
}

/* --- Respeto por quien prefiere no ver animaciones --- */

@media (prefers-reduced-motion: reduce) {
    body.trt-ficha * {
        transition-duration: .01ms !important;
    }
}

/*
|--------------------------------------------------------------------------
| Afinado sobre fondo oscuro
|--------------------------------------------------------------------------
| Lo que no se arregla invirtiendo variables: piezas que daban por hecho un
| fondo claro, y unos pocos detalles que sobre negro piden más cuidado.
*/

/* Las fotos sobre negro se «desangran» por los bordes: un filo tenue las
   contiene sin competir con la imagen. */
body.trt-ficha .woocommerce-product-gallery__image img {
    border: 1px solid var(--trt-ink-200);
    background: var(--trt-superficie);
}

body.trt-ficha .flex-control-thumbs img {
    border: 1px solid var(--trt-ink-200);
    background: var(--trt-superficie);
    /* Las miniaturas no seleccionadas se atenúan, para que la activa cante. */
    opacity: .62;
    transition: opacity .15s ease, border-color .15s ease;
}

body.trt-ficha .flex-control-thumbs img:hover,
body.trt-ficha .flex-control-thumbs img.flex-active {
    opacity: 1;
}

/* El panel de la descripción se lee como tarjeta, no como texto suelto. */
body.trt-ficha .woocommerce-Tabs-panel {
    padding: clamp(1.1rem, 3vw, 1.9rem);
    border: 1px solid var(--trt-ink-200);
    border-radius: var(--trt-radio);
    background: var(--trt-superficie);
}

body.trt-ficha .woocommerce-Tabs-panel a {
    color: var(--trt-brand-texto);
}

/* Las pestañas inactivas, atenuadas; la activa mantiene su subrayado rojo. */
body.trt-ficha .woocommerce-tabs ul.tabs li a {
    color: var(--trt-ink-600);
}

body.trt-ficha .woocommerce-tabs ul.tabs li a:hover,
body.trt-ficha .woocommerce-tabs ul.tabs li a:focus-visible,
body.trt-ficha .woocommerce-tabs ul.tabs li.active a {
    color: var(--trt-ink);
}

/* Migas de pan: presentes, discretas y legibles. */
body.trt-ficha .woocommerce-breadcrumb,
body.trt-ficha .woocommerce-breadcrumb a {
    color: var(--trt-ink-600);
}

body.trt-ficha .woocommerce-breadcrumb a:hover,
body.trt-ficha .woocommerce-breadcrumb a:focus-visible {
    color: var(--trt-brand-texto);
}

/* Selección de texto: el rojo de marca en vez del azul del navegador. */
body.trt-ficha ::selection {
    background: var(--trt-brand);
    color: #fff;
}

/*
 * Se le dice al navegador que este documento es oscuro. Con esto los controles
 * nativos —barras de desplazamiento, campos de formulario, menús— se pintan en
 * su variante oscura, en lugar de quedar como parches claros.
 */
body.trt-ficha {
    color-scheme: dark;
}

/*
|--------------------------------------------------------------------------
| El panel de reserva, en oscuro
|--------------------------------------------------------------------------
| El bloque `.trt-reservas` es oscuro y lleva dentro un panel CLARO: sobre la
| página en hueso eso funcionaba, pero sobre página negra el panel quedaba como
| una losa blanca en medio.
|
| Las fichas se redefinen sobre `.trt-panel`, no sobre el bloque: las propiedades
| personalizadas se heredan, así que esto solo reinterpreta lo que hay DENTRO del
| panel y no toca el marco del bloque ni el resto del sitio. El shortcode a ancho
| completo sigue con su panel claro, que ahí es lo correcto.
*/

body.trt-ficha .trt-panel {
    /* Superficie */
    --trt-sup: #141414;
    --trt-sup-texto: #fafafa;
    --trt-sup-borde: rgba(250, 250, 250, .16);
    --trt-sup-apagado: #8a8a8a;                  /* días pasados: 3,46:1 era ilegible, ahora 5,3:1 */
    --trt-sup-ocupado: rgba(250, 250, 250, .07); /* días ocupados */
    --trt-sup-linea: #8a8a8a;                    /* la tachadura */

    /* Tokens generales, reinterpretados para una superficie oscura. */
    --trt-ink: #fafafa;
    --trt-ink-600: #a3a3a3;
    --trt-ink-200: rgba(250, 250, 250, .16);

    border: 1px solid rgba(250, 250, 250, .1);
}

/* Un día libre al pasar el ratón: sobre oscuro hay que aclarar, no oscurecer. */
body.trt-ficha .trt-panel .trt-dia--libre:hover {
    background: rgba(250, 250, 250, .1);
}

/* El rojo de marca, cuando dentro del panel tiene que LEERSE como texto. */
body.trt-ficha .trt-panel .trt-resumen__senal strong,
body.trt-ficha .trt-panel .trt-error {
    color: var(--trt-brand-texto);
}

/*
|--------------------------------------------------------------------------
| La piel de la página NO entra en el bloque de reserva
|--------------------------------------------------------------------------
| `ficha.css` viste los titulares del contenido (`.entry-content h2`, `h3`) con
| la paleta de la PÁGINA. Desde que la piel se aplica también a las páginas que
| llevan `[trt_reservas]`, esas reglas alcanzaban los titulares de DENTRO del
| bloque —que tiene su propia tipografía y su propio contraste— y los pintaban
| con `--trt-ink`, que ahí vale #0a0a0a: negro sobre negro.
|
| Desaparecían el titular del bloque y el nombre del vehículo. Se veía en la
| captura: «DISPONIBILIDAD Y RESERVA» sí, y debajo un hueco.
|
| `color: inherit` devuelve cada titular al color del bloque. Los tamaños se
| reafirman porque las reglas de la piel también ganaban ahí; son los mismos
| valores que declara front.css.
*/

body.trt-ficha .trt-reservas h1,
body.trt-ficha .trt-reservas h2,
body.trt-ficha .trt-reservas h3,
body.trt-ficha .trt-reservas h4 {
    color: inherit;
}

body.trt-ficha .trt-reservas .trt-titulo {
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    color: #fff;
}

body.trt-ficha .trt-reservas .trt-ficha__nombre {
    font-size: 1.5rem;
    color: #fff;
}

body.trt-ficha .trt-reservas .trt-preparacion__titulo {
    font-size: 1.6rem;
}

/*
|--------------------------------------------------------------------------
| Cabecera y pie construidos con Elementor
|--------------------------------------------------------------------------
| Las reglas de arriba visten los contenedores de ASTRA (`.site-header`,
| `.ast-primary-header-bar`, `.site-footer`). Si la cabecera se rehace con el
| Theme Builder de Elementor, el marcado pasa a ser el suyo
| —`.elementor-location-header`— y aquellas reglas no lo alcanzan: quedaría una
| cabecera clara sobre la página oscura.
|
| Se cubre aquí por adelantado. Los colores de los widgets (texto del menú,
| enlaces) los manda el Kit de Elementor y ganan por especificidad, que es lo
| correcto: lo que se configure en Elementor debe mandar. Esto solo se ocupa del
| FONDO de los contenedores, que es lo que Elementor deja transparente.
*/

body.trt-ficha .elementor-location-header,
body.trt-ficha .elementor-location-footer {
    background-color: var(--trt-bone);
    color: var(--trt-ink);
}

body.trt-ficha .elementor-location-header {
    border-bottom: 1px solid var(--trt-ink-200);
}

body.trt-ficha .elementor-location-footer {
    border-top: 1px solid var(--trt-ink-200);
}

/*
|--------------------------------------------------------------------------
| Contraste: lo que Astra pinta demasiado oscuro
|--------------------------------------------------------------------------
| Medido sobre los píxeles de producción, no a ojo. Dos elementos quedaban
| ilegibles sobre el fondo negro:
|
|   menú de la cabecera   rgb(51,65,85)   sobre rgb(10,10,10)  →  1,91:1
|   enlace de categoría   rgb(6,107,210)  sobre rgb(10,10,10)  →  3,82:1
|
| El mínimo para texto normal es 4,5:1. Los dos colores los pone Astra desde el
| personalizador, en un `<style>` del `<head>`, con selectores propios: la regla
| genérica `.site-header a` de más arriba no los alcanzaba. Se atacan aquí con sus
| mismos selectores más `body.trt-ficha` delante, que gana por especificidad sin
| necesidad de `!important`.
*/

body.trt-ficha .main-header-menu .menu-link,
body.trt-ficha .main-header-menu > li > a,
body.trt-ficha .ast-builder-menu .menu-link,
body.trt-ficha .site-header .menu-link,
body.trt-ficha .ast-header-html a,
body.trt-ficha .ast-masthead-custom-menu-items a {
    color: var(--trt-ink);
}

body.trt-ficha .main-header-menu .menu-link:hover,
body.trt-ficha .main-header-menu .current-menu-item > .menu-link,
body.trt-ficha .ast-builder-menu .menu-link:hover {
    color: var(--trt-brand-texto);
}

/* Los iconos del carrito y de la cuenta se pintan con `currentColor` o con fill. */
body.trt-ficha .site-header .ast-icon svg,
body.trt-ficha .site-header .ast-cart-menu-wrap,
body.trt-ficha .site-header .ast-header-account-wrap {
    color: var(--trt-ink);
    fill: currentColor;
}

/* El enlace de categoría sobre el título: era azul sobre negro. */
body.trt-ficha .single-product-category a,
body.trt-ficha .product_meta a,
body.trt-ficha .posted_in a,
body.trt-ficha .summary a:not(.button) {
    color: var(--trt-brand-texto);
}

/*
 * Red de seguridad para los enlaces del tema que no estén cubiertos arriba.
 *
 * Astra reparte colores por muchos sitios (pie, widgets, migas) y no conviene ir
 * cazándolos uno a uno. Esto los deja legibles sin tocar los del bloque de reserva
 * ni los botones, que llevan su propio color sobre fondo rojo.
 */
body.trt-ficha .site-header a:not(.button),
body.trt-ficha .site-footer a:not(.button),
body.trt-ficha .ast-small-footer a:not(.button) {
    color: var(--trt-ink);
}

/*
 * El precio: «desde 220,00 € / día».
 *
 * La CIFRA salía blanca (regla explícita sobre `.amount`), pero **«desde» y
 * «/ día» heredaban el gris de Astra** (`--ast-global-color-3`, #334155): medido
 * sobre los píxeles de producción daban **1,73:1**, ilegibles.
 *
 * Son nodos de texto pelados dentro de `p.price`, sin clase a la que agarrarse, así
 * que se fuerza el color en el contenedor Y en todos sus descendientes. Y sin el
 * combinador `>`: la regla de más arriba lo usaba y no alcanzaba el marcado real,
 * que anida el precio más de un nivel.
 */
/*
 * Y hace falta ESTA especificidad, no menos. La hoja de compatibilidad de Astra con
 * WooCommerce (`woocommerce-grid.min.css`) trae:
 *
 *     .woocommerce-js div.product p.price, … { color: #77a464 }
 *
 * que es (0,3,2). Un `body.trt-ficha .summary .price` es (0,3,1) y pierde por un
 * elemento. Se sube a (0,4,3) nombrando `div.product` y `p.price`, en lugar de
 * recurrir a `!important`: con `!important` el siguiente que quiera cambiar este
 * color —el cliente desde el personalizador, o nosotros— tendría que responder con
 * otro `!important`, y eso no se acaba nunca.
 */
body.trt-ficha div.product .summary p.price,
body.trt-ficha div.product .summary p.price *,
body.trt-ficha div.product .summary .price,
body.trt-ficha div.product .summary .price *,
body.trt-ficha .wp-block-woocommerce-product-price,
body.trt-ficha .wp-block-woocommerce-product-price * {
    color: var(--trt-ink);
}

/*
 * Migas de pan, otra vez discretas.
 *
 * La red de seguridad de `.summary a` las pintó de rojo. Estaban bien —7,85:1— y el
 * diseño las quiere calladas: en rojo competían con el titular. Esta regla va
 * después a propósito, para ganar por orden.
 */
body.trt-ficha .summary .woocommerce-breadcrumb a,
body.trt-ficha .woocommerce-breadcrumb a {
    color: var(--trt-ink-600);
}

body.trt-ficha .summary .woocommerce-breadcrumb a:hover,
body.trt-ficha .woocommerce-breadcrumb a:hover {
    color: var(--trt-brand-texto);
}

/*
|--------------------------------------------------------------------------
| Aire a los lados
|--------------------------------------------------------------------------
| Relleno del 5% a izquierda y derecha en TODO el recorrido de reserva: ficha,
| carrito, checkout y pedido recibido.
|
| Va en el envoltorio EXTERIOR (`#page` en Astra, `.wp-site-blocks` en los temas de
| bloques) y no en el contenedor del contenido, por dos razones:
|
|   - Así el 5% se mide sobre el ancho de la ventana y el resultado es predecible.
|     Puesto en un contenedor con `max-width`, el 5% se mediría sobre ese máximo y el
|     hueco real hasta el borde saldría distinto en cada tamaño de pantalla.
|   - Entra también la cabecera y el pie, que quedan alineados con el contenido. Si
|     solo se moviera el contenido, el logotipo y el menú se quedarían fuera de línea.
|
| El contenedor interior de Astra tiene su propio `max-width`, así que con esto
| simplemente dispone de menos ancho: no se suman rellenos.
*/

/*
 * ⚠️ Hay que ANULAR el relleno propio del tema, o el 5% se suma al que ya había.
 *
 * Medido: con solo añadir el 5% el contenido quedaba a un 9% del borde, porque los
 * temas de bloques aplican su relleno global con estas dos variables y Astra el suyo
 * en `.ast-container`. Se ponen a cero dentro de nuestro recorrido —y solo ahí— para
 * que el 5% pedido sea el que se ve.
 */
body.trt-ficha {
    --wp--style--root--padding-left: 0;
    --wp--style--root--padding-right: 0;
}

/*
 * Se fija el ANCHO del contenedor en lugar de ir restando rellenos.
 *
 * El primer intento fue poner 5% de relleno en `#page` y anular el del tema. No salía:
 * quedaban 24 px de algún envoltorio intermedio y el total se iba al 6,9%. Astra anida
 * contenedores distintos según el bloque de cabecera y la plantilla, así que
 * persiguiéndolos uno a uno esto no se acaba nunca.
 *
 * Con `max-width: min(1200px, 90%)` y centrado, el hueco lateral es exactamente el 5%
 * **por construcción**: cualquier relleno interno del tema come del 90%, no se suma al
 * hueco. Y el `min()` conserva el tope de 1200 px del diseño, así que en pantallas
 * grandes el contenido no se estira: sigue centrado como estaba.
 *
 *   1280 px → min(1200, 1152) = 1152  →  hueco 64 px = 5%
 *   1000 px → min(1200,  900) =  900  →  hueco 50 px = 5%
 *   1920 px → min(1200, 1728) = 1200  →  centrado, como el diseño original
 *
 * ⚠️ `90vw`, NO `90%`. Con `90%` el ancho se mide sobre el PADRE, y el padre de Astra ya
 * viene metido 24 px respecto a la ventana (se ve en la captura: la cabecera también
 * empieza en x=24). El hueco salía entonces 24 px + el 5% del padre: medido 88 px en
 * 1280 (6,9%) y 74 px en 1000 (7,4%) — los mismos 24 px de más en los dos casos, que es
 * lo que delató el origen.
 *
 * Con `90vw` el ancho se mide sobre la VENTANA, y los márgenes `auto` reparten lo que
 * sobra del padre: absorben esos 24 px en lugar de sumárselos. El hueco total queda en
 * el 5% de la ventana sea cual sea el relleno que metan los envoltorios del tema, que es
 * justo lo que no se conseguía persiguiéndolos uno a uno.
 */
body.trt-ficha .ast-container {
    max-width: min(1200px, 90vw);
    margin-left: auto;
    margin-right: auto;
}

/*
 * Y hay que apagar el relleno HORIZONTAL de los envoltorios internos de Astra, o se
 * suma al hueco. El culpable era `#primary`, que lleva 2,5em
 * (`--ast-container-default-xlg-padding`) — 40 px que se colaban por dentro y dejaban
 * el hueco en 8,4% en lugar del 5%.
 *
 * Solo el horizontal: `padding-inline`, no `padding`. El relleno vertical de Astra da
 * el aire entre la cabecera y el contenido, y quitarlo apelmazaría la página.
 */
/*
 * La cadena real de envoltorios en la ficha, leída del HTML de producción:
 *
 *   body › #page › #content › .ast-container › #primary › #main
 *        › .ast-woocommerce-container › .ast-article-single › .summary
 *
 * Se anulan todos por si acaso, pero conviene dejar dicho que NINGUNO de ellos era el
 * causante de los 24 px que faltaban por explicar: al ponerlos a cero la medición no se
 * movió ni un píxel. El hueco venía del centrado, y se arregló arriba con `90vw`.
 */
body.trt-ficha #content,
body.trt-ficha #primary,
body.trt-ficha #main,
body.trt-ficha .ast-container,
body.trt-ficha .ast-woocommerce-container,
body.trt-ficha .ast-article-single,
body.trt-ficha .ast-article-post {
    padding-inline: 0;
}

/*
 * Temas de bloques: su maquetación ya centra el contenido con su propio ancho máximo,
 * así que aquí basta el relleno en el envoltorio y anular el relleno global del tema
 * (las dos variables de arriba) para que no se sumen. El hueco resultante es 5% o algo
 * más, según el ancho de contenido que declare el tema.
 */
body.trt-ficha .wp-site-blocks {
    padding-left: 5%;
    padding-right: 5%;
}

/*
 * En pantallas estrechas el 5% son apenas unos píxeles y el contenido queda pegado al
 * borde. Se pone un mínimo en unidades absolutas, que es lo que de verdad se lee.
 */
@media (max-width: 600px) {
    body.trt-ficha #page,
    body.trt-ficha .wp-site-blocks {
        padding-left: max(5%, 1rem);
        padding-right: max(5%, 1rem);
    }
}