/*
Theme Name: Coroas Funeral Child
Description: Child theme de Flatsome para a loja de coroasfuneral.pt
Author: Flor 10
Template: flatsome
Version: 1.2
*/

/* ============================================================================
   COROAS FUNERAL — la hoja de estilos de la tienda

   Prefijo de clases propias: cfu-
   Prefijo de funciones PHP:  cfu_

   🔴 QUE VIVE AQUI Y QUE VIVE EN LA BASE DE DATOS (decision del usuario,
   2026-09-03). Aqui viven los TOKENS y el ASPECTO: colores, tipografia, ritmo y
   el ajuste de los componentes de Flatsome al tono de la casa. En la pagina
   vive la ESTRUCTURA de la portada, en shortcodes de Flatsome, para que se pueda
   editar con UX Builder — que es lo que se pidio y lo que antes no se podia:
   la portada la pintaba un filtro `the_content` en PHP y el constructor abria
   un lienzo vacio.

   ⚠️ Y el diseno NO se queda sin control de versiones por eso: la fuente de la
   portada es `wp/portada-loja.txt` en el repo, y se despliega con
   `wp/publicar-portada.php`. Asi sigue revisandose en un PR. El precedente que
   se evita es `italia/fiori-funebri-roma`, con la web entera en la BD y un repo
   que no la contiene: alli no hay forma de revisar un cambio ni de volver atras.

   ⚠️ El customizer de Flatsome sigue SIN usarse. Lo que Flatsome inyecta por
   defecto —Lato, el contenedor de 1080 px, el azul de sus botones— se anula
   aqui, en el bloque 1. Asi un `[button color="primary"]` puesto desde UX
   Builder sale ya con el verde de la casa, sin tocar `theme_mods`.

   🔴 LOS TOKENS SON LOS DE LA FACHADA, NO UNOS NUEVOS. Para el visitante las
   dos capas son la misma web, y el salto ocurre justo antes de pagar: si la
   tienda parece otro sitio, se rompe la confianza en el peor momento. Están
   copiados de `src/assets/styles.css`.

   ⚠️ El verde NO es una elección de ahora: la fachada ya pinta sus 371 CTAs con
   `--shop-green: #4a6b3e` («Verde da loja — botões e CTAs que enlazan para
   /florista/»). Se pulsa un botón verde y hay que aterrizar en una tienda
   verde.
   ============================================================================ */

:root {
  /* — Tipografía — */
  --cfu-serif: "Cormorant Garamond", "Source Serif Pro", Georgia, serif;
  --cfu-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* — Tinta: NEGRO PURO. Decisión del usuario para toda la red; el gris del
       cuerpo se retiró a propósito en la fachada. — */
  --cfu-ink:      #000000;
  --cfu-ink-soft: #8a7a68;   /* solo para adornos, nunca para texto de lectura */

  /* — Superficies — */
  --cfu-branco: #ffffff;
  --cfu-creme:  #f6f4ef;
  --cfu-creme2: #ece8de;

  /* — Dorado: acento y filetes — */
  --cfu-ouro:      #a88a4a;   /* SOLO adornos: filetes y el glifo. NO texto */
  --cfu-ouro-deep: #8a6f38;   /* 4,76:1 sobre BLANCO: solo 0,26 de margen */
  /* 🔴 El dorado para TEXTO PEQUENO, y por que existe: `--cfu-ouro-deep` da
     4,76:1 sobre blanco puro pero **4,4:1 sobre el crema del hero** — medido
     sobre el pixel, suspende AA. Es la tercera vez que esta trampa aparece en
     el proyecto. Este tono da 5,1:1 sobre crema y 5,6:1 sobre blanco, asi que
     aguanta las dos superficies. */
  --cfu-ouro-texto: #7a6230;

  /* — Verde de la tienda: TODA acción — */
  --cfu-verde:      #4a6b3e;
  --cfu-verde-deep: #38522e;

  /* — Ancho — */
  --cfu-container: 1240px;    /* útil real: ~1180 (1240 menos el gutter del row) */
  --cfu-gutter:    24px;

  /* — Ritmo — */
  --cfu-sp-2:  0.5rem;
  --cfu-sp-3:  0.75rem;
  --cfu-sp-4:  1rem;
  --cfu-sp-6:  1.5rem;
  --cfu-sp-8:  2rem;
  --cfu-sp-10: 2.5rem;
  --cfu-sp-12: 3rem;
  --cfu-sp-16: 4rem;
}

