@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap");
/* ============================================================
   LAURA MORENO — CUSTOM CSS PARA TEMA CLASSIC DE PRESTASHOP 8
   Versión: v1.2 · 2026-05-15
   Aplica la dirección visual definida en
   02_propuesta_visual_v1.md

   Ruta destino en el servidor:
   /home/lauramor/staging/themes/classic_lauramoreno/assets/css/custom.css

   Activación: se importa automáticamente si se pone como
   "custom.css" en el tema, o se enlaza desde back-office:
   Diseño > Tema y Logo > Configuración avanzada > CSS personalizado
   ============================================================ */

/* ============================================================
   1. VARIABLES (CSS Custom Properties)
   ============================================================ */

:root {
  /* ===== Paleta principal ===== */
  --lm-color-brand: #C8364A;          /* rojo Laura Moreno */
  --lm-color-brand-dark: #A82A3C;     /* rojo hover */
  --lm-color-brand-light: #E66477;    /* rojo claro */

  --lm-color-ink: #1A1A1A;            /* tinta principal */
  --lm-color-ink-medium: #5C5C5C;     /* tinta media */
  --lm-color-ink-light: #9B9B9B;      /* tinta clara */

  --lm-color-bg: #FAFAF7;             /* blanco hueso */
  --lm-color-bg-card: #FFFFFF;        /* blanco puro */
  --lm-color-bg-accent: #F5EFE8;      /* crema acento */

  --lm-color-border: #E8E6E1;         /* borde sutil */

  /* ===== Estados ===== */
  --lm-color-success: #6B8E5A;
  --lm-color-error: #A82A3C;
  --lm-color-warning: #C9A227;
  --lm-color-info: #5B7A99;

  /* ===== Tipografía ===== */
  --lm-font-serif: "Cormorant Garamond", Georgia, serif;
  --lm-font-sans: "Inter", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Helvetica, Arial, sans-serif;

  /* ===== Espaciados ===== */
  --lm-radius: 6px;
  --lm-radius-lg: 12px;
  --lm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --lm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --lm-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);

  --lm-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   2. IMPORT DE FUENTES (Google Fonts)
   ============================================================ */

/* Google Fonts: el @import se ha movido a la primera linea del archivo. */

/* ============================================================
   3. RESET / BASE
   ============================================================ */

body {
  font-family: var(--lm-font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--lm-color-ink);
  background-color: var(--lm-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--lm-font-serif);
  color: var(--lm-color-ink);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

h1, .h1 { font-size: clamp(2rem, 4vw, 3rem); }   /* 32-48px responsive */
h2, .h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3, .h3 { font-size: 1.5rem; }

a {
  color: var(--lm-color-ink);
  text-decoration: none;
  transition: color var(--lm-transition);
}
a:hover {
  color: var(--lm-color-brand);
}

/* ============================================================
   4. TOPBAR (banda fina de USPs)
   ============================================================ */

.lm-topbar {
  background: var(--lm-color-ink);
  color: #fff;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  padding: 8px 0;
  text-align: center;
}
.lm-topbar a { color: #fff; text-decoration: underline; }

/* ============================================================
   5. HEADER
   ============================================================ */

#header {
  background: var(--lm-color-bg-card);
  border-bottom: 1px solid var(--lm-color-border);
  box-shadow: var(--lm-shadow-sm);
}
.header-top {
  padding: 20px 0;
}

/* Logo */
#_desktop_logo img,
.logo {
  max-height: 70px;
  width: auto;
}

/* Menú principal */
.top-menu .top-menu-item a {
  font-family: var(--lm-font-sans);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lm-color-ink);
  padding: 10px 16px;
  position: relative;
  transition: color var(--lm-transition);
}
.top-menu .top-menu-item a:hover {
  color: var(--lm-color-brand);
}
.top-menu .top-menu-item a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--lm-color-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--lm-transition);
}
.top-menu .top-menu-item a:hover::after {
  transform: scaleX(1);
}

/* Icon header acciones (cuenta, carrito) */
.header-top .blockcart .header,
.user-info a {
  color: var(--lm-color-ink);
  font-weight: 500;
}

/* ============================================================
   6. HERO HOMEPAGE (slider o imagen única)
   ============================================================ */

