/* ##################################################################
   1 · FICHA DE PRODUCTO
   ################################################################## */

.hbx.hbx-ficha{padding:0 0 8px}

/* Woodmart mete la ficha dentro de su .container, que trae padding lateral.
   En el diseno aprobado la foto va a sangre y el cuerpo a 20 px exactos, asi
   que en celular la ficha entera se sale del padding del contenedor con el
   truco clasico de ancho completo. Va dentro de max-width:899px a proposito:
   en escritorio la ficha se centra sola con su propio max-width y ahi 100vw
   incluiria la barra de desplazamiento. */
@media (max-width:899px){
  /* Primero, por las buenas: se le quita el padding lateral al contenedor,
     pero SOLO en la ficha (body.single-product). Si Woodmart cambia el nombre
     de sus clases esto no calza con nada y no rompe nada. */
  body.single-product .site-content,
  body.single-product .site-content > .row,
  body.single-product .main-page-wrapper > .container{
    padding-left:0; padding-right:0;
  }
  /* Y por si eso no alcanzo, el ancho completo clasico. Con width:auto y los
     margenes negativos el ancho se resuelve solo: si el contenedor ya no tiene
     padding, calc(50% - 50vw) da 0 y no se mueve nada. */
  .hbx.hbx-ficha{width:auto; max-width:none; margin-inline:calc(50% - 50vw)}
}

/* ── migas ── */
.hbx-fi-miga{min-width:0; padding:14px 20px 0; font-size:.75rem; color:var(--texto-3);
  line-height:1.5; overflow-wrap:anywhere}
.hbx-fi-miga a{color:var(--morado)}
.hbx-fi-miga a:hover{text-decoration:underline}

/* ── foto grande ── */
.hbx-ficha-top{min-width:0}
.hbx-fi-col-foto{min-width:0}

.hbx-fi-marco{background:var(--lavender)}
/* Los valores del prototipo: 74% de la caja, no el margen fijo de la tarjeta.
   Se nombra .hbx en el selector para ganarle a .hbx-caja-foto img sin
   importar en que orden terminen las dos reglas. */
.hbx .hbx-fi-marco img{max-width:74%; max-height:74%}

.hbx-fi-tag{position:absolute; top:14px; left:14px; z-index:2;
  background:var(--naranja-btn,#cc4400); color:#fff;
  font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 14px; border-radius:999px}

/* ── cuerpo ── */
.hbx-fi-cuerpo{min-width:0; padding:20px 20px 34px}

.hbx-fi-cat{margin:0 0 6px; font-size:.6875rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--morado)}

/* Nombre largo: se parte en varias lineas, nunca se recorta. La caja de la
   foto es cuadrada y no cede. */
.hbx .hbx-fi-cuerpo h1{margin:0; font-size:1.75rem; font-weight:600; letter-spacing:-.04em;
  line-height:1.05; color:var(--texto); overflow-wrap:anywhere}

.hbx-fi-form{margin:6px 0 0; font-size:.9375rem; color:var(--texto-2); line-height:1.5}

.hbx-fi-precio{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; min-width:0;
  margin:16px 0 4px; font-variant-numeric:tabular-nums}
.hbx-fi-precio b{font-size:2.125rem; font-weight:700; letter-spacing:-.05em; line-height:1}
.hbx-fi-precio s{font-size:1rem; color:var(--texto-3)}

.hbx-fi-cuotas{margin:0; font-size:.8125rem; color:var(--texto-2)}

/* ── comprar ── */
/* Woodmart estiliza form.cart en la ficha. Aca se neutraliza lo que podria
   heredar: la fila la arma .hbx-fi-fila. */
.hbx .hbx-fi-cart{display:block; min-width:0; margin:0; padding:0; border:none; background:none}

.hbx-fi-fila{display:flex; align-items:center; gap:12px; min-width:0; margin:18px 0 10px}