/* ----------------------------------------------------------------------------
   1. ANULAR LO QUE FLATSOME INYECTA POR DEFECTO

   Flatsome trae Lato, un contenedor de 1080 px y botones azules en mayúsculas
   desde su customizer. Como el diseño no vive en `theme_mods`, se corrige aquí.
   ⚠️ `#content` NO lleva contenedor en `page-blank.php` («Page - Full Width»),
   que es el lienzo a ancho completo que hay que mantener: cada `[section]` pone
   su propio color de fondo y su `[row]` centra el contenido, así las bandas
   llegan a los bordes y el texto no.
   ---------------------------------------------------------------------------- */
body,
.page-wrapper,
p, li, td, th, input, textarea, select, button {
  font-family: var(--cfu-sans);
}
h1, h2, h3, h4, h5, h6,
.heading-font {
  font-family: var(--cfu-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  /* ⚠️ El `color` tambien: Flatsome pinta los encabezados en #555 y sin esto
     los `h2` de las descripciones de categoria salian grises, no en el negro
     puro que decidio el usuario para toda la red. */
  color: var(--cfu-ink);
}
body {
  color: var(--cfu-ink);
  background: var(--cfu-branco);
}
/* El contenedor de Flatsome, al ancho de la casa (páginas de tienda, carrito…) */
.container,
.row:not(.row-collapse) {
  max-width: var(--cfu-container);
}
/* La portada es a sangre: sin padding heredado que la encoja. */
.page-id-front #content,
.home #content {
  padding-top: 0;
  padding-bottom: 0;
}

/* Los botones de Flatsome, al tono de la casa.
   🔑 Se pinta la CLASE de Flatsome, no una clase propia: así el
   `[button color="primary"]` que el usuario añada desde UX Builder sale verde
   solo, y `color="secondary" style="outline"` sale con el filete negro. Si esto
   viviera en una clase `cfu-btn`, cada botón nuevo nacería azul.
   ⚠️ Sin mayúsculas: el tema las fuerza, y en un sitio funerario un botón en
   mayúsculas grita. */
.button,
button,
input[type="submit"],
.woocommerce .button {
  font-family: var(--cfu-sans);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 2px;
}
.button.primary:not(.is-outline),
.woocommerce .button.alt,
button.single_add_to_cart_button,
.woocommerce-cart .checkout-button,
.woocommerce #payment #place_order {
  background-color: var(--cfu-verde);
  border-color: var(--cfu-verde);
  color: #ffffff;
}
.button.primary:not(.is-outline):hover,
.woocommerce .button.alt:hover,
button.single_add_to_cart_button:hover,
.woocommerce-cart .checkout-button:hover,
.woocommerce #payment #place_order:hover {
  background-color: var(--cfu-verde-deep);
  border-color: var(--cfu-verde-deep);
  color: #ffffff;
}
.button.secondary.is-outline,
.button.is-outline.secondary {
  border-color: var(--cfu-ink);
  color: var(--cfu-ink);
  background-color: transparent;
}
.button.secondary.is-outline:hover,
.button.is-outline.secondary:hover {
  background-color: var(--cfu-ink);
  border-color: var(--cfu-ink);
  color: #ffffff;
}
.button:focus-visible {
  outline: 2px solid var(--cfu-verde-deep);
  outline-offset: 3px;
}

