/* ══════════════════════════════════════════════════════════════════════
   Alfantic Perfumería — alfantic-perfume-enhance.css
   ─────────────────────────────────────────────────────────────────────
   Componentes NUEVOS orientados a conversión para páginas de producto.
   · Se carga DESPUÉS de perfumes-styles.css.
   · Todas las clases usan el prefijo .afx- para no colisionar con nada
     existente. NO se reescribe ninguna clase del sitio actual.
   · Los colores usan var() con fallback: si tu tema define la variable,
     la respeta; si no, cae en el color de marca de Alfantic Perfumería.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --afx-gold:        var(--gold, #C9A84C);
  --afx-gold-deep:   #8C6C3B;
  --afx-gold-soft:   #D8B77E;
  --afx-ink:         var(--ink, #2b2119);
  --afx-ink-soft:    var(--ink-soft, #6b5f52);
  --afx-ink-muted:   var(--ink-muted, #9a8f80);
  --afx-line:        var(--line-soft, rgba(140,108,59,.18));
  --afx-cream:       #F7F3EA;
  --afx-radius:      var(--radius, 14px);
  --afx-ok:          #2e9e6b;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────── */
.afx-breadcrumb {
  max-width: 1000px;
  margin: 0 auto 1.2rem;
  padding: 0 .2rem;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--afx-ink-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.afx-breadcrumb a {
  color: var(--afx-ink-soft);
  text-decoration: none;
  transition: color .2s;
}
.afx-breadcrumb a:hover { color: var(--afx-gold-deep); }
.afx-breadcrumb .afx-sep { opacity: .5; }
.afx-breadcrumb .afx-current {
  color: var(--afx-ink);
  max-width: 46vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Fila de confianza (bajo el CTA de compra) ──────────────────────── */
.afx-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--afx-line);
}
.afx-trust-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: .8rem;
  line-height: 1.25;
  color: var(--afx-ink-soft);
}
.afx-trust-item svg { flex: 0 0 auto; width: 20px; height: 20px; stroke: var(--afx-gold-deep); }
.afx-trust-item b { color: var(--afx-ink); font-weight: 600; }

/* ── Realce de la nota de envío (elemento existente pf-qv-envio-note) ── */
.pf-qv-envio-note {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: .84rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  border: 1px dashed var(--afx-line);
  background: rgba(216,183,126,.08);
  color: var(--afx-ink-soft);
}
.pf-qv-envio-note.gratis {
  border-style: solid;
  border-color: rgba(46,158,107,.35);
  background: rgba(46,158,107,.10);
  color: #1f6f4c;
  font-weight: 600;
}

/* ── FAQ acordeón ───────────────────────────────────────────────────── */
.afx-section { max-width: 1000px; margin: 3rem auto 0; }
.afx-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--afx-ink);
  margin-bottom: 1.2rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--afx-line);
}
.afx-faq-item { border-bottom: 1px solid var(--afx-line); }
.afx-faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 1.05rem .2rem;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: .98rem;
  font-weight: 500;
  color: var(--afx-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.afx-faq-q .afx-faq-ico {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 1px solid var(--afx-line);
  border-radius: 50%;
  position: relative;
  transition: transform .25s ease;
}
.afx-faq-q .afx-faq-ico::before,
.afx-faq-q .afx-faq-ico::after {
  content: ''; position: absolute; background: var(--afx-gold-deep);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.afx-faq-q .afx-faq-ico::before { width: 10px; height: 1.5px; }
.afx-faq-q .afx-faq-ico::after  { width: 1.5px; height: 10px; transition: opacity .2s; }
.afx-faq-item.afx-open .afx-faq-q .afx-faq-ico::after { opacity: 0; }
.afx-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--afx-ink-soft);
}
.afx-faq-item.afx-open .afx-faq-a { max-height: 320px; }
.afx-faq-a p { padding: 0 .2rem 1.1rem; margin: 0; }
.afx-faq-a a { color: var(--afx-gold-deep); }

/* ── Productos relacionados ─────────────────────────────────────────── */
.afx-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.afx-rel-card {
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--afx-line);
  border-radius: var(--afx-radius);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.afx-rel-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(60,44,30,.10); }
.afx-rel-img {
  aspect-ratio: 1/1;
  background: var(--afx-cream);
  display: flex; align-items: center; justify-content: center;
  color: var(--afx-ink-muted); font-size: 1.6rem;
}
.afx-rel-img img { width: 100%; height: 100%; object-fit: cover; }
.afx-rel-body { padding: .8rem .85rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.afx-rel-name {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: .84rem; line-height: 1.3; color: var(--afx-ink);
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.afx-rel-price { font-family: 'Jost', sans-serif; font-size: .95rem; color: var(--afx-ink); margin: 0; }
.afx-rel-price small { color: var(--afx-ink-muted); font-size: .7rem; }
.afx-rel-old { text-decoration: line-through; color: var(--afx-ink-muted); font-size: .8rem; margin-right: .35rem; }

/* ── CTA fijo inferior (solo móvil) ─────────────────────────────────── */
.afx-sticky-buy {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: none;                     /* activado solo en móvil (abajo) */
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--afx-line);
  box-shadow: 0 -6px 20px rgba(60,44,30,.10);
  transform: translateY(120%);
  transition: transform .3s ease;
}
.afx-sticky-buy.afx-show { transform: translateY(0); }
.afx-sticky-buy.afx-hidden { transform: translateY(120%); }
.afx-sticky-price { display: flex; flex-direction: column; line-height: 1.1; }
.afx-sticky-price .afx-sp-now {
  font-family: 'Jost', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--afx-ink);
}
.afx-sticky-price .afx-sp-old {
  font-size: .74rem; color: var(--afx-ink-muted); text-decoration: line-through;
}
.afx-sticky-buy button {
  flex: 1;
  max-width: 62%;
  border: 0;
  cursor: pointer;
  padding: .95rem 1rem;
  border-radius: 12px;
  background: var(--afx-gold-deep);
  color: #fff;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
}
.afx-sticky-buy button:active { opacity: .9; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  .afx-trust { grid-template-columns: repeat(4, 1fr); }
  .afx-related-grid { grid-template-columns: repeat(4, 1fr); }
  .afx-breadcrumb .afx-current { max-width: 420px; }
}
@media (max-width: 719px) {
  .afx-sticky-buy { display: flex; }
  /* espacio para que el CTA fijo no tape el footer */
  body.afx-has-sticky { padding-bottom: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .afx-sticky-buy, .afx-faq-a, .afx-rel-card { transition: none; }
}