/* ==========================================================================
   JAZMART — Estilos personalizados para Martfury + WCFM
   Pegar en: WP Admin → Apariencia → Personalizar → CSS adicional
   ========================================================================== */

/* 1. Fuentes ----------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Inter:wght@400;500;600;700&display=swap');

/* 2. Tokens de color (paleta navy + crema) ---------------------------------*/
:root {
  --jm-bg:        #FAFAF8;
  --jm-card:      #FFFFFF;
  --jm-secondary: #F7EEF2;
  --jm-text:      #2A2A35;
  --jm-muted:     #737380;
  --jm-primary:   #1E2A4A;   /* navy CTA */
  --jm-primary-fg:#FAFAF8;
  --jm-accent:    #E8A87C;   /* terracota — estrellas */
  --jm-success:   #2E8B57;
  --jm-urgent:    #E85D3A;
  --jm-border:    #E5E5EB;

  --jm-font-display: 'Playfair Display', Cormorant Garamond, serif;
  --jm-font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --jm-radius: 12px;
  --jm-radius-pill: 9999px;
  --jm-shadow: 0 10px 30px -10px rgba(30,42,74,0.20);
}

/* 3. Globales --------------------------------------------------------------*/
body,
.martfury-body,
.site-content {
  font-family: var(--jm-font-body) !important;
  color: var(--jm-text) !important;
  background: var(--jm-bg) !important;
}