/* ----------------------------------------------------------------------------
   2. TIPOGRAFÍA DE LAS SECCIONES

   🔴 LA REGLA DE ANCHO DEL PROYECTO: el contenido ocupa el ANCHO ÚTIL, en
   ordenador y en móvil. El límite vive en UNA variable. Nada de columnas de
   65ch ni de bloques que mueren a media página.

   ⚠️ Y la mitad que se olvida: al ampliar el ancho hay que SUBIR el cuerpo de
   letra, o la línea larga se lee peor. De ahí los 19 px de `--cfu-lead` y del
   texto de sección, tres por encima del base de 16.

   ⚠️ `.cfu-sec` NO lleva padding: lo pone el atributo `padding` del
   `[section]`, que es lo que el usuario puede mover en UX Builder. Si se
   pusiera aquí, se sumaría al del shortcode y el espaciado dejaría de ser
   editable.
   ---------------------------------------------------------------------------- */
.cfu-sec h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 var(--cfu-sp-4);
  color: var(--cfu-ink);
}
.cfu-lead {
  font-size: 1.1875rem;   /* 19 px, atado al ancho */
  line-height: 1.75;
  color: var(--cfu-ink);
  margin: 0 0 var(--cfu-sp-6);
  max-width: none;        /* el ancho lo manda el row, no el párrafo */
}
/* 🔴 EL TEXTO BASE DE SECCION VA EN `:where()`, Y ESO NO ES ADORNO.
   Escrito como `.cfu-sec p` puntua 0-1-1, mas que las clases de abajo (0-1-0),
   asi que la regla GENERICA le ganaba a `.cfu-lead`, `.cfu-eyebrow`, `.cfu-nota`
   y al numero de los pasos: el lead se servia a 17 px en vez de 19 —incumpliendo
   la regla de ancho, que exige subir el cuerpo—, el antetitulo salia al mismo
   cuerpo que el texto y el «01» perdia sus 44 px. Venia de antes de pasar la
   portada a shortcodes, y solo aparecio al imprimir el `font-size` junto al
   ancho en el medidor.
   ⚠️ Y el primer arreglo, `p:not([class])`, fue PEOR: sube a 0-2-1 y entonces
   gana a `.cfu-check p` y a `.cfu-cartao-tinta p` (0-1-1), que son las dos
   reglas internas — la segunda pinta el texto BLANCO de la tarjeta negra, asi
   que dejo texto negro sobre fondo negro. Invisible, y ninguna medida de ancho
   lo habria visto.
   🔑 La leccion: una regla que es BASE tiene que pesar CERO. `:where()` la deja
   en 0-0-0 y cualquier clase la sobreescribe, sin guerra de especificidad y sin
   depender del orden del fichero. */
