/*
Theme Name: ShoppingCart Child (Skinic)
Theme URI: https://skinicaragua.net
Description: Tema hijo de ShoppingCart para Skinic Nicaragua. Aquí viven las personalizaciones del sitio (footer, caja de autor, carrusel de marcas y plantillas propias) para que las actualizaciones del tema padre NO las sobrescriban.
Author: Skinic
Template: shoppingcart
Version: 1.0.0
Text Domain: shoppingcart-child
*/

/* ============================================================
   Este archivo existe para añadir tus propias reglas CSS.
   Se carga DESPUÉS del style.css del tema padre, así que
   cualquier regla que pongas aquí sobrescribe al padre.

   Los estilos personalizados actuales (carrusel de marcas, etc.)
   están dentro de sus plantillas correspondientes, no aquí.
   ============================================================ */


/* ============================================================
   TÍTULO VISIBLE EN LAS PÁGINAS DE WOOCOMMERCE
   ------------------------------------------------------------
   El tema padre (style.css, ~línea 4274) oculta el título de
   TODAS las páginas de WooCommerce:

       .woocommerce #main .page-title { display: none; }

   Eso dejaba sin nombre a las 24 páginas de categoría de producto
   (/the-ordinary/, /cerave/, /serums/...), a la tienda, al carrito
   y a "Mi cuenta": el <h1> estaba en el código pero medía 0 x 0.

   Además de desorientar a quien navega, Google recomienda que el
   H1 sea visible (un H1 oculto con display:none se considera mala
   práctica). Aquí lo devolvemos con el estilo de la marca.

   Comprobado: cada página tiene UN SOLO .page-title, así que no
   se duplica ningún encabezado.

   Para revertir: borrar este bloque.
   ============================================================ */

.woocommerce #main .page-title {
	display: block;
	margin: 0 0 12px;
	color: #008080;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* En móvil, más pequeño para que no ocupe media pantalla */
@media only screen and (max-width: 767px) {
	.woocommerce #main .page-title {
		font-size: 21px;
		margin-bottom: 8px;
	}
}


/* ============================================================
   ACCESIBILIDAD: CONTRASTE DE ENLACES
   ------------------------------------------------------------
   Auditado el 19-sep-2026 midiendo el color REAL que calcula el
   navegador (no lo que dice el CSS). El rosa de marca #ef7c8e
   sobre blanco da 2,64:1, y el mínimo de WCAG 2.2 AA es:
     · 4,5:1 en texto normal
     · 3:1   en texto grande (>=24px, o >=18,66px en negrita)

   Lo que fallaba:
     · enlaces de las descripciones de categoría  2,64:1  ❌
     · título del sitio, 28px                     2,64:1  ❌ (mín. 3:1)
     · nombre de marca en /marcas/                2,64:1  ❌
     · crédito "Web creada por Subelia"           2,81:1  ❌

   Solución: un tono más oscuro de la MISMA familia de rosa
   (#c2185b, 5,9:1) solo en los enlaces de texto, más subrayado
   para que se distingan por algo más que el color (WCAG 1.4.1).
   Botones, bordes y adornos siguen con el rosa original: la
   identidad de la marca no cambia.

   Para revertir: borrar este bloque.
   ============================================================ */

