/*
 * Fragancias Factory 3.13.1 — Hero Composer Pro
 * Opt-in: todas las reglas están bajo .ff-hero-composer.
 * Sin activar el Composer, 3.13.0 permanece visualmente intacto.
 */

.ff-hero-composer { overflow:hidden; }

/* El copy pasa de columna rígida a una rejilla de 12 columnas. */
.ff-hero-composer .ff-hc-copy {
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--ff-hc-gap-d,8px);
  row-gap:0;
  align-content:center;
  align-items:start;
  min-width:0;
  text-align:initial;
}

.ff-hero-composer .ff-hc-block {
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  min-width:0;
  max-width:100%;
  position:relative;
  z-index:1;
}

/* El espacio lo controla el bloque, no los márgenes históricos de los hijos. */
.ff-hero-composer .ff-hc-block > * { margin-top:0; margin-bottom:0; }
.ff-home-v31 .ff-hero-v32.ff-hero-composer .ff-hc-title h1 { margin:0 !important; }
.ff-home-v31 .ff-hero-v32.ff-hero-composer .ff-hc-subtitle .ff-hero__lead { margin:0 !important; }
.ff-hero-composer .ff-hc-badge .ff-kicker,
.ff-hero-composer .ff-hc-badge .ff-hx__badge { margin:0; }
.ff-hero-composer .ff-hc-title .ff-hx__title,
.ff-hero-composer .ff-hc-subtitle .ff-hx__lead { margin:0; }

/* Etiquetas de precio/envío independientes. */
.ff-hero-composer .ff-hc-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  min-height:38px;
  box-sizing:border-box;
  padding:9px 12px;
  border:1px solid var(--ff-hero-border,var(--ff-border-strong));
  background:transparent;
  color:inherit;
  font-size:11px;
  line-height:1.2;
  letter-spacing:.02em;
  white-space:normal;
}
.ff-hero-composer .ff-hc-pill--shipping {
  border-color:var(--ff-hero-border,#b69e5d);
  color:var(--ff-hero-text,#665b35);
}
.ff-hx.ff-hero-composer.ff-hx--background .ff-hc-pill {
  border-color:var(--ff-hero-border,rgba(255,255,255,.45));
  color:inherit;
}

/* CTA: el wrapper decide la colocación, el botón conserva su UI real. */
.ff-hero-composer .ff-hc-cta .ff-btn,
.ff-hero-composer .ff-hc-cta2 .ff-btn {
  width:max-content;
  max-width:100%;
}

/* En el hero moderno, el Composer sustituye el align-items global del copy. */
.ff-hx.ff-hero-composer .ff-hx__copy.ff-hc-copy {
  align-items:start;
  text-align:initial;
  justify-self:stretch;
  width:100%;
  max-width:none;
}

/* Mantiene tipografía moderna si se usa un layout 3.13. */
.ff-hx.ff-hero-composer .ff-hc-title .ff-hx__title { max-width:100%; }
.ff-hx.ff-hero-composer .ff-hc-subtitle .ff-hx__lead { max-width:100%; }

@media (max-width:767px) {
  .ff-hero-composer .ff-hc-copy {
    column-gap:var(--ff-hc-gap-m,6px);
  }
  .ff-hero-composer .ff-hc-pill {
    min-height:34px;
    padding:7px 8px;
    font-size:10px;
  }
  .ff-hero-composer .ff-hc-cta .ff-btn,
  .ff-hero-composer .ff-hc-cta2 .ff-btn {
    min-height:38px;
  }
}