:where(.cfu-sec p) { font-size: 1.0625rem; line-height: 1.7; color: var(--cfu-ink); }
.cfu-eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cfu-ouro-texto);
  margin: 0 0 var(--cfu-sp-4);
  font-weight: 500;
}
.cfu-nota { font-size: 1rem; margin: var(--cfu-sp-4) 0 0; }
.cfu-nota a {
  color: var(--cfu-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cfu-nota a:hover { color: var(--cfu-verde-deep); }

/* ----------------------------------------------------------------------------
   3. HERO — sin imagen

   El H1 a todo el ancho útil. En la fachada, una imagen al lado del texto dejó
   el H1 en 590 px de los 1192: se midió y por eso los heros de zona no llevan
   imagen. El color de fondo lo pone `bg_color` en el shortcode; aquí solo queda
   el filete de cierre, que el constructor no sabe poner.

   ⚠️ Si algún día se quiere hero con foto, la forma que NO rompe la regla es un
   `[ux_banner]` con la imagen de FONDO y velo — nunca una imagen en una columna
   al lado del texto. Hoy no hay foto apta: las de producto son verticales sobre
   fondo de tanatorio, y la única panorámica lleva el texto quemado en el propio
   fichero (y en brasileño).
   ---------------------------------------------------------------------------- */
.cfu-hero { border-bottom: 1px solid var(--cfu-creme2); }
.cfu-hero__titulo {
  font-size: clamp(2.25rem, 6.2vw, 4.25rem);
  line-height: 1.06;
  margin: 0 0 var(--cfu-sp-6);
  color: var(--cfu-ink);
}
.cfu-hero__titulo em {
  font-style: italic;
  font-weight: 400;
  color: var(--cfu-ouro-deep);   /* sobre crema claro: medido, pasa AA */
}
.cfu-hero .cfu-lead { margin-bottom: var(--cfu-sp-8); }
/* Los dos botones del hero, uno junto al otro con aire: Flatsome solo les pone
   margen inferior. */
.cfu-hero .button { margin-right: var(--cfu-sp-4); }

/* ----------------------------------------------------------------------------
   4. CATÁLOGO — con las fotos reales

   🔑 CAMBIO DE PREMISA (2026-09-03). Hasta hoy esta sección era una rejilla
   TIPOGRÁFICA sin foto, y con razón: los 16 productos se crearon sin imagen
   porque las de la web hermana llevan `coroasfloreslisboa.pt` quemado en el
   fichero. El usuario ha subido 17 fotos propias y están verificadas limpias
   (realce de la banda central: las de Lisboa cantan la marca, estas no), así
   que la rejilla pasa a ser la de WooCommerce con `[ux_products]` — que además
   es editable en UX Builder y trae precio y variantes sin código propio.

   Lo que queda aquí es solo llevar la tarjeta de Flatsome al tono de la casa:
   nombre en serif, precio legible, y sin el ruido de una tienda de camisetas.
   ---------------------------------------------------------------------------- */
.cfu-grupo {
  font-size: 1.375rem;
  margin: 0 0 var(--cfu-sp-6);
  padding-bottom: var(--cfu-sp-3);
  border-bottom: 1px solid var(--cfu-creme2);
  color: var(--cfu-ink);
}
/* ⚠️ Sin acotar a la portada, y es a proposito: la MISMA tarjeta se sirve en
   `/loja/` y en las dos categorias. Medido en `/loja/`, los 8 titulos salian en
   **#334862 y en Inter** —el azul y la sans que Flatsome trae de fabrica—
   mientras la portada los pintaba en serif negro. Es exactamente el riesgo que
   documenta la cabecera de este fichero: el visitante salta de la fachada a la
   tienda y le parece otro sitio. */
.product-title a,
.name.product-title a,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--cfu-serif);
  font-size: 1.1875rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--cfu-ink);
  letter-spacing: -0.01em;
}
.product_title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.price,
.price .woocommerce-Price-amount {
  font-family: var(--cfu-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--cfu-ink);
}
/* La foto del producto es 560×680 (vertical) y `woocommerce_thumbnail` esta a
   680 de ancho, o sea MAS que el original: sin esto la caja reserva una altura
   que la imagen no llena. */
.product-small .box-image img {
  width: 100%;
  height: auto;
}
.cfu-sec--catalogo .box-text { padding-top: var(--cfu-sp-4); }

/* ----------------------------------------------------------------------------
   5. LOS TRES PASOS — números en serif

   El mismo patrón de `/como-funciona/` en la fachada, para que las dos capas
   se lean como una. La rejilla la hacen las tres `[col span="4"]`, no un grid
   propio: así se pueden mover en el constructor.

   ⚠️ El número va en un `<p>` aparte, no dentro del `<h3>`: ahí entraría en el
   texto del encabezado y el lector de pantalla lo leería como parte del título.
   ---------------------------------------------------------------------------- */
.cfu-passo__num {
  font-family: var(--cfu-serif);
  font-size: 2.75rem;
  line-height: 1;
  /* Sobre crema, `--cfu-ouro` da 2,93:1 y el texto grande necesita 3:1: pasa
     raspando por debajo. Con el tono de texto sobra margen. */
  color: var(--cfu-ouro-texto);
  margin: 0 0 var(--cfu-sp-3);
}
.cfu-passo__titulo {
  font-size: 1.25rem;
  margin: 0 0 var(--cfu-sp-3);
  padding-top: var(--cfu-sp-3);
  border-top: 1px solid var(--cfu-creme2);
  color: var(--cfu-ink);
}
.cfu-passo p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------------------
   6. EL CANAL — dos columnas que juntas llenan el ancho

   No es la "columna estrecha" que la regla prohíbe: son dos bloques de
   contenido, y el H2 va dentro de la primera, no fuera. En la fachada se midió
   que un H1 dentro de una rejilla de dos columnas se queda en el 55-60 % del
   ancho útil; con un H2 de sección el precio es aceptable porque la columna
   sigue siendo contenido, no un panel de datos.

   El fondo crema y el relleno los pone la `[col]` (editables); aquí queda el
   filete dorado y la tipografía.
   ---------------------------------------------------------------------------- */
