/* cwm2convert · Ficha de producto por m²
   Colores en variables: ajustarlos aquí al color principal del tema. */
:root {
  --cwm2-acento: #0b5d7a;
  --cwm2-oferta: #c62828;
  --cwm2-texto: #232323;
  --cwm2-suave: #5b6670;
  --cwm2-borde: #d6dce0;
  --cwm2-fondo: #f5f7f8;
}

/* ---------- Precio estándar oculto (sigue en el HTML para SEO y Google) ----------
   :has() lo oculta desde el primer pintado; .cwm2-activo (lo pone el JS) cubre
   navegadores sin :has(). Van en reglas separadas a propósito. */
.product-prices:has(.cwm2-precio) .product-price,
.product-prices:has(.cwm2-precio) .product-discount {
  display: none !important;
}
.product-prices.cwm2-activo .product-price,
.product-prices.cwm2-activo .product-discount {
  display: none !important;
}
/* Si el hook sale dentro de la línea de impuestos, el bloque va antes del texto */
.tax-shipping-delivery-label:has(> .cwm2-precio) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tax-shipping-delivery-label > .cwm2-precio { order: -1; }

/* ---------- Precio por m² ---------- */
.cwm2-precio {
  margin: 0 0 .5rem;
  color: var(--cwm2-texto);
  font-size: 1rem;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
}
.cwm2-precio__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  margin: 0;
}
.cwm2-precio__importe {
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--cwm2-precio, inherit);
}
.cwm2-precio__ud { font-size: .55em; font-weight: 600; margin-left: .12em; }
.cwm2-precio__antes { color: var(--cwm2-suave); font-size: 1.0625rem; font-weight: 400; }
.cwm2-precio__caja { margin: .4rem 0 0; font-size: 1rem; line-height: 1.4; color: var(--cwm2-suave); }
.cwm2-precio__caja strong { color: var(--cwm2-texto); font-weight: 700; }
.cwm2-precio__caja s { margin-left: .15rem; }
.cwm2-precio__badge {
  display: inline-block;
  margin: 0 0 .4rem;
  padding: .2rem .55rem;
  border-radius: 2px;
  background: var(--cwm2-oferta);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.2;
}
.cwm2-precio--oferta .cwm2-precio__importe { color: var(--cwm2-oferta); }

.cwm2-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Calculadora ---------- */
.cwm2-conv {
  max-width: 34rem;
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.125rem;
  background: var(--cwm2-fondo);
  border: 1px solid var(--cwm2-borde);
  border-radius: 4px;
  color: var(--cwm2-texto);
  font-size: 1rem;
  text-align: left;
}
.cwm2-conv input,
.cwm2-conv button { font-family: inherit; }
.cwm2-conv__tit { margin: 0 0 .75rem; font-size: 1rem; font-weight: 700; }
.cwm2-conv__campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.25rem; }
.cwm2-conv__lbl { display: block; margin: 0 0 .3rem; font-size: .875rem; font-weight: 400; color: var(--cwm2-suave); }
.cwm2-conv__input {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--cwm2-borde);
  border-radius: 3px;
}
.cwm2-conv__input:focus-within { border-color: var(--cwm2-acento); box-shadow: 0 0 0 2px rgba(11, 93, 122, .25); }
.cwm2-conv .cwm2-conv__input input {
  width: 7.5rem;
  margin: 0;
  padding: .5rem .625rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.cwm2-conv__suf { padding: 0 .65rem 0 0; color: var(--cwm2-suave); }
.cwm2-conv__merma {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .6rem;
  font-size: .875rem;
  font-weight: 400;
  cursor: pointer;
}
.cwm2-conv__merma input { margin: 0; width: 1rem; height: 1rem; accent-color: var(--cwm2-acento); }
.cwm2-conv__res { margin: .875rem 0 0; min-height: 1.4em; font-size: .9375rem; line-height: 1.45; }
.cwm2-conv__res strong { font-size: 1.0625rem; }
.cwm2-conv__res--error { color: var(--cwm2-oferta); }
.cwm2-conv__btn {
  margin-top: .75rem;
  padding: .6rem 1.1rem;
  border: 0;
  border-radius: 3px;
  background: var(--cwm2-acento);
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}
.cwm2-conv__btn:hover:not([disabled]) { filter: brightness(1.1); }
.cwm2-conv__btn:focus-visible { outline: 2px solid var(--cwm2-acento); outline-offset: 2px; }
.cwm2-conv__btn[disabled] { opacity: .45; cursor: not-allowed; }
.cwm2-conv__btn[hidden] { display: none !important; }
.cwm2-conv__actual { margin: .75rem 0 0; font-size: .875rem; color: var(--cwm2-suave); }
.cwm2-conv__actual:empty { display: none; }

#quantity_wanted.cwm2-pulso { animation: cwm2-pulso .9s ease-out 1; }
@keyframes cwm2-pulso {
  from { box-shadow: 0 0 0 0 rgba(11, 93, 122, .55); }
  to { box-shadow: 0 0 0 10px rgba(11, 93, 122, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #quantity_wanted.cwm2-pulso { animation: none; outline: 2px solid var(--cwm2-acento); }
}
@media (max-width: 575px) {
  .cwm2-conv { padding: .875rem; }
  .cwm2-conv__btn { width: 100%; }
}