.hbx .hbx-fi-add{flex:1; min-width:0; min-height:56px; padding:0 20px;
  background:var(--naranja-btn,#cc4400); color:#fff; border:none; border-radius:999px;
  font-family:inherit; font-size:1.0625rem; font-weight:700; line-height:1.2;
  cursor:pointer; transition:background .15s}
.hbx .hbx-fi-add:hover,
.hbx .hbx-fi-add:focus{background:#b33a00; color:#fff}
.hbx .hbx-fi-add:active{background:var(--naranja-osc,#a83700)}
.hbx .hbx-fi-add:focus-visible{outline:2px solid var(--texto); outline-offset:2px}
.hbx .hbx-fi-add[disabled]{opacity:.7; cursor:default}

/* Sin stock. .hbx-agotado ya existe (style.css linea 164): aca solo crece al
   tamano del boton de la ficha. */
.hbx-ficha .hbx-agotado{min-height:56px; margin-top:18px; font-size:1.0625rem}

/* Producto no simple: el formulario nativo de WooCommerce, solo con la
   tipografia heredada. No se le pone diseno: el dia que exista un producto
   variable, lo importante es que funcione, no que combine. */
.hbx-fi-woo{min-width:0; margin:18px 0 0; font-family:inherit}

.hbx-ficha .hbx-envio{margin:16px 0 0}
.hbx-ficha .hbx-wa{margin-top:10px}

/* ── modo de uso / envio / cambios ── */
.hbx-fi-datos{margin-top:22px; border-top:1px solid var(--borde)}
.hbx-fi-datos dt{margin-top:16px; font-size:.6875rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--morado)}
.hbx-fi-datos dd{margin:4px 0 0; font-size:.9375rem; color:var(--texto-2); line-height:1.55}

/* ── secciones de abajo ── */
.hbx-fi-seccion{min-width:0; padding:32px 20px; border-top:1px solid var(--borde)}
.hbx-fi-env{min-width:0; max-width:1240px; margin-inline:auto}
/* .hbx-cab trae su propio padding lateral para la portada; aca lo pone la
   seccion. */
.hbx-fi-seccion .hbx-cab{padding:0}
.hbx-fi-seccion .hbx-sub{margin:10px 0 24px}

.hbx-fi-tabla{width:100%; table-layout:fixed; border-collapse:collapse; font-size:.9375rem}
.hbx-fi-tabla td{padding:16px 4px; border-bottom:1px solid var(--borde); vertical-align:top;
  overflow-wrap:anywhere}
.hbx-fi-tabla tr:first-child td{border-top:1px solid var(--borde)}
.hbx-fi-tabla td:first-child{width:40%; color:var(--texto-2); font-size:.8125rem;
  letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.hbx-fi-tabla td:last-child{font-weight:500; font-variant-numeric:tabular-nums}

/* Aviso regulatorio. Se imprime siempre, en todos los productos. */
.hbx-fi-legal{max-width:70ch; margin:20px 0 0; padding-left:14px;
  border-left:3px solid var(--borde-2);
  font-size:.75rem; color:var(--texto-3); line-height:1.6}

/* ── tambien te recomendamos ──
   Reusa .hbx-seccion, .hbx-cab, .hbx-grilla y .hbx-prod tal cual: cero CSS
   nuevo, solo la linea de arriba que separa la seccion. */
.hbx-fi-reco{border-top:1px solid var(--borde)}

/* ── preguntas frecuentes ── */
.hbx-fi-faq{min-width:0; max-width:820px}
.hbx-fi-faq details{border-bottom:1px solid var(--borde)}
.hbx-fi-faq details:first-of-type{border-top:1px solid var(--borde)}
.hbx-fi-faq summary{display:flex; justify-content:space-between; align-items:center; gap:24px;
  min-width:0; min-height:44px; padding:22px 0; list-style:none; cursor:pointer;
  font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; line-height:1.35}
.hbx-fi-faq summary span{min-width:0}
.hbx-fi-faq summary::-webkit-details-marker{display:none}
.hbx-fi-faq summary::after{content:"+"; flex:none; color:var(--morado); font-weight:600;
  font-size:1.5rem; line-height:1}
.hbx-fi-faq details[open] summary::after{content:"\2013"}
.hbx-fi-faq summary:focus-visible{outline:2px solid var(--morado); outline-offset:2px}
.hbx-fi-faq details p{max-width:68ch; margin:0; padding:0 40px 24px 0;
  font-size:.9375rem; color:var(--texto-2); line-height:1.65}


/* ── escritorio ─────────────────────────────────────────────────────── */
@media (min-width:900px){
  .hbx-fi-miga{max-width:1240px; margin-inline:auto; padding:24px 32px 0}

  .hbx-ficha-top{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
    max-width:1240px; margin-inline:auto; padding:24px 32px 72px}
  /* Los dos hijos del grid: sin esto crecen hasta el ancho de su contenido. */
  .hbx-ficha-top > *{min-width:0}

  .hbx-fi-col-foto{position:sticky; top:24px}
  .hbx-fi-marco{border-radius:24px; overflow:hidden}

  .hbx-fi-cuerpo{padding:0}
  .hbx .hbx-fi-cuerpo h1{font-size:2.6rem; line-height:.95; letter-spacing:-.045em}
  .hbx-fi-precio b{font-size:2.6rem}
  .hbx-fi-precio s{font-size:1.125rem}

  .hbx-fi-seccion{padding:64px 32px}
  .hbx-fi-faq details p{padding:0 60px 24px 0}
  .hbx-fi-tabla td:first-child{width:34%}
}

@media (min-width:1200px){
  .hbx .hbx-fi-cuerpo h1{font-size:3.2rem}
}

@media (prefers-reduced-motion:reduce){
  .hbx-ficha *{transition:none !important}
}