.cfu-check > .col-inner { border-left: 2px solid var(--cfu-ouro); }
.cfu-check h3 {
  font-size: 1.125rem;
  margin: 0 0 var(--cfu-sp-4);
  color: var(--cfu-ink);
}
.cfu-check ul {
  margin: 0 0 var(--cfu-sp-4);
  padding-left: 1.1rem;
}
.cfu-check li {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: var(--cfu-sp-2);
  color: var(--cfu-ink);
}
.cfu-check p { font-size: 0.9375rem; margin: 0; }

/* ----------------------------------------------------------------------------
   7. CIERRE — tarjeta de tinta

   Blanco sobre negro puro: 21:1. El único bloque oscuro de la página, para que
   el último CTA no compita con nada. El fondo negro y el relleno los pone la
   `[col]` con `bg_color` y `dark="true"`.
   ---------------------------------------------------------------------------- */
.cfu-cartao-tinta > .col-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cfu-sp-8);
}
.cfu-cartao-tinta p {
  margin: 0;
  color: #ffffff;
  font-family: var(--cfu-serif);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.3;
  flex: 1 1 20rem;   /* `1 1` y no `flex-shrink: 0`: en la fachada el 0 impidió
                        encogerse y desbordó a 320 px */
}
.cfu-cartao-tinta .button {
  flex: 0 0 auto;
  margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   9. LAS PAGINAS DE CATEGORIA Y LA DE TIENDA

   El `<h1>` lo imprime Flatsome (`shop-page-title`), activado desde
   `functions.php`. Aqui se le da el cuerpo de un H1 de la casa: **venia a 24 px,
   mas PEQUENO que los `h2` de la descripcion (25,6 px)** — jerarquia visual
   invertida, medida sobre el render.

   ⚠️ Y el texto de la descripcion sube de los 16 px de Flatsome a 17, que es el
   cuerpo de texto del proyecto. Es la mitad que se olvida de la regla de ancho:
   una linea de 1.200 px con letra de 16 se lee peor.
   ---------------------------------------------------------------------------- */
/* ⚠️ `h1.shop-page-title` y NO `.shop-page-title`: Flatsome usa esa misma clase
   en el `<div>` que envuelve el titulo Y el breadcrumb. Sin el `h1`, el
   breadcrumb heredaba los 40 px y salia mas grande que el propio titulo — se vio
   en la captura, no en el CSS. */
h1.shop-page-title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  color: var(--cfu-ink);
  margin-bottom: var(--cfu-sp-2);
}
.term-description {
  margin-bottom: var(--cfu-sp-10);
}
.term-description p,
.term-description li {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--cfu-ink);
}
.term-description h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: var(--cfu-sp-8) 0 var(--cfu-sp-3);
  color: var(--cfu-ink);
}
.term-description ul {
  margin-bottom: var(--cfu-sp-4);
}

