/* =====================================================================
   Fragancias Factory 3.15.0
   1) Hero Studio · visual editorial en escritorio (≥768 px)
   2) Compra rápida · estados del modal, fallback y confirmación
   El móvil del Hero (≤767 px) no se toca: conserva los ajustes 3.13.x.
   ===================================================================== */

/* ---------- 1. Hero Studio editorial (solo escritorio) ---------- */
@media (min-width:768px) {
  .ff-hero-studio.ff-hs--vis-d-editorial .ff-hs__visual { align-self:center; }
  .ff-hero-studio.ff-hs--vis-d-editorial .ff-hs__visual-card {
    border:0;
    background:transparent;
    box-shadow:none;
    border-radius:var(--ff-hs-img-radius-d,0);
  }
  .ff-hero-studio.ff-hs--vis-d-editorial .ff-hs__visual-card--image {
    min-height:0;
    max-height:var(--ff-hs-vis-maxh-d,680px);
  }
  .ff-hero-studio.ff-hs--vis-d-editorial .ff-hs__image {
    object-fit:var(--ff-hs-vis-fit-d,cover);
    object-position:var(--ff-hs-vis-x-d,50%) var(--ff-hs-vis-y-d,50%);
  }
  /* Producto WooCommerce como visual: sin marco, imagen a todo el ancho de la columna. */
  .ff-hero-studio.ff-hs--vis-d-editorial .ff-hs__visual-card--product { overflow:visible; border-radius:0; }
  .ff-hero-studio.ff-hs--vis-d-editorial .ff-hs__product-image { min-height:0; padding:0; }
  .ff-hero-studio.ff-hs--vis-d-editorial .ff-hs__product-image img {
    width:100%;
    height:auto;
    max-height:var(--ff-hs-vis-maxh-d,680px);
    object-fit:var(--ff-hs-vis-fit-d,cover);
    object-position:var(--ff-hs-vis-x-d,50%) var(--ff-hs-vis-y-d,50%);
    border-radius:var(--ff-hs-img-radius-d,0);
    filter:none;
  }
  .ff-hero-studio.ff-hs--vis-d-editorial .ff-hs__product-copy { padding:16px 0 0; }

  /* Corrección: el layout se guarda como visual_left (guion bajo); 3.13.2 solo estilaba visual-left. */
  .ff-hero-studio.ff-hs--d-visual_left .ff-hs__visual { order:-1; }
  .ff-hero-studio.ff-hs--d-visual_left .ff-hs__inner {
    grid-template-columns:minmax(0,var(--ff-hs-visual-col,46%)) minmax(0,calc(100% - var(--ff-hs-visual-col,46%) - var(--ff-hero-gap,56px)));
  }
}
@media (max-width:767px) {
  /* Misma corrección para móvil: visual_top. */
  .ff-hero-studio.ff-hs--m-visual_top .ff-hs__visual { order:-1; }
}

/* ---------- 2. Compra rápida ---------- */
.ff-qb { cursor:pointer; text-decoration:none; transition:opacity .16s ease, box-shadow .2s ease, transform .16s ease; }
.ff-qb.is-loading { opacity:.55; pointer-events:none; cursor:progress; }
.ff-qb.is-added { box-shadow:0 0 0 3px rgba(29,57,47,.22); transform:scale(1.06); }
.ff-qb.is-error { box-shadow:0 0 0 3px rgba(179,79,67,.28); }

.ff-variant-sheet.is-state-loading .ff-variant-sheet__panel > footer,
.ff-variant-sheet.is-state-error .ff-variant-sheet__panel > footer { display:none!important; } /* final.css fija el footer con !important */

.ff-sheet-fallback {
  display:grid;
  gap:16px;
  justify-items:start;
  padding:28px 24px 34px;
}
.ff-sheet-fallback p { margin:0; max-width:36ch; font-size:15px; line-height:1.5; color:#33463c; }
.ff-sheet-fallback__link { min-height:46px; padding-inline:24px; text-decoration:none; }

.ff-qb-toast {
  position:fixed;
  left:50%;
  bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:600;
  display:flex;
  align-items:center;
  gap:14px;
  max-width:min(92vw,440px);
  padding:12px 18px;
  border-radius:999px;
  background:#17392f;
  color:#fff;
  font-size:13px;
  line-height:1.35;
  opacity:0;
  transform:translate(-50%,14px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.ff-qb-toast.is-visible { opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.ff-qb-toast a { flex:0 0 auto; color:#e7d9a8; font-weight:600; text-decoration:underline; white-space:nowrap; }
@media (max-width:767px) {
  .ff-qb-toast { bottom:calc(76px + env(safe-area-inset-bottom)); border-radius:14px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .ff-qb, .ff-qb-toast { transition:none; }
  .ff-qb.is-added { transform:none; }
}