/* ============================================================
   Echando Raíces — rediseño de la ficha de producto
   Añadido 2026-07-24, a petición de Victoria (rediseño de la
   página de producto individual, con boton "Añadir al carrito"
   que se convierte en selector de cantidad tras añadir).

   Reutiliza el mismo sistema de color de marca ya usado en la
   home y en las cards de listado (ver home.css / custom-product-cards.css):
   fondo oscuro + acento violeta. Las variables --hr-color-* se
   definen aquí también (no solo en home.css) porque home.css
   solo se carga en la home (es el CSS del módulo hraiceshome) y
   esta página necesita las mismas variables disponibles siempre.
   ============================================================ */

:root {
  --hr-color-acento: #581f7c;
  --hr-color-acento-claro: #c79ce2;
  --hr-color-texto-sobre-acento: #e6dacc;
  --hr-color-fondo-oscuro: #221200;
  --hr-color-texto-claro: #e6dacc;
  --hr-color-texto-oscuro: #221200;
  --hr-color-superficie: #ffffff;
  --hr-color-borde-oscuro: rgba(230, 218, 204, 0.25);
  --hr-badge-nuevo: #5b7fd6;
  --hr-badge-oferta: #b98fe0;
  --hr-badge-agotado: #d98a3d;
  /* Sistema de bordes redondeados — sitio completo (2026-07-29),
     validado con Victoria sobre la propuesta del carrito. */
  --hr-radius-accion: 8px;
  --hr-radius-imagen: 8px;
  --hr-radius-card: 10px;
}

/* --- Fondo general de la página de producto --- */
body.page-product #wrapper,
body.page-product #main {
  background: var(--hr-color-fondo-oscuro);
  color: var(--hr-color-texto-claro);
}

body.page-product a {
  color: var(--hr-color-acento-claro);
}

/* --- Migas de pan ---
   Enlaces en violeta claro; el último elemento (la página actual, p. ej.
   el nombre del producto) no es un enlace — se deja en un tono más
   apagado para que se note que no es clicable. A petición de Victoria,
   24/07/2026. */
body.page-product .breadcrumb {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}
body.page-product .breadcrumb {
  font-size: 13px;
}
body.page-product .breadcrumb a,
body.page-product .breadcrumb a span {
  color: var(--hr-color-acento-claro);
}
body.page-product .breadcrumb a:hover {
  color: var(--hr-color-acento);
}
body.page-product .breadcrumb li:last-child span {
  color: rgba(230, 218, 204, 0.45);
}

/* Enlaces genéricos de la ficha (descripción, detalles, valoraciones):
   mismo comportamiento que el enlace "Ver productos" de la home
   (.all-product-link en home.css) — violeta claro por defecto, y en
   hover pasa a color claro de texto + subrayado. A petición de
   Victoria, 24/07/2026. No se toca aquí el enlace de las migas de pan
   (ya tiene su propio hover en violeta oscuro, más arriba) ni el botón
   "Añadir al carrito" ni las pestañas (tienen su propio estilo). */
body.page-product .tab-content a,
body.page-product .product-description a {
  color: var(--hr-color-acento-claro);
}
body.page-product .tab-content a:hover,
body.page-product .tab-content a:focus,
body.page-product .product-description a:hover,
body.page-product .product-description a:focus {
  color: var(--hr-color-texto-claro);
  text-decoration: underline;
}

/* La foto de producto alineada con el inicio de las migas de pan (a la
   izquierda) — ".page-content" traía un margen izquierdo de 44px
   heredado del tema (pensado para otras páginas), lo quitamos aquí. */
body.page-product .page-content {
  margin-left: 0 !important;
}

/* --- Título e info principal ---
   El nombre del producto se guarda ya en el formato correcto (mayúscula
   solo la inicial / siglas / nombres propios, ver ficha en el admin); si
   algún estilo heredado del tema lo pusiera en mayúsculas, lo forzamos
   aquí a que se respete tal cual está escrito. */
body.page-product h1.h1 {
  color: var(--hr-color-texto-claro);
  font-weight: 700;
  text-transform: none;
}

/* Todos los párrafos/texto de cuerpo de la ficha en el color claro de
   texto de marca (a petición de Victoria, 24/07/2026) — antes se usaban
   variantes con opacidad reducida, ahora es el mismo color en todos
   lados. */