/* ----------------------------------------------------------------------------
   9-bis. LAS LISTAS DEL CONTENIDO — por que el punto se salia del marco

   🔴 MEDIDO, no supuesto. Preguntando al navegador que reglas casan con un
   `<ul>` del contenido, salen estas dos de `flatsome.css`:

       ul        →  list-style: disc; list-style-position: initial;
       ol, ul    →  padding-left: 0; padding: 0;

   Y juntas explican el sintoma exacto:

   1. `list-style-position: initial` es **`outside`**, el valor por defecto de
      CSS: el punto NO se dibuja dentro de la caja del `<li>`, sino en el margen,
      a su izquierda.
   2. El navegador compensa eso con un `padding-left` de unos 40 px en el `<ul>`
      — ese hueco es literalmente el sitio donde vive el punto. **Flatsome lo
      borra** (para que las listas del menu no lleven sangria).

   Resultado: el `<li>` empieza exactamente donde empieza el parrafo (medido:
   los dos en x=115) y el punto se pinta **a la izquierda de 115**, o sea fuera
   del bloque de texto, sobre el hueco del contenedor.

   ⚠️ Y por eso `.cfu-check ul` NO tenia el problema: ahi ya habia un
   `padding-left: 1.1rem` escrito a mano. El fallo aparece en cuanto se pone una
   lista en cualquier otro sitio — y aparecio con los textos de categoria.

   🔑 EL ARREGLO ES DEVOLVER EL HUECO, NO CAMBIAR EL MARCADOR. La otra opcion
   —`list-style-position: inside`— mete el punto en la caja, pero entonces la
   segunda linea de un item envuelve **por debajo del punto** en vez de alinearse
   con la primera. Con `outside` + padding, el texto queda en bloque y el punto
   en su columna, que es como se compone una lista.
   ---------------------------------------------------------------------------- */
.term-description ul,
.term-description ol,
.cfu-sec ul,
.cfu-sec ol,
.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol,
#content .entry-content ul,
#content .entry-content ol {
  list-style-position: outside;
  padding-left: 1.25em;
  margin-left: 0;
}
.term-description li,
.cfu-sec li,
.woocommerce-Tabs-panel li {
  margin-bottom: var(--cfu-sp-2);
}
/* ⚠️ Las listas de la interfaz NO se tocan: el menu, el mini-carrito y las
   pestanas de Flatsome usan `<ul>` sin marcador y con el padding a 0 a
   proposito. Por eso la regla de arriba va acotada al contenido y no a `ul`. */

/* ----------------------------------------------------------------------------
   10. FICHA DE PRODUCTO

   Portado de los child themes de Marsella y London (mismo molde, 19 bloques),
   **con los tokens de esta casa**: los colores de alli son otros y copiar el
   CSS entero es como se heredan los defectos de la red.

   El orden de lectura de la ficha es: nombre → precio → tamanos → boton. Todo
   lo que se cruce en medio resta.
   ---------------------------------------------------------------------------- */
.single-product .product-title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: var(--cfu-sp-4);
}
/* El precio: es el segundo dato que se busca, y en un producto variable son DOS
   cifras. Que se lean sin esfuerzo. */
.single-product .price,
.single-product .price .woocommerce-Price-amount {
  font-family: var(--cfu-sans);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--cfu-ink);
}
/* La descripcion corta lleva los diametros, que es el dato con el que se decide
   el tamano. Cuerpo de lectura, no de pie de foto. */
.single-product .woocommerce-product-details__short-description {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--cfu-ink);
  margin-bottom: var(--cfu-sp-6);
}
/* SKU y categoria: informacion de apoyo, no protagonistas. */
.single-product .product_meta {
  font-size: 0.9375rem;
  color: var(--cfu-ink);
  border-top: 1px solid var(--cfu-creme2);
  padding-top: var(--cfu-sp-4);
  margin-top: var(--cfu-sp-6);
}
.single-product .product_meta a { color: var(--cfu-ink); text-decoration: underline; text-underline-offset: 3px; }

/* El selector de tamano y el boton, a tamano de decision. */
.single-product .variations label,
.single-product .variations th {
  font-family: var(--cfu-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--cfu-ink);
  text-transform: none;
  letter-spacing: 0;
}
.single-product .variations select {
  font-size: 1rem;
  border-color: var(--cfu-creme2);
}
.single-product button.single_add_to_cart_button {
  font-size: 1.0625rem;
  padding: 1.05em 2.2em;
  min-width: 16rem;
}
/* ⚠️ El boton deshabilitado (hasta elegir tamano) se queda con la opacidad de
   Flatsome a proposito: es un control INACTIVO, exento del criterio 1.4.3 de
   WCAG, y su aspecto apagado es la senal de que falta elegir algo. */

