/* FXR Vargas Favoritos — corazones, aviso, contador y página "Mis favoritos".
 * Estilo Vargas: Barlow, rojo de marca (--fxv-a, se fija desde PHP), esquinas rectas.
 * Los !important evitan que Salient pinte los <button> con sus estilos por defecto. */

:root { --fxv-a: #a3231f; --fxv-ink: #161616; --fxv-mut: #6a6a6a; --fxv-line: #e4e2de; --fxv-bg: #f6f5f3; }

/* Si Merchant sigue activo, su botón se oculta (evita dos corazones) */
.merchant-wishlist-button { display: none !important; }

/* ---------- Corazón ---------- */
.fxv-fav-btn {
  display: grid !important; place-items: center; width: 40px !important; height: 40px !important; min-width: 0 !important;
  padding: 0 !important; margin: 0 !important; border: 1px solid var(--fxv-line) !important; border-radius: 0 !important;
  background: #fff !important; color: var(--fxv-ink) !important; box-shadow: none !important; line-height: 1 !important;
  cursor: pointer; transition: transform .15s, border-color .15s;
}
.fxv-fav-btn svg { width: 19px; height: 19px; fill: none; stroke: var(--fxv-ink); stroke-width: 1.8; transition: fill .15s, stroke .15s; }
.fxv-fav-btn:hover { border-color: var(--fxv-ink) !important; }
.fxv-fav-btn.is-on { border-color: var(--fxv-a) !important; }
.fxv-fav-btn.is-on svg { fill: var(--fxv-a); stroke: var(--fxv-a); }
.fxv-fav-btn:focus-visible { outline: 2px solid #0f62fe; outline-offset: 2px; }
.fxv-fav-btn.is-pop { animation: fxv-fav-pop .35s ease; }
@keyframes fxv-fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* Tarjetas del catálogo: arriba a la derecha de la foto */
ul.products li.product { position: relative; }
.fxv-fav-btn--card { position: absolute !important; top: 12px; right: 12px; z-index: 30; }

/* Ficha: al lado de "Agregar al pedido" */
.fxv-fav-btn--single { display: inline-grid !important; width: 56px !important; height: 56px !important; margin-left: 12px !important; vertical-align: top; border: 1.5px solid var(--fxv-ink) !important; }
.fxv-fav-btn--single svg { width: 22px; height: 22px; }
.fxv-fav-alone { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 600 15px Barlow, sans-serif; color: var(--fxv-ink); }
.fxv-fav-alone .fxv-fav-btn--single { margin-left: 0 !important; }

/* Contador del menú */
.fxv-fav-count {
  display: inline-grid !important; place-items: center; min-width: 20px; height: 20px; margin: 0 0 0 7px !important; padding: 0 6px !important;
  background: var(--fxv-a) !important; color: #fff !important; font: 700 12px/1 Barlow, sans-serif !important; letter-spacing: 0 !important;
  vertical-align: 1px; position: static !important; border: 0 !important;
}
.fxv-fav-count[hidden] { display: none !important; }

/* ---------- Aviso ---------- */
.fxv-fav-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 100000; display: flex; align-items: center; gap: 18px;
  padding: 14px 20px; background: var(--fxv-ink); color: #fff; font: 500 15px Barlow, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s;
}
.fxv-fav-toast.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.fxv-fav-toast b { color: #ff8a85; font-size: 16px; }
.fxv-fav-toast a { color: #fff !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- Página "Mis favoritos" ---------- */
.fxv-fav { max-width: 1200px; margin: 0 auto 80px; font-family: Barlow, system-ui, sans-serif; color: var(--fxv-ink); }
.fxv-fav * { box-sizing: border-box; }
.fxv-fav-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 0 0 26px; }
.fxv-fav-eyebrow { margin: 0 0 8px !important; padding: 0 !important; font: 600 14px Barlow, sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--fxv-a) !important; }
.fxv-fav-title { margin: 0 !important; padding: 0 !important; font: 800 clamp(40px, 6vw, 56px)/1 'Barlow Condensed', sans-serif !important; text-transform: uppercase !important; letter-spacing: 0 !important; color: var(--fxv-ink) !important; }
.fxv-fav-title small { margin-left: 12px; font: 600 22px Barlow, sans-serif; color: var(--fxv-mut); text-transform: none; }
.fxv-fav-act { display: flex; flex-wrap: wrap; gap: 12px; }

/* Botones */
.fxv-fav .fxv-fav-ob, .fxv-fav .fxv-fav-cta {
  display: inline-flex !important; align-items: center; gap: 14px; height: 52px !important; padding: 0 24px !important; margin: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; cursor: pointer; text-decoration: none !important;
  font: 700 14px/1 Barlow, sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase !important; white-space: nowrap;
}
.fxv-fav .fxv-fav-ob { background: #fff !important; color: var(--fxv-ink) !important; border: 1.5px solid var(--fxv-ink) !important; }
.fxv-fav .fxv-fav-ob:hover { background: var(--fxv-bg) !important; }
.fxv-fav .fxv-fav-cta { background: var(--fxv-a) !important; color: #fff !important; border: 0 !important; }
.fxv-fav .fxv-fav-cta:hover { filter: brightness(.9); }
.fxv-fav button:disabled { opacity: .65; cursor: default; }
.fxv-ar { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Tarjetas */
.fxv-fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.fxv-fav-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fxv-line); transition: opacity .25s, transform .25s; }
.fxv-fav-card.is-leaving { opacity: 0; transform: scale(.96); }
.fxv-fav-img { display: grid; place-items: center; aspect-ratio: 1; padding: 20px; background: #f1eee9; }
.fxv-fav-img > * { max-width: 100%; }
.fxv-fav-img img { max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; object-fit: contain; margin: 0 !important; }
.fxv-fav-btn--remove { position: absolute !important; top: 12px; right: 12px; z-index: 2; }
.fxv-fav-body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 16px 18px 18px; }
.fxv-fav-sku { font: 600 12px Barlow, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--fxv-mut); }
.fxv-fav .fxv-fav-name { margin: 0 0 14px; font: 700 17px/1.25 Barlow, sans-serif; color: var(--fxv-ink) !important; text-decoration: none !important; }
.fxv-fav .fxv-fav-name:hover { color: var(--fxv-a) !important; }
.fxv-fav .fxv-fav-add {
  display: flex !important; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 46px !important; margin: auto 0 0 !important; padding: 0 10px !important;
  background: #fff !important; color: var(--fxv-ink) !important; border: 1.5px solid var(--fxv-ink) !important; border-radius: 0 !important; box-shadow: none !important;
  font: 700 13px/1 Barlow, sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer;
}
.fxv-fav .fxv-fav-add:hover { border-color: var(--fxv-a) !important; color: var(--fxv-a) !important; }
.fxv-fav .fxv-fav-add.is-done { background: var(--fxv-ink) !important; color: #fff !important; }
.fxv-fav .fxv-fav-add.is-done:hover { background: #000 !important; color: #fff !important; border-color: #000 !important; }

/* Barra fija (solo celular) */
.fxv-fav-bar { display: none; }

/* Lista vacía */
.fxv-fav-empty { max-width: 640px; margin: 0 auto; padding: 56px 32px; text-align: center; background: #fff; border: 1px solid var(--fxv-line); border-top: 3px solid var(--fxv-a); }
.fxv-fav-empty-ic { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 20px; background: var(--fxv-bg); border: 1px solid var(--fxv-line); }
.fxv-fav-empty-ic svg { width: 38px; height: 38px; fill: none; stroke: var(--fxv-a); stroke-width: 1.6; }
.fxv-fav-empty h2 { margin: 0 0 8px !important; font: 800 30px/1.1 'Barlow Condensed', sans-serif !important; text-transform: uppercase; color: var(--fxv-ink) !important; }
.fxv-fav-empty p { max-width: 420px; margin: 0 auto 26px !important; font-size: 17px; line-height: 1.5; color: #4d4d4d; }

@media (max-width: 900px) {
  .fxv-long { display: none; }
  .fxv-fav-h { gap: 14px; margin-bottom: 18px; }
  .fxv-fav-title small { font-size: 17px; margin-left: 8px; }
  .fxv-fav-act { width: 100%; }
  .fxv-fav .fxv-fav-ob { flex: 1; justify-content: center; height: 44px !important; font-size: 12px !important; }
  .fxv-fav .fxv-fav-cta--desk { display: none !important; }
  .fxv-fav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fxv-fav-img { padding: 10px; }
  .fxv-fav-btn--remove, .fxv-fav-btn--card { width: 34px !important; height: 34px !important; top: 8px; right: 8px; }
  .fxv-fav-btn--remove svg, .fxv-fav-btn--card svg { width: 16px; height: 16px; }
  .fxv-fav-body { padding: 10px 10px 12px; }
  .fxv-fav .fxv-fav-name { font-size: 14px; margin-bottom: 10px; }
  .fxv-fav .fxv-fav-add { height: 40px !important; font-size: 11px !important; letter-spacing: .08em !important; }
  .fxv-fav-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; padding: 12px 16px 18px; background: #fff; border-top: 1px solid var(--fxv-line); }
  .fxv-fav-bar .fxv-fav-cta { width: 100%; justify-content: space-between; height: 56px !important; }
  body.fxv-fav-has-bar { padding-bottom: 90px; }
  .fxv-fav-empty { padding: 40px 20px; }
  .fxv-fav-empty .fxv-fav-cta { width: 100%; justify-content: space-between; height: 56px !important; }
  .fxv-fav-toast { max-width: calc(100% - 32px); }
  body.fxv-fav-has-bar .fxv-fav-toast { bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) { .fxv-fav-btn, .fxv-fav-card, .fxv-fav-toast { transition: none; } .fxv-fav-btn.is-pop { animation: none; } }

/* ---------- Vista rápida de Salient (1.0.3) ----------
   Título más pequeño, cantidad y corazón en una sola fila del mismo alto,
   y los botones de abajo con la tipografía del sitio. */
.nectar-quick-view-box .summary h1.product_title { font-size: 34px !important; line-height: 1.05 !important; margin-bottom: 16px !important; }
.nectar-quick-view-box form.cart { display: flex !important; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.nectar-quick-view-box form.cart::before,
.nectar-quick-view-box form.cart::after,
.nectar-quick-view-box form.cart .flex-break { display: none !important; } /* el clearfix contaba como elemento y corría la cantidad 12px */
.nectar-quick-view-box form.cart .quantity { margin: 0 !important; height: 48px !important; width: 132px !important; }
.nectar-quick-view-box form.cart .quantity input { height: 100% !important; }
.nectar-quick-view-box form.cart .fxv-fav-btn--single { margin: 0 !important; width: 48px !important; height: 48px !important; }
.nectar-quick-view-box .single_add_to_cart_button,
.nectar-quick-view-box .nectar-full-product-link a { font-family: Barlow, sans-serif !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: .12em !important; text-transform: uppercase !important; }
