/* Ficha de obra (plantilla «Producto individual») y archivo de la tienda.
   Marcado de los shortcodes de misifusart-core; el acento sale de la clase mf-acento-<slug>
   que el plugin pone en el producto (post_class). */

/* Título con el trazo de la firma en el color de la obra, suavizado con el papel */
.mf-ficha__titulo .elementor-heading-title { position: relative; display: inline-block; }
.mf-ficha__titulo .elementor-heading-title::after {
  content: "";
  position: absolute; left: -.04em; bottom: -.18em;
  width: min(100%, 6.5em); height: .16em; min-height: 6px;
  background: color-mix(in srgb, var(--acento-obra) 80%, var(--papel));
  -webkit-mask: var(--trazo) 0 0 / 100% 100% no-repeat;
          mask: var(--trazo) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.mf-ficha__antetitulo p { margin: 0; font-size: .9rem; font-weight: 600; letter-spacing: .02em; color: var(--tinta-suave); }

/* ---------- Compra ---------- */
.mf-ficha-compra { margin: 28px 0 32px; }
/* WooCommerce da 2em de margen a form.cart dentro del producto */
.woocommerce div.product .mf-ficha-compra form.cart,
.woocommerce div.product .mf-barra-compra form.cart { margin: 0; }
.mf-ficha-precio {
  margin: 0 0 14px;
  font-family: var(--e-global-typography-primary-font-family), Georgia, serif;
  font-weight: 600; font-size: 2rem; line-height: 1; color: var(--tinta);
}
/* Botón principal en el color de la obra. Texto y fondo con contraste AA para cualquier acento:
   las variables las calcula functions.php (misifusart_vars_acento); aquí, respaldo mostaza. */
/* «.woocommerce button.button» (0,2,1) pinta el botón gris: se gana con button.mf-boton-acento.button */
body button.mf-boton-acento.button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; padding: .7em 1.4em;
  font-family: var(--e-global-typography-accent-font-family), sans-serif;
  font-weight: 700; font-size: 1.1rem; line-height: 1.1;
  color: var(--acento-texto, var(--tinta)); background: var(--acento-boton, var(--mostaza));
  border: 2px solid var(--acento-boton, var(--mostaza)); border-radius: 6px;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
body button.mf-boton-acento.button:hover,
body button.mf-boton-acento.button:focus-visible {
  color: var(--acento-texto, var(--tinta));
  background: var(--acento-boton-hover, var(--mostaza-claro));
  border-color: var(--acento-boton-hover, var(--mostaza-claro));
}
.mf-ficha-envio { margin: 12px 0 0; font-size: .95rem; color: var(--tinta-suave); }

/* Vendida: sello en el sitio del precio y el botón */
.mf-ficha-compra--hogar { display: flex; gap: 18px; align-items: flex-start; }
.mf-sello--ficha { width: 104px; height: 104px; }
.mf-ficha-compra__titulo {
  margin: 0 0 8px; text-wrap: balance;
  font-family: var(--e-global-typography-primary-font-family), Georgia, serif;
  font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--tinta);
}
.mf-ficha-compra--hogar p:not(.mf-ficha-compra__titulo) { margin: 0 0 10px; color: var(--tinta-suave); }
body .mf-enlace-acento { font-weight: 600; text-decoration: underline; text-decoration-color: var(--acento-obra); text-underline-offset: .22em; }

/* ---------- Ficha técnica ---------- */
.mf-ficha-tabla { margin: 0; border-top: 1px solid color-mix(in srgb, var(--tinta) 22%, transparent); }
.mf-ficha-tabla div {
  display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 22%, transparent);
}
.mf-ficha-tabla dt { font-weight: 700; }
.mf-ficha-tabla dd { margin: 0; }

/* ---------- Historia ---------- */
.mf-ficha-historia { padding-left: 18px; border-left: 3px solid var(--acento-obra, var(--mostaza)); }
.mf-ficha-historia h2 {
  margin: 0 0 .45em;
  font-family: var(--e-global-typography-titulo-4-font-family), Georgia, serif;
  font-size: 1.35rem; font-weight: 600; line-height: 1.2;
  font-variation-settings: "SOFT" 50, "WONK" 0;
}
.mf-ficha-historia p { max-width: 46ch; }
.mf-ficha-historia .mf-firma { color: var(--tinta); width: 132px; }

/* ---------- Barra fija «Me lo llevo» (solo móvil, cuando el botón principal no se ve) ---------- */
.mf-barra-compra {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--papel); box-shadow: 0 -6px 20px -10px rgb(15 42 30 / .4);
  translate: 0 110%; transition: translate .25s ease;
}
.mf-barra-compra[hidden] { display: none; }
.mf-barra-compra.is-visible { translate: 0 0; }
.mf-barra-compra p { margin: 0; display: grid; line-height: 1.2; font-size: .9rem; min-width: 0; }
.mf-barra-compra span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-barra-compra strong { font-family: var(--e-global-typography-primary-font-family), Georgia, serif; font-size: 1.25rem; }
.mf-barra-compra form { margin: 0; flex: none; }
body .mf-barra-compra button.mf-boton-acento.button { width: auto; min-height: 48px; font-size: 1rem; }
@media (max-width: 767px) { body.mf-con-barra { padding-bottom: 76px; } }
@media (min-width: 768px) { .mf-barra-compra { display: none !important; } }

/* ---------- Archivo de la tienda ---------- */
.mf-resumen-obras { margin: 0; color: var(--tinta-suave); max-width: 46ch; }