/* Las pestanas: solo queda «Informação adicional», asi que se lee como una
   seccion mas y no como una interfaz de pestanas vacia. */
.single-product .product-tabs,
.single-product .woocommerce-tabs {
  border-top: 1px solid var(--cfu-creme2);
  margin-top: var(--cfu-sp-12);
}
.single-product .woocommerce-tabs .tab-panels,
.single-product .woocommerce-Tabs-panel {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--cfu-ink);
}
.single-product .shop_attributes th { font-family: var(--cfu-sans); font-weight: 500; }

/* ----------------------------------------------------------------------------
   11. CARRITO Y CHECKOUT

   Son las dos pantallas donde se paga: nada de adornos, todo legible y el boton
   de accion sin competencia. El resto del CSS de la casa ya cubre los botones
   (bloque 1), asi que aqui solo va lo propio de estas dos.
   ---------------------------------------------------------------------------- */
.woocommerce-cart h1, .woocommerce-checkout h1,
.woocommerce-cart .entry-title, .woocommerce-checkout .entry-title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  color: var(--cfu-ink);
}
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
  font-size: 1rem;
  color: var(--cfu-ink);
  border-color: var(--cfu-creme2);
}
.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th {
  font-family: var(--cfu-sans);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cfu-ink);
}
/* La miniatura del producto en el carrito: cuadrada y pequena, que la foto es
   vertical y sin esto estira la fila. */
.woocommerce-cart .product-thumbnail img,
.woocommerce-checkout .product-thumbnail img {
  width: 64px;
  height: auto;
}
/* Etiquetas del formulario de pago: legibles, no en versalitas diminutas. */
.woocommerce-checkout .form-row label,
.woocommerce-checkout .woocommerce-billing-fields label {
  font-family: var(--cfu-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cfu-ink);
  text-transform: none;
  letter-spacing: 0;
}
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3 {
  font-size: 1.375rem;
  color: var(--cfu-ink);
}
/* El total, que es la cifra que se mira antes de pulsar. */
.woocommerce-cart .order-total .woocommerce-Price-amount,
.woocommerce-checkout .order-total .woocommerce-Price-amount {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cfu-ink);
}
.woocommerce-checkout #place_order { font-size: 1.0625rem; padding: 1.05em 2.2em; }

/* ----------------------------------------------------------------------------
   12. CARRITO VACIO Y 404

   Dos pantallas que solo se ven cuando algo ha ido mal, y por eso suelen
   quedarse sin tocar. Un carrito vacio con el aspecto de fabrica parece un
   error del sitio.
   ---------------------------------------------------------------------------- */
.woocommerce-cart .cart-empty,
.error404 .page-title,
.error404 h1 {
  font-family: var(--cfu-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--cfu-ink);
}
.woocommerce-cart .return-to-shop { margin-top: var(--cfu-sp-6); }
.error404 .page-wrapper { padding-block: var(--cfu-sp-16); }

/* ----------------------------------------------------------------------------
   13. EL PIE

   ⚠️ Hoy dice «Copyright 2026 © Flatsome Theme»: eso vive en el customizer y
   **no se toca desde aqui**, porque `theme_mods_*` no viaja en git. Queda
   anotado como pendiente. Lo que si se puede es que el pie no grite.
   ---------------------------------------------------------------------------- */
.absolute-footer,
.absolute-footer a {
  font-family: var(--cfu-sans);
  font-size: 0.875rem;
}
#footer .widget-title,
.footer-widgets .widget-title {
  font-family: var(--cfu-serif);
  font-size: 1.125rem;
  text-transform: none;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------------------
   14. MÓVIL

   Nada de esconder contenido: solo ritmo. El ancho útil se mantiene, que es la
   regla.
   ---------------------------------------------------------------------------- */
@media (max-width: 549px) {
  :root { --cfu-gutter: 18px; }
  .cfu-hero .button,
  .cfu-cartao-tinta .button { width: 100%; margin-right: 0; text-align: center; }
  .cfu-cartao-tinta > .col-inner { flex-direction: column; align-items: flex-start; }
}