h1, h2, h3, .product_title, .page-title, .site-title, .widget-title {
  font-family: var(--jm-font-display) !important;
  font-weight: 700 !important;
  color: var(--jm-text) !important;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

a { color: var(--jm-primary); }
a:hover { color: var(--jm-urgent); }

/* 4. Botones (WooCommerce + Martfury) --------------------------------------*/
.button,
.wp-block-button__link,
button.button,
input.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page button.button,
.single_add_to_cart_button,
.checkout-button,
.wc-proceed-to-checkout .button {
  background: var(--jm-primary) !important;
  color: var(--jm-primary-fg) !important;
  border: none !important;
  border-radius: var(--jm-radius-pill) !important;
  padding: 14px 28px !important;
  font-family: var(--jm-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em;
  transition: all .2s ease !important;
  box-shadow: var(--jm-shadow);
}
.button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
  background: #14203A !important;
  transform: translateY(-1px);
}

.button.alt,
.added_to_cart {
  background: var(--jm-urgent) !important;
  color: #fff !important;
}

/* 5. Precios ---------------------------------------------------------------*/
.price,
.woocommerce-Price-amount {
  color: var(--jm-primary) !important;
  font-weight: 700 !important;
  font-family: var(--jm-font-body) !important;
}
.price del .woocommerce-Price-amount {
  color: var(--jm-muted) !important;
  font-weight: 400 !important;
}
.price ins { background: transparent !important; }

/* 6. Cards de producto (loop) ----------------------------------------------*/
ul.products li.product,
.martfury-product-card,
.products .product {
  background: var(--jm-card) !important;
  border-radius: var(--jm-radius) !important;
  overflow: hidden;
  border: 1px solid var(--jm-border);
  transition: all .25s ease;
}
ul.products li.product:hover,
.products .product:hover {
  box-shadow: var(--jm-shadow);
  transform: translateY(-3px);
}

ul.products li.product .woocommerce-loop-product__title,
.products .product h2,
.products .product h3 {
  font-family: var(--jm-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--jm-text) !important;
  line-height: 1.4;
  padding: 0 12px;
}

ul.products li.product .price { padding: 0 12px 12px; }

/* Badges */
.onsale,
span.onsale {
  background: var(--jm-urgent) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-family: var(--jm-font-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
}

/* 7. Estrellas de rating ---------------------------------------------------*/
.star-rating span::before,
.star-rating::before { color: var(--jm-accent) !important; }

/* 8. Página de producto (single) -------------------------------------------*/
.single-product div.product .product_title {
  font-size: clamp(28px, 4vw, 44px) !important;
  margin-bottom: 12px;
}
.single-product div.product .price,
.single-product div.product p.price {
  font-size: 32px !important;
  margin: 16px 0 24px;
}
.single-product .woocommerce-product-gallery__image img {
  border-radius: var(--jm-radius);
}
.single-product .quantity .qty {
  border: 1px solid var(--jm-border);
  border-radius: var(--jm-radius-pill);
  padding: 10px 16px;
  font-family: var(--jm-font-body);
}

/* Trust badges bajo el botón de añadir al carrito */
.single-product form.cart::after {
  content: "✓ Envío gratis +L1,000   ✓ Devoluciones 2 meses   ✓ Pago seguro";
  display: block;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--jm-secondary);
  border-radius: var(--jm-radius);
  font-size: 12px;
  color: var(--jm-text);
  letter-spacing: 0.02em;
}

/* 9. Header ----------------------------------------------------------------*/
.site-header,
.martfury-header {
  background: var(--jm-card) !important;
  border-bottom: 1px solid var(--jm-border);
}
.site-title a,
.site-branding .custom-logo-link {
  font-family: var(--jm-font-display) !important;
  color: var(--jm-primary) !important;
}

/* Top promo bar (si Martfury lo expone) */
.martfury-topbar,
.top-bar {
  background: var(--jm-primary) !important;
  color: var(--jm-primary-fg) !important;
  font-size: 13px;
}
.martfury-topbar a, .top-bar a { color: var(--jm-primary-fg) !important; }

/* 10. Inputs ---------------------------------------------------------------*/
input[type=text], input[type=email], input[type=password],
input[type=search], input[type=tel], input[type=number],
textarea, select {
  border: 1px solid var(--jm-border) !important;
  border-radius: var(--jm-radius-pill) !important;
  padding: 12px 18px !important;
  font-family: var(--jm-font-body) !important;
  background: var(--jm-card) !important;
  transition: border-color .2s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--jm-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(30,42,74,0.10) !important;
}

/* 11. WCFM (tiendas de vendedores) -----------------------------------------*/
.wcfm-store-page-wrap .wcfm_store_info_wrapper,
.wcfmmp-store-header,
#wcfmmp-store .store-info {
  background: var(--jm-card) !important;
  border: 1px solid var(--jm-border);
  border-radius: var(--jm-radius);
}
.wcfmmp-store-header .store-name,
.wcfm_store_info_wrapper h1 {
  font-family: var(--jm-font-display) !important;
  color: var(--jm-text) !important;
}
.wcfm_store_info_wrapper a.wcfm_store_contact_seller,
.wcfmmp_store_follow_button {
  background: var(--jm-primary) !important;
  color: #fff !important;
  border-radius: var(--jm-radius-pill) !important;
  padding: 10px 20px !important;
  border: none !important;
}

/* WCFM Dashboard */
.wcfm-container .wcfm-page-heading,
.wcfm_dashboard h2 {
  font-family: var(--jm-font-display) !important;
}

/* 12. Footer ---------------------------------------------------------------*/
.site-footer,
.martfury-footer {
  background: var(--jm-text) !important;
  color: #FAFAF8 !important;
}
.site-footer a, .martfury-footer a { color: #FAFAF8 !important; opacity: .8; }
.site-footer a:hover { opacity: 1; }
.site-footer h4, .site-footer .widget-title {
  color: #FAFAF8 !important;
  font-family: var(--jm-font-body) !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* 13. WhatsApp flotante (sin plugin) ---------------------------------------*/
.jm-whatsapp-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  width: 56px; height: 56px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .2s;
}
.jm-whatsapp-fab:hover { transform: scale(1.1); color: #fff; }

/* 14. Responsive helpers ---------------------------------------------------*/
@media (max-width: 768px) {
  .single-product div.product .product_title { font-size: 26px !important; }
  .single-product div.product .price { font-size: 26px !important; }
}