.carousel,
#slick-slider,
.lm-hero {
  position: relative;
  margin: 0 0 60px 0;
}
.carousel .carousel-item,
.lm-hero-image {
  min-height: 70vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-caption,
.lm-hero-caption {
  color: #fff;
  text-align: center;
  background: transparent;
  position: relative;
}
.carousel-caption h1,
.lm-hero-caption h1 {
  font-family: var(--lm-font-serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
  color: #fff;
  margin-bottom: 12px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.carousel-caption p,
.lm-hero-caption p {
  font-size: 1.125rem;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

/* ============================================================
   7. BOTONES (CTA)
   ============================================================ */

.btn,
.btn-primary,
.btn-default {
  font-family: var(--lm-font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--lm-radius);
  border: 1px solid transparent;
  transition: all var(--lm-transition);
  cursor: pointer;
}

.btn-primary {
  background-color: var(--lm-color-brand);
  color: #fff;
  border-color: var(--lm-color-brand);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--lm-color-brand-dark);
  border-color: var(--lm-color-brand-dark);
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--lm-color-ink);
  border-color: var(--lm-color-ink);
}
.btn-outline:hover {
  background-color: var(--lm-color-ink);
  color: #fff;
}

/* Botón añadir al carrito en ficha producto */
.add-to-cart {
  width: 100%;
  background-color: var(--lm-color-brand);
  color: #fff;
  padding: 16px;
  font-size: 0.9375rem;
}

/* ============================================================
   8. CARDS DE PRODUCTO
   ============================================================ */

.product-miniature,
.js-product-miniature {
  background-color: var(--lm-color-bg-card);
  border-radius: var(--lm-radius);
  overflow: hidden;
  transition: transform var(--lm-transition), box-shadow var(--lm-transition);
}
.product-miniature:hover {
  transform: translateY(-4px);
  box-shadow: var(--lm-shadow-md);
}

.product-miniature .product-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 600ms ease;
}
.product-miniature:hover .product-thumbnail img {
  transform: scale(1.03);
}

.product-miniature .product-title,
.product-miniature h2 a,
.product-miniature h3 a {
  font-family: var(--lm-font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--lm-color-ink);
  text-transform: none;
  letter-spacing: 0;
  margin: 12px 0 4px 0;
  display: block;
}

.product-miniature .price {
  font-family: var(--lm-font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--lm-color-ink);
  letter-spacing: 0;
}
.product-miniature .regular-price {
  font-size: 0.875rem;
  color: var(--lm-color-ink-light);
  text-decoration: line-through;
  margin-right: 8px;
  font-weight: 400;
}
.product-miniature .discount,
.product-miniature .discount-percentage {
  background-color: var(--lm-color-brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--lm-radius);
}

/* Badges sobre la imagen */
.product-flags {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-flag {
  background: var(--lm-color-ink);
  color: #fff;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--lm-radius);
}
.product-flag.on-sale,
.product-flag.discount {
  background: var(--lm-color-brand);
}
.product-flag.new {
  background: var(--lm-color-ink);
}

/* ============================================================
   9. PÁGINA DE PRODUCTO (FICHA)
   ============================================================ */

#product .product-cover img,
.product-cover img {
  border-radius: var(--lm-radius);
  width: 100%;
}

#product h1.h1,
.product__product-name {
  font-family: var(--lm-font-serif);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
  margin-bottom: 8px;
}

.product-prices .current-price,
.product-price {
  font-family: var(--lm-font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--lm-color-brand);
}
.product-discount {
  font-size: 1rem;
  color: var(--lm-color-ink-light);
  text-decoration: line-through;
}

/* Atributos (tallas, colores) */
.product-variants-item {
  margin-bottom: 24px;
}
.product-variants-item .control-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: block;
  color: var(--lm-color-ink-medium);
}

/* Tallas como chips */
.product-variants-item ul li {
  display: inline-block;
  margin: 0 4px 4px 0;
}
.product-variants-item ul li a,
.product-variants-item ul li label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--lm-color-border);
  border-radius: var(--lm-radius);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--lm-transition);
  background: var(--lm-color-bg-card);
}
.product-variants-item ul li a:hover,
.product-variants-item ul li.selected a,
.product-variants-item ul li label:hover,
.product-variants-item ul li input:checked + label {
  border-color: var(--lm-color-ink);
  background: var(--lm-color-ink);
  color: #fff;
}

/* Colores como discos */
.product-variants-item .color {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--lm-color-border);
  cursor: pointer;
}
.product-variants-item .color.active {
  border-color: var(--lm-color-ink);
  box-shadow: 0 0 0 2px var(--lm-color-bg-card), 0 0 0 4px var(--lm-color-ink);
}

/* ============================================================
   10. SECCIONES DE HOME — bloques editoriales
   ============================================================ */

.lm-section {
  padding: 80px 0;
}
.lm-section--accent {
  background-color: var(--lm-color-bg-accent);
}
.lm-section-title {
  text-align: center;
  margin-bottom: 48px;
}
.lm-section-title h2 {
  font-family: var(--lm-font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  margin-bottom: 8px;
}
.lm-section-title h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--lm-color-brand);
  margin: 16px auto 0;
}
.lm-section-title p {
  color: var(--lm-color-ink-medium);
  font-size: 1rem;
}