body.page-product .product-description {
  color: var(--hr-color-texto-claro);
}

/* --- Galería de imágenes: encaje sobre fondo oscuro --- */
body.page-product .product-cover,
body.page-product .js-qv-mask {
  background: rgba(230, 218, 204, 0.05);
  border-radius: var(--hr-radius-imagen);
}
body.page-product .thumb-container .thumb {
  border: 1px solid var(--hr-color-borde-oscuro);
  border-radius: var(--hr-radius-imagen);
}
body.page-product .thumb-container .thumb.selected,
body.page-product .thumb-container .thumb:hover {
  border-color: var(--hr-color-acento-claro);
}

/* --- Badges / flags (mismos colores que en las cards de listado) --- */
body.page-product .product-flags {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* Texto de los badges: siempre el color oscuro de marca, sobre
   cualquier fondo de color de badge. Antes el badge "Nuevo" (fondo
   azul) y "Agotado" (fondo naranja) usaban texto claro, que no
   cumplía un contraste accesible sobre esos fondos (comprobado:
   ~2.8:1 y ~2.0:1, por debajo del mínimo 4.5:1 de WCAG AA para texto
   normal). El texto oscuro sí cumple en los 4 tipos de badge (≥4.5:1
   en todos los casos, comprobado uno a uno) — mismo criterio que ya
   se usaba en las cards de listado (custom-product-cards.css), donde
   todos los badges ya llevaban texto oscuro uniforme. Unificado aquí
   a petición de Victoria, 24/07/2026. */
body.page-product .product-flag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--hr-color-texto-oscuro) !important;
  white-space: nowrap;
}
body.page-product .product-flag.new {
  background: var(--hr-badge-nuevo) !important;
}
body.page-product .product-flag.discount {
  background: var(--hr-badge-oferta) !important;
}
body.page-product .product-flag.out_of_stock {
  background: var(--hr-badge-agotado) !important;
}
body.page-product .product-flag.online-only,
body.page-product .product-flag.pack {
  background: var(--hr-badge-oferta) !important;
}

/* --- Precio ---
   Color claro (no violeta) a petición de Victoria, 24/07/2026 — igual
   que en el diseño de referencia.
   Bloque 2 (precio): 48px de separación desde el bloque anterior
   (título + rating), y 8px entre el precio tachado (si lo hay), el
   precio y el texto "Impuestos incluidos". */
body.page-product .product-prices {
  margin: 48px 0 0;
}
body.page-product .product-discount {
  margin-bottom: 8px;
}
body.page-product .product-discount .regular-price {
  color: rgba(230, 218, 204, 0.5);
  text-decoration: line-through;
  font-size: 16px;
}
body.page-product .product-price {
  margin-bottom: 8px;
}
body.page-product .product-price .current-price-value {
  color: var(--hr-color-texto-claro);
  font-size: 30px;
  font-weight: 700;
}
body.page-product .product-price .discount {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--hr-badge-oferta);
  color: var(--hr-color-texto-oscuro);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}
body.page-product .tax-shipping-delivery-label,
body.page-product .product-unit-price {
  color: var(--hr-color-texto-claro);
  font-size: 13px;
}

/* --- Talla / color ---
   Se quitan a petición de Victoria, 24/07/2026. Para los productos
   actuales (sin combinaciones) este bloque ya sale vacío, pero lo
   ocultamos también por si en el futuro algún producto tuviera
   variantes configuradas — de momento no queremos mostrar ese
   selector en la ficha. */
body.page-product .product-variants {
  display: none !important;
}

/* --- Estrellas de valoración debajo del título ---
   Bloque 1 (título + rating): 24px de separación entre ambos, a
   petición de Victoria, 24/07/2026. */
body.page-product .hr-product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--hr-color-texto-claro);
}
body.page-product .hr-product-rating .hr-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--hr-color-acento-claro);
  font-size: 16px;
  line-height: 1;
}
body.page-product .hr-product-rating .hr-stars .is-empty {
  color: rgba(230, 218, 204, 0.3);
}
body.page-product .hr-product-rating .hr-rating-text {
  color: rgba(230, 218, 204, 0.7);
}
body.page-product .hr-product-rating a {
  color: var(--hr-color-acento-claro);
  text-decoration: underline;
}