/* --- Enlaces dentro de textos (descripciones, artículos, comentarios) --- */
.term-description a,
.entry-content a,
.post-content a,
.skinic-author-box .skinic-author-info a,
.comment-content a,
.woocommerce-product-details__short-description a,
.woocommerce-Tabs-panel--description a {
	color: #c2185b; /* 5,9:1 sobre blanco */
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------
   IMPORTANTE — por qué va el prefijo "body":
   El tema NO pone el color de los enlaces en su style.css, sino en un
   <style> inline que genera el personalizador (bloque con 17 usos de
   #ef7c8e, con la regla "a, #site-title a, ... { color: #ef7c8e }").
   Autoptimize mueve los <link> al head, pero ese <style> se queda donde
   estaba, o sea DESPUÉS de este archivo. Por eso, a igual especificidad,
   gana el tema.

   El prefijo "body" añade un selector de tipo y desempata a nuestro
   favor sin necesidad de !important (que rompería botones con fondo
   oscuro y texto blanco, como el de WhatsApp).
   ------------------------------------------------------------ */

body a,
body a:visited,
body .entry-title a,
body .entry-meta a,
body .post-navigation a,
body .comment-respond a,
body .comment-content a,
body .widget a,
body .main-navigation ul li.current-menu-item a,
body .main-navigation ul li.current_page_item a,
body .main-navigation ul li.current-menu-ancestor a,
body .main-navigation ul li.current_page_ancestor a,
body .main-navigation ul li:hover > a,
body .main-navigation ul li ul li a:hover,
body .entry-content a,
body .term-description a,
body .skinic-author-box a,
body .skm-cell a,
body .skic-marca,
body .sk-f-credit a {
	color: #c2185b;
}

body a:hover,
body .entry-title a:hover,
body .entry-meta a:hover,
body .post-navigation a:hover,
body .term-description a:hover,
body .entry-content a:hover,
body .skinic-author-box a:hover,
body .skm-cell a:hover {
	color: #8e1043;
}

/* --- Título del sitio: es texto grande (28px), le basta 3:1 --- */
body #site-title a {
	color: #e05a70; /* mismo rosa, un punto más oscuro: 3,6:1 */
}

/* --- Crédito del pie ("Web creada por...") --- */
body .sk-f-credit,
body .sk-f-credit a {
	color: #666666; /* 5,8:1 sobre blanco */
}

/* --- Botones con fondo de color: su texto va en blanco, no en rosa ---
   El botón de la caja de autor tiene fondo rosa (#c11a46). Si le aplicamos
   el rosa oscuro del texto queda rosa sobre rosa (1,02:1). Blanco sobre ese
   fondo da 5,99:1. Misma regla para cualquier enlace con fondo propio. */
body .skinic-author-box a.skinic-author-link,
body .skinic-author-box a.skinic-author-link:hover,
body a.button,
body a.button:hover,
body .btn-whatsapp-skinic-grid,
body .btn-whatsapp-skinic-grid:hover,
body .btn-whatsapp-skinic-single,
body .btn-whatsapp-skinic-single:hover {
	color: #ffffff;
}

/* --- Precio tachado (el "antes" de una oferta) ---
   WooCommerce lo pinta en #999, que sobre blanco da 2,84:1.
   #767676 da 4,54:1 y sigue leyéndose como secundario. */
body del .woocommerce-Price-amount,
body del .woocommerce-Price-amount bdi,
body del .woocommerce-Price-currencySymbol {
	color: #767676;
}
  /* --- SKU y etiquetas de la ficha de producto (19-sep-2026) ---
     El tema pinta el SKU y los enlaces de etiquetas en #808080, que sobre
     blanco da 3,94:1: por debajo del 4,5:1 que exige WCAG AA y que Google
     usa en Lighthouse. Lo detectó la ronda 3 de auditoría en 9 elementos
     del producto y 2 de /cerave/ (todos grises, ninguno de color).

     #767676 da 4,54:1 y mantiene el aspecto de texto secundario; es el
     mismo gris que ya usamos para el precio tachado, así que el sitio
     queda coherente.

     Selector original (shoppingcart/style.css:4595) = 2 y 4 clases, por eso
     el prefijo body sube la especificidad sin recurrir a !important.

     ⚠️ TRAMPA (19-sep-2026): "body .woocommerce" NO FUNCIONA AQUÍ.
     El tema pone la clase en el propio <body>:
         <body class="... woocommerce woocommerce-page woocommerce-no-js">
     Así que "body .woocommerce" exige un .woocommerce DESCENDIENTE del body,
     y como .woocommerce ES el body, no hay descendiente que valga: la regla
     nunca casa (comprobado con Element.matches() en Chromium).
     La forma correcta es el selector COMPUESTO "body.woocommerce" (sin
     espacio), que sí casa con el body y mantiene la especificidad alta.

     Se dejan además las dos versiones sin prefijo: tienen la misma
     especificidad que la del tema, pero al ir después en el CSS ganan por
     orden y sirven de red de seguridad si algún día cambia el body_class. */
  body .entry-summary .sku,
  body.woocommerce .summary .product_meta .posted_in a,
  body.woocommerce .summary .product_meta .tagged_as a,
  body .brand span a,
  .woocommerce .summary .product_meta .posted_in a,
  .woocommerce .summary .product_meta .tagged_as a {
        color: #767676;
  }

  /* --- Precio tachado EN LAS REJILLAS de categoría (19-sep-2026) ---
     WooCommerce aplica "opacity: 0.5" al precio antiguo dentro de
     <del>. Aunque el color sea #767676 (4,54:1), al mezclarse con el blanco
     el resultado REAL baja a ~#9f9f9f, que da 2,64:1 y suspende.
     Lighthouse lo detectaba solo en /cerave/ porque es la única categoría
     con productos en oferta visibles en la rejilla.

     Se anula la opacidad: el precio sigue viéndose atenuado por el tachado
     y por el gris, sin necesidad de transparentarlo. */
  body del,
  body .woocommerce ul.products li.product .price del,
  body .woocommerce div.product p.price del,
  body del span.woocommerce-Price-amount,
  body del span.woocommerce-Price-currencySymbol,
  body del bdi {
        /* !important JUSTIFICADO: en un selector agrupado el navegador aplica
           la especificidad del selector MÁS DÉBIL que casa, y como el grupo
           incluye "body del" (0,0,2), la regla perdía contra
           ".woocommerce ul.products li.product .price del" (0,4,3) y el
           precio seguía con opacity 0.7 → #9f9f9f. Comprobado con el
           inspector: no era falta de especificidad escrita, sino del grupo. */
        opacity: 1 !important;
        color: #767676;
  }