/* Cards de categoría */
.lm-category-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--lm-radius);
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  transition: transform var(--lm-transition);
}
.lm-category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lm-shadow-md);
}
.lm-category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(0,0,0,0) 50%,
              rgba(0,0,0,0.5) 100%);
}
.lm-category-card-content {
  position: relative;
  color: #fff;
  z-index: 1;
}
.lm-category-card-content h3 {
  color: #fff;
  font-family: var(--lm-font-serif);
  font-size: 1.75rem;
  margin: 0;
}

/* ============================================================
   11. BLOQUE DE CONFIANZA (USPs)
   ============================================================ */

.lm-trust-block {
  padding: 48px 0;
  background: var(--lm-color-bg-card);
  border-top: 1px solid var(--lm-color-border);
  border-bottom: 1px solid var(--lm-color-border);
}
.lm-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
@media (max-width: 768px) {
  .lm-trust-grid { grid-template-columns: repeat(2, 1fr); }
}
.lm-trust-item svg,
.lm-trust-item img {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  color: var(--lm-color-ink);
}
.lm-trust-item h4 {
  font-family: var(--lm-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.lm-trust-item p {
  font-size: 0.8125rem;
  color: var(--lm-color-ink-medium);
  margin: 0;
}

/* ============================================================
   12. NEWSLETTER
   ============================================================ */

.block_newsletter,
.lm-newsletter {
  background-color: var(--lm-color-bg-accent);
  padding: 80px 0;
  text-align: center;
}
.block_newsletter h2,
.lm-newsletter h2 {
  font-family: var(--lm-font-serif);
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 12px;
}
.block_newsletter input[type="email"] {
  background: #fff;
  border: 1px solid var(--lm-color-border);
  border-radius: var(--lm-radius);
  padding: 14px 18px;
  font-size: 1rem;
  min-width: 320px;
  margin-right: 8px;
}
.block_newsletter button[type="submit"] {
  background: var(--lm-color-ink);
  color: #fff;
  border-radius: var(--lm-radius);
  padding: 14px 24px;
}
.block_newsletter button[type="submit"]:hover {
  background: var(--lm-color-brand);
}

/* ============================================================
   13. FOOTER
   ============================================================ */

#footer {
  background-color: var(--lm-color-bg-card);
  border-top: 1px solid var(--lm-color-border);
  padding: 60px 0 0;
  color: var(--lm-color-ink-medium);
}
#footer h3,
#footer .h3 {
  font-family: var(--lm-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lm-color-ink);
  margin-bottom: 20px;
}
#footer ul {
  list-style: none;
  padding: 0;
}
#footer ul li {
  margin-bottom: 8px;
}
#footer ul li a {
  color: var(--lm-color-ink-medium);
  font-size: 0.875rem;
  transition: color var(--lm-transition);
}
#footer ul li a:hover {
  color: var(--lm-color-brand);
}

.footer-bottom,
.lm-footer-legal {
  margin-top: 40px;
  padding: 24px 0;
  border-top: 1px solid var(--lm-color-border);
  font-size: 0.8125rem;
  color: var(--lm-color-ink-light);
  text-align: center;
}

/* ============================================================
   14. RESPONSIVE — ajustes mobile-first
   ============================================================ */

@media (max-width: 768px) {
  .lm-section { padding: 48px 0; }
  .header-top { padding: 12px 0; }
  #_desktop_logo img,
  .logo { max-height: 50px; }
  .carousel .carousel-item,
  .lm-hero-image { min-height: 55vh; }

  /* Productos: 2 columnas en móvil (PS Classic suele dar 1) */
  #products .product-miniature,
  .featured-products .product-miniature {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ============================================================
   15. UTILS
   ============================================================ */

.text-brand { color: var(--lm-color-brand) !important; }
.bg-accent  { background-color: var(--lm-color-bg-accent) !important; }
.mt-section { margin-top: 80px; }
.mb-section { margin-bottom: 80px; }

/* ============================================================
   16. PRINT — facturas
   ============================================================ */

@media print {
  body {
    background: #fff;
    color: #000;
    font-family: Arial, sans-serif;
  }
  .no-print { display: none !important; }
}

/* ============================================================
   17. CHECKOUT + PASARELA DE PAGO — DEFENSIVO
   Estas reglas evitan que los estilos anteriores rompan
   el flujo de carrito/checkout/Redsys. Cualquier modificación
   aquí requiere prueba de compra completa con tarjeta test.
   ============================================================ */

/* Carrito (página de carrito) — mantenemos layout original del tema */
#cart .cart-grid,
#cart .cart-summary,
#cart .product-line-info,
#cart .product-quantity {
  font-family: var(--lm-font-sans);
  color: var(--lm-color-ink);
}

/* Checkout (página de pago) — no modificamos estructura, solo tipografía */
#checkout #wrapper,
#checkout .checkout-step,
#checkout .step-title,
#checkout .step-edit {
  font-family: var(--lm-font-sans);
  color: var(--lm-color-ink);
}