/* --- Cantidad / Añadir al carrito ---
   Bloque 3 (acciones): 48px de separación desde el bloque de precio,
   a petición de Victoria, 24/07/2026.
   También a petición suya: se quita la cantidad/input de la vista
   inicial y se deja solo el botón "Añadir al carrito" + el de
   favoritos — se asume que la cantidad añadida por defecto es 1, y se
   puede seguir sumando después con el selector "− N +" (ver
   custom-product-page.js). El campo sigue en el DOM con value="1" para
   que el formulario nativo funcione igual, solo se oculta visualmente. */
body.page-product .product-actions {
  margin-top: 48px;
}
body.page-product .control-label {
  display: none !important;
}
body.page-product .product-quantity .qty {
  display: none !important;
}

/* Botón "Añadir al carrito" nativo, mismo estilo que el resto del sitio
   (.hr-cta-button / .hr-btn en home y listados) */
body.page-product .add-to-cart {
  background: var(--hr-color-acento-claro) !important;
  color: var(--hr-color-texto-oscuro) !important;
  border: none !important;
  border-radius: var(--hr-radius-accion) !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}
body.page-product .add-to-cart:hover,
body.page-product .add-to-cart:focus {
  background: var(--hr-color-acento) !important;
  color: var(--hr-color-texto-sobre-acento) !important;
}
body.page-product .add-to-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body.page-product #product-availability {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(230, 218, 204, 0.7);
}
body.page-product .product-last-items {
  color: #e0a256;
}
body.page-product .product-available {
  color: #7fbf7f;
}

/* Selector de cantidad ↔ botón: estado inicial (se gestiona por JS con
   custom-product-page.js). Antes de que el JS actúe, se muestra el
   bloque nativo tal cual (ver product-add-to-cart.tpl) para que la
   página siga siendo funcional incluso si el script no llega a
   cargar. */