#checkout .step-title {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Bloques de pasos: bordes sutiles, no romper layout */
#checkout .checkout-step {
  background: var(--lm-color-bg-card);
  border: 1px solid var(--lm-color-border);
  border-radius: var(--lm-radius);
  margin-bottom: 16px;
}

/* Opciones de pago — IMPORTANTE: no tocar el iframe ni el form de Redsys */
.payment-options {
  /* Mantener layout vertical por defecto */
}
.payment-option {
  padding: 12px 0;
  border-bottom: 1px solid var(--lm-color-border);
}
.payment-option:last-child {
  border-bottom: none;
}

/* Botón final de "Realizar pedido" — usar color marca */
#payment-confirmation .btn-primary,
#payment-confirmation button[type="submit"] {
  background-color: var(--lm-color-brand);
  border-color: var(--lm-color-brand);
  color: #fff;
  padding: 16px 32px;
  font-size: 1rem;
  width: 100%;
}
#payment-confirmation .btn-primary:hover,
#payment-confirmation button[type="submit"]:hover {
  background-color: var(--lm-color-brand-dark);
  border-color: var(--lm-color-brand-dark);
}

/* Iframe de Redsys (cuando aparece embebido si se usa inSite) — NO TOCAR */
iframe[src*="redsys"],
iframe[src*="sis-t.redsys"],
iframe[src*="canales.redsys"] {
  /* Sin reglas. Apariencia controlada por Redsys. */
  border: none;
  background: transparent;
  width: 100%;
}

/* Página de confirmación de pedido — destacar éxito */
#order-confirmation .card,
.order-confirmation-title {
  font-family: var(--lm-font-serif);
}
#order-confirmation .alert-success {
  background-color: rgba(107, 142, 90, 0.1);
  border-color: var(--lm-color-success);
  color: var(--lm-color-ink);
}


/* ============================================================
   18. CAPA DE ALTA VISIBILIDAD - v1.2 (2026-05-22)
   Refuerza el cambio de marca con !important SOLO sobre
   propiedades cosmeticas (color, tipografia, fondo, borde,
   radius). No toca display/position/width/flex -> no afecta
   a la estructura ni a la logica de carrito/checkout.
   ============================================================ */

body { background-color: #FAFAF7 !important; }

body, p, li, td, input, select, textarea,
.product-miniature, #footer, .block_newsletter {
  font-family: "Inter", -apple-system, "Segoe UI", Arial, sans-serif !important;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.page-header h1, .featured-products .h2, .products-section-title {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  letter-spacing: 0.01em !important;
}

/* Header: banda superior de marca + sombra */
#header {
  background-color: #FFFFFF !important;
  border-top: 4px solid #C8364A !important;
  border-bottom: 1px solid #E8E6E1 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* Menu principal */
#header .top-menu a, #_desktop_top_menu a, .top-menu .top-menu-item a {
  color: #1A1A1A !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 500 !important;
}
#header .top-menu a:hover, #_desktop_top_menu a:hover,
.top-menu .top-menu-item a:hover { color: #C8364A !important; }

/* Botones primarios -> rojo marca */
.btn-primary, button.btn-primary, input[type="submit"].btn-primary,
.add-to-cart, #search_widget form button[type="submit"] {
  background-color: #C8364A !important;
  border-color: #C8364A !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
}
.btn-primary:hover, .add-to-cart:hover {
  background-color: #A82A3C !important; border-color: #A82A3C !important;
}

/* Newsletter (boton azul de suscripcion) */
.block_newsletter { background-color: #F5EFE8 !important; }
.block_newsletter button, .block_newsletter input[type="submit"],
.block_newsletter .btn {
  background-color: #C8364A !important;
  border-color: #C8364A !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
}

/* Cards de producto */
.product-miniature, .js-product-miniature {
  background-color: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-radius: 6px !important;
}
.product-miniature .price, .product-price {
  color: #C8364A !important; font-weight: 600 !important;
}

/* Footer */
#footer { background-color: #FFFFFF !important; border-top: 1px solid #E8E6E1 !important; }
#footer a:hover { color: #C8364A !important; }

a:hover { color: #C8364A !important; }