body.page-product .hr-qty-stepper {
  display: none;
  align-items: center;
  gap: 0;
  width: fit-content;
  /* Grupo de acción (mismo radio que ".add-to-cart", al que sustituye):
     se redondea el contenedor entero + "overflow: hidden" en vez de
     cada botón suelto, para que el − y el + salgan como un único
     bloque con esquinas exteriores redondeadas y sin costura visible
     entre ambos botones y el valor central. */
  border-radius: var(--hr-radius-accion);
  overflow: hidden;
}
body.page-product .hr-qty-stepper.is-active {
  display: inline-flex;
}
body.page-product .hr-qty-stepper button {
  width: 40px;
  height: 44px;
  background: var(--hr-color-acento-claro);
  color: var(--hr-color-texto-oscuro);
  border: none;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
body.page-product .hr-qty-stepper button:hover {
  background: var(--hr-color-acento);
  color: var(--hr-color-texto-sobre-acento);
}
body.page-product .hr-qty-stepper button:disabled {
  opacity: 0.5;
  cursor: default;
}
body.page-product .hr-qty-stepper .hr-qty-value {
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(230, 218, 204, 0.08);
  color: var(--hr-color-texto-claro);
  font-weight: 600;
  font-size: 16px;
}
/* Nota: cuando el stepper está activo, es el propio JS
   (custom-product-page.js) el que oculta el bloque nativo de
   cantidad + botón poniendo su "display" a "none" directamente
   (no con una clase CSS), porque se mantiene en el DOM para que el
   formulario y sus inputs ocultos sigan funcionando (el JS reutiliza
   el envío nativo de PrestaShop). */

/* --- Compartir + bloque de confianza ---
   Movidos al final de la ficha (después de las pestañas), a petición de
   Victoria, 24/07/2026 — ver product.tpl. */
body.page-product .product-additional-info {
  margin-top: 32px;
}
body.page-product .social-sharing span {
  color: var(--hr-color-texto-claro);
}
body.page-product .blockreassurance_product {
  margin-top: 20px;
}
body.page-product .blockreassurance_product,
body.page-product .blockreassurance_product a,
body.page-product .blockreassurance_product p,
body.page-product .blockreassurance_product span {
  color: var(--hr-color-texto-claro) !important;
}

/* --- Pestañas Descripción / Detalles / Valoraciones ---
   Bloque 4 (pestañas + contenido): 48px de separación desde el bloque
   de acciones, sin línea separadora encima (a petición de Victoria,
   24/07/2026), y 24px entre las pestañas y su contenido. */
body.page-product .tabs {
  margin-top: 48px;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.page-product .tab-content {
  background: transparent !important;
}
body.page-product .nav-tabs {
  border-bottom: 1px solid var(--hr-color-borde-oscuro);
  gap: 8px;
}
/* Margen de 8px dentro de cada pestaña para que no queden pegadas. */
body.page-product .nav-tabs .nav-link {
  color: rgba(230, 218, 204, 0.55);
  font-weight: 600;
  border: none;
  padding: 8px;
  background: transparent !important;
}
/* Pestaña seleccionada: subrayado + texto en violeta claro.
   Pestañas NO seleccionadas en hover: texto y línea en el MISMO
   violeta claro (no violeta oscuro, no fondo de color) — corregido
   24/07/2026 a petición de Victoria, que pidió el violeta claro en
   vez del oscuro que se había puesto en la ronda anterior. También se
   sobreescribe aquí el "border-bottom:#24b9d7" (azul celeste) que
   pone el tema nativo en ".tabs .nav-tabs .nav-link:hover" — sin
   este override, la línea de hover salía en azul en vez de violeta. */
body.page-product .nav-tabs .nav-link.active {
  color: var(--hr-color-acento-claro);
  border-bottom: 2px solid var(--hr-color-acento-claro);
}
body.page-product .nav-tabs .nav-link:hover,
body.page-product .nav-tabs .nav-link:focus {
  color: var(--hr-color-acento-claro);
  background: transparent !important;
  border-bottom: 2px solid var(--hr-color-acento-claro);
}
/* Texto de las pestañas (que no sea enlace) en color claro y mín. 16px;
   los enlaces mantienen el color de acento ya definido globalmente
   (body.page-product a). */
body.page-product .tab-content {
  padding-top: 24px;
  padding-left: 0;
  padding-right: 0;
  color: var(--hr-color-texto-claro);
  font-size: 16px;
  line-height: 1.6;
}
/* El color declarado en ".tab-content" de arriba es heredado por sus
   hijos, pero el tema nativo tiene reglas propias que declaran un
   color directamente sobre "p" y sobre "li" dentro de la descripción
   (ej. selector desnudo "p{color:#7a7a7a}", y
   ".product-information .product-description ul li{color:#7a7a7a}")
   — un valor declarado directamente en el propio elemento gana
   siempre a un valor heredado, sin importar la especificidad de la
   regla. Por eso el texto seguía saliendo gris pese al color en el
   contenedor. Se declara aquí el color también directamente sobre
   p/li/span, con !important para no depender del orden de carga de
   los ficheros CSS. Los enlaces (a) no están incluidos aquí a
   propósito — tienen su propio color definido más arriba. Corregido
   24/07/2026 a petición de Victoria. */
body.page-product .tab-content p,
body.page-product .tab-content li,
body.page-product .tab-content span {
  color: var(--hr-color-texto-claro) !important;
  font-size: 16px;
}
body.page-product .tab-content h2,
body.page-product .tab-content h3,
body.page-product .tab-content h4 {
  color: var(--hr-color-texto-claro);
}

/* --- Pestaña "Valoraciones" ---
   Contiene el bloque real de comentarios/valoraciones del producto,
   trasladado aquí por JS (custom-product-page.js) desde su posición
   nativa al final de la página. */
body.page-product #hr-valoraciones #product-comments-list-header,
body.page-product #hr-valoraciones #product-comments-list,
body.page-product #hr-valoraciones #product-comments-list-footer {
  color: var(--hr-color-texto-claro);
}
body.page-product .comments-nb {
  color: var(--hr-color-texto-claro);
  font-size: 13px;
}

/* --- Productos similares ---
   Título cambiado a "Productos similares" por JS (custom-product-page.js
   → renameNativeTexts), 24/07/2026 — aquí solo se ajusta el estilo.
   Puede salir como ".product-accessories" (si el producto tiene
   accesorios configurados) o como ".featured-products" (bloque nativo
   de "otros productos de la misma categoría" que se usa mientras no
   haya accesorios configurados — es lo que se ve actualmente en los 5
   productos HiiCBD). */
body.page-product .product-accessories .h5,
body.page-product .featured-products .h5,
body.page-product .featured-products h2,
body.page-product .featured-products h3,
body.page-product .featured-products p.h3 {
  color: var(--hr-color-texto-claro);
  text-transform: none;
}
body.page-product .featured-products {
  margin-top: 24px;
}