/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap'); */

/* ===================================================== MEGAREP – CUSTOM.CSS FINAL (IMAGEN MI CUENTA) ===================================================== */ /* ===================================================== SUBCATEGORÍAS / GRILLAS ===================================================== */ #subcategories li, #subcategories .subcategory-item { display: flex; } #subcategories li a, #subcategories .subcategory-item a { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } #subcategories li img { max-height: 140px; object-fit: contain; } #subcategories .subcategory-name, #subcategories h2 { min-height: 48px; max-height: 48px; line-height: 1.2em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ===================================================== LOGOS EN TARJETAS DE PRODUCTO ===================================================== */ .manufacturer-logo { text-align: center; min-height: 28px; } .manufacturer-logo img, .product-miniature .brand_image img { max-height: 22px !important; width: auto !important; object-fit: contain !important; display: block; margin: 4px auto; } /* ===================================================== HEADER – RESET CONTROLADO ===================================================== */ .header-container .block.ApImage, .header-container .ApColumn { margin: 0 !important; padding: 0 !important; } .header-container #displayBanner, .header-container .displaybanner, .header-container .ApRow.displayBanner { display: none !important; } /* ===================================================== LOGO HEADER ===================================================== */ .header-logo { display: flex; align-items: center; } .header-logo img { max-height: 110px; width: auto; } @media (max-width: 768px) { .header-logo img { max-height: 42px; margin: 0 auto; } } @media (min-width: 992px) { .header-container .block.ApImage { margin-left: 20px !important; } } /* ===================================================== BUSCADOR HEADER – DISEÑO PREMIUM ===================================================== */ .megarep-search { display: flex; align-items: center; width: 520px; max-width: 520px; flex: 0 0 520px; height: 58px; margin-right: 24px; background: linear-gradient(180deg,#ffffff,#fafafa); border-radius: 999px; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 30px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.85); } .megarep-search:hover { box-shadow:0 12px 36px rgba(0,0,0,.14); } .megarep-search:focus-within { border-color:#caa24d; box-shadow: 0 16px 42px rgba(202,162,77,.35), inset 0 1px 0 rgba(255,255,255,.9); transform:translateY(-1px); } .megarep-search-input { position: relative; flex: 0 0 420px; max-width: 420px; height: 100%; overflow: hidden; display: flex; align-items: center; } .megarep-search-input input { position: relative; z-index: 2; width: 100%; height: 100%; border: 0; background: transparent; padding: 0 26px; font-size: 17px; color: #222; outline: none; line-height: 1; } .search-placeholder { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); white-space: nowrap; font-size: 17px; color: #9a9a9a; font-weight: 300; pointer-events: none; animation: placeholder-marquee 14s linear infinite; } @keyframes placeholder-marquee { 0% { left: 100%; } 100% { left: -100%; } } .megarep-search-input:has(input:focus) .search-placeholder, .megarep-search-input:has(input:not(:placeholder-shown)) .search-placeholder { opacity: 0; animation-play-state: paused; } .megarep-search button { width: 46px; height: 46px; margin-right: 6px; border-radius: 50%; border: 0; background: linear-gradient(135deg,#fff200,#ffd000); color: #222; font-size: 18px; cursor: pointer; box-shadow: 0 6px 18px rgba(255,210,0,.75); } /* ===================================================== WHATSAPP HEADER ===================================================== */ @media (min-width: 992px) { .megarep-whatsapp { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .megarep-whatsapp-top { display:flex; align-items:center; gap:10px; margin-bottom:4px; } .megarep-whatsapp-icon { width:30px; height:30px; background:url("https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg") center/contain no-repeat; } .megarep-whatsapp-label { font-size:17px; font-weight:700; color:#25D366; } .megarep-whatsapp-number { font-size:18px; font-weight:700; color:#1f1f1f; } } /* ===================================================== MI CUENTA – ICONO COMO IMAGEN REAL ===================================================== */ .megarep-account { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* ✅ clave */ cursor: pointer; gap: 4px; } /* ========================================= TEXTO "MI CUENTA" ========================================= */ .megarep-account-label { font-size: 12px; font-weight: 700; color: #1f1f1f; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1; transition: all .25s ease; /* ✨ animación */ } .megarep-account:hover .megarep-account-label { color: #1f9d55; /* verde elegante */ transform: translateY(-2px); /* sube levemente */ } /* mismo texto dentro del popup */ .megarep-popup-account .megarep-account-label { font-size: 13px; margin-bottom: 6px; } .megarep-account-img { width: 58px; height: 58px; object-fit: contain; /* efecto premium */ filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; } .megarep-account-img:hover { transform: scale(1.08); filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)) brightness(1.05); } .megarep-account-img:hover { transform:scale(1.08); } /* popup usa la misma imagen */ .megarep-popup-img { display:block; margin:0 auto 18px; width:72px; height:72px; } /* ===================================================== POPUP LOGIN ===================================================== */ .megarep-login-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:999999; } .megarep-login-modal { background:#fff; padding:28px 32px; width:100%; max-width:520px; /* ⬅ más ancho */ border-radius:18px; text-align:center; position:relative; box-shadow:0 25px 60px rgba(0,0,0,.35); } .megarep-login-title { font-size:22px; font-weight:800; margin-bottom:8px; } .megarep-login-text { font-size:14px; color:#666; margin-bottom:20px; } .megarep-login-btn { display:block; padding:14px; background:linear-gradient(135deg,#fff200,#ffd000); color:#000; font-weight:700; border-radius:999px; text-decoration:none; } .megarep-login-close { position:absolute; top:10px; right:14px; font-size:22px; cursor:pointer; color:#999; } /* ===================================================== BUSCADOR – DROPDOWN SUGERENCIAS (FIX VISIBILIDAD) ===================================================== */ .megarep-search-suggestions-floating { background: #ffffff; /* fondo sólido */ border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,.35); max-height: 420px; overflow-y: auto; z-index: 999999; } /* cada item */ .megarep-search-item { display: flex; gap: 12px; padding: 12px; background: #ffffff; color: #111; text-decoration: none; border-bottom: 1px solid #eee; } /* hover */ .megarep-search-item:hover { background: #f7f7f7; } /* nombre producto */ .megarep-search-item div { color: #111; } /* precio */ .megarep-search-item div:last-child { color: #000; font-weight: 700; } /* palabra resaltada */ .megarep-search-suggestions-floating mark { background: #ffe066; color: #000; padding: 0 2px; border-radius: 3px; } /* ========================================= ESTADO LOGIN – TEXTO DINÁMICO ========================================= */ /* cuando el usuario esté logueado */ body.is-logged .megarep-account-label { content: "MI PERFIL"; color: #0f7a3a; } /* refuerzo visual */ body.is-logged .megarep-account-img { filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)) brightness(1.1); } /* ===================================================== CARRITO – AJUSTES ESPECÍFICOS (CLON MI CUENTA) ===================================================== */ /* asegura mismo comportamiento hover al pasar por todo el bloque */ .megarep-cart:hover .megarep-account-img { transform: scale(1.08); filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)) brightness(1.05); } /* texto carrito: mismo efecto que Mi Cuenta */ .megarep-cart:hover .megarep-account-label { color: #1f9d55; transform: translateY(-2px); } /* popup carrito: mantiene jerarquía visual */ .megarep-cart.megarep-popup-account .megarep-account-img { width: 72px; height: 72px; } /* espacio consistente en popup */ #megarepCartPopup .megarep-login-text { margin-bottom: 22px; } /* ===================================================== CARRITO – CONTADOR FLOTANTE (POSICIÓN CORRECTA) ===================================================== */ .megarep-cart { position: relative; } /* anclamos el badge a la imagen */ .megarep-cart .megarep-account-img { position: relative; } .megarep-cart-count { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; background: linear-gradient(135deg, #ff3b3b, #e60023); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,.35); border: 2px solid #fff; opacity: 0; transform: scale(0.6); transition: all .25s ease; pointer-events: none; } /* visible solo cuando hay productos */ .megarep-cart-count.is-visible { opacity: 1; transform: scale(1); } /* ===================================================== FIX DEFINITIVO – CONTADOR SOBRE ICONO CARRITO ===================================================== */ /* el contenedor del icono debe ser el ancla REAL */ .megarep-cart-icon { position: relative !important; display: inline-flex; align-items: center; justify-content: center; /* forzamos que mida lo mismo que la imagen */ width: 58px; height: 58px; } /* la imagen no debe afectar el flujo */ .megarep-cart-icon .megarep-account-img { position: relative; z-index: 1; } /* badge */ .megarep-cart-count { position: absolute !important; /* esquina superior derecha del icono */ top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; background: #e60023; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6); transition: all .25s ease; pointer-events: none; z-index: 2; } .megarep-cart-count.is-visible { opacity: 1; transform: scale(1); } /* ===================================================== MINI CARRITO PREMIUM – POPUP CARRITO ===================================================== */ .premium-mini-cart { margin-top: 12px; text-align: left; display: flex; flex-direction: column; gap: 14px; } /* ========================= HEADER MINI CARRITO ========================= */ .pmc-header { font-size: 13px; font-weight: 700; color: #444; padding-bottom: 6px; border-bottom: 1px solid #eee; } .pmc-count-number { font-weight: 800; color: #000; } /* ========================= LISTA PRODUCTOS ========================= */ .pmc-products { display: flex; flex-direction: column; gap: 12px; max-height: 260px; overflow-y: auto; padding-right: 4px; } /* scrollbar fino */ .pmc-products::-webkit-scrollbar { width: 6px; } .pmc-products::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 10px; } /* ========================= ITEM ========================= */ .pmc-item { display: flex; align-items: center; gap: 10px; background: #fafafa; border-radius: 12px; padding: 10px; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); } /* imagen */ .pmc-item-image { width: 54px; height: 54px; flex-shrink: 0; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pmc-item-image img { max-width: 100%; max-height: 100%; object-fit: contain; } /* info */ .pmc-item-info { flex: 1; display: flex; flex-direction: column; gap: 4px; } .pmc-item-name { font-size: 13px; font-weight: 700; color: #111; line-height: 1.2; } .pmc-item-attrs { font-size: 12px; color: #777; } /* meta */ .pmc-item-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .pmc-item-qty { color: #555; } .pmc-item-price { font-weight: 800; color: #000; } /* eliminar */ .pmc-item-remove { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #fff; color: #999; font-size: 16px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: all .2s ease; } .pmc-item-remove:hover { background: #e60023; color: #fff; } /* ========================= FOOTER ========================= */ .pmc-footer { border-top: 1px solid #eee; padding-top: 10px; display: flex; flex-direction: column; gap: 12px; } .pmc-subtotal { display: flex; justify-content: space-between; font-size: 14px; } .pmc-subtotal-value { font-weight: 900; color: #000; } /* ========================= BOTONES ========================= */ .pmc-actions { display: flex; gap: 10px; } .pmc-btn { flex: 1; padding: 12px 0; text-align: center; font-size: 13px; font-weight: 800; border-radius: 999px; text-decoration: none; transition: all .25s ease; } /* ver carrito */ .pmc-btn-secondary { background: #f3f3f3; color: #000; } .pmc-btn-secondary:hover { background: #e5e5e5; } /* checkout */ .pmc-btn-primary { background: linear-gradient(135deg,#fff200,#ffd000); color: #000; box-shadow: 0 6px 18px rgba(255,210,0,.6); } .pmc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,210,0,.75); } /* ========================= ESTADO CARRITO VACÍO ========================= */ .premium-mini-cart.is-empty .pmc-products { display: none; } .premium-mini-cart.is-empty::after { content: "Tu carrito está vacío"; text-align: center; font-size: 14px; color: #777; padding: 24px 0; } /* ===================================================== FIX TEXTO NOMBRE PRODUCTO – MINI CARRITO ===================================================== */ .premium-mini-cart .pmc-item-name { white-space: normal !important; /* permite varias líneas */ overflow: visible !important; /* no corta */ text-overflow: unset !important; /* elimina "..." */ word-break: break-word; /* rompe palabras largas */ line-height: 1.3; max-width: 100%; } /* por si el contenedor también limita */ .premium-mini-cart .pmc-item-info { overflow: visible !important; } /* seguridad extra si el theme usa clamp */ .premium-mini-cart .pmc-item-name { display: block !important; -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important; } /* ===================================================== FIX DEFINITIVO – ALTURA TEXTO MINI CARRITO ===================================================== */ .premium-mini-cart .pmc-item-name { height: auto !important; min-height: unset !important; max-height: none !important; line-height: 1.35 !important; padding: 0 !important; margin: 0 !important; display: block !important; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; } /* el contenedor también debe poder crecer */ .premium-mini-cart .pmc-item-info { height: auto !important; max-height: none !important; overflow: visible !important; } /* ===================================================== POPUP CARRITO – OCULTAR TEXTO "CARRITO" SUPERIOR ===================================================== */ /* solo en el popup, no en el header */ #megarepCartPopup .megarep-account-label { display: none !important; } /* ===================================================== POPUP MI CUENTA – OCULTAR TEXTO "MI CUENTA" SUPERIOR ===================================================== */ /* solo en el popup de login, no en el header */ #megarepLoginPopup .megarep-account-label { display: none !important; } /* HEADER – ACCIONES DERECHA */ .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .header-action-item { display: flex; align-items: center; } /* ========================================= AJUSTE FINAL VISUAL – CARRITO HEADER ========================================= */ #megarepCartBtn { transform: translateY(4px); /* ⬅ AJUSTE VISUAL REAL */ } /* ========================================= FECHA & HORA – HEADER (DISEÑO PREMIUM DEFINITIVO) ========================================= */ .megarep-datetime { display: flex; flex-direction: column; justify-content: center; gap: 2px; margin-left: 12px; padding: 6px 10px; font-family: Rubik, sans-serif; text-align: left; background: linear-gradient(180deg, #ffffff, #f7f7f7); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 14px rgba(0,0,0,.12); /* 🔑 centrado real respecto a los iconos */ transform: translateY(0); transition: all .25s ease; } /* filas */ .megarep-datetime > div { display: flex; align-items: center; gap: 6px; } /* FECHA */ .megarep-date { font-size: 11px; font-weight: 700; color: #777; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; } /* HORA */ .megarep-time { font-size: 18px; font-weight: 900; color: #111; letter-spacing: 1px; line-height: 1; } /* hover premium */ .megarep-datetime:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(0,0,0,.18); } /* ========================================= FIX WHATSAPP – NO PARTIR NÚMERO ========================================= */ .megarep-whatsapp-number { white-space: nowrap; } /* ===================================================== FIX DEFINITIVO – BUSCADOR HEADER REAL (NO APBUILDER) ===================================================== */ /* limitamos el ancho real del buscador del header */ .header-nav .megarep-search, #header .megarep-search { max-width: 460px !important; width: 460px !important; } /* aseguramos que no se pegue a los iconos */ .header-nav .megarep-search { margin-right: 32px !important; } /* ===================================================== FIX FINAL – BOTÓN LUPA BUSCADOR (CENTRADO PERFECTO) ===================================================== */ /* el buscador pasa a ser referencia */ .header-nav .megarep-search, #header .megarep-search { position: relative; } /* fijamos la lupa al extremo derecho */ .header-nav .megarep-search button, #header .megarep-search button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0; }

/* =====================================================
   BANNER ANIMADO DISPLAYNAV2 – RECORRIDO COMPLETO
   ===================================================== */

.megarep-banner-wrapper {
  position: relative;
  width: 100%;
  max-width: 420px;      /* espacio real hasta el reloj */
  height: 40px;
  overflow: hidden;
  margin-left: 16px;
}

/* banner */
.megarep-banner {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  animation: megarep-slide-full 6s linear infinite;
  white-space: nowrap;
}

/* imagen */
.megarep-banner img {
  height: 32px;
  width: auto;
  display: block;
}

/* animación: entra derecha → sale izquierda */
@keyframes megarep-slide-full {
  0% {
    transform: translate(0, -50%);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    transform: translate(-140%, -50%);
    opacity: 0;
  }
}

/* ocultar en mobile */
@media (max-width: 768px) {
  .megarep-banner-wrapper {
    display: none;
  }
}

/* =====================================================
   BANNER OVERLAY HEADER – RECORRIDO COMPLETO
   ===================================================== */

/* header como referencia */
#header,
.header-container {
  position: relative;
}

/* overlay */
#megarep-banner-overlay {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  white-space: nowrap;
  animation: megarep-overlay-slide 6s linear infinite;
  z-index: 5;
}

/* imagen */
#megarep-banner-overlay img {
  height: 32px;
  width: auto;
  display: block;
}

/* animación completa: derecha → reloj */
@keyframes megarep-overlay-slide {
  0% {
    transform: translate(100%, -50%);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    transform: translate(-110vw, -50%);
    opacity: 0;
  }
}

/* ocultar en mobile */
@media (max-width: 768px) {
  #megarep-banner-overlay {
    display: none;
  }
}

/* =====================================================
   BANNER LIMITADO ENTRE RELOJ Y BORDE DERECHO
   ===================================================== */

/* referencia del header */
#header,
.header-container {
  position: relative;
}

/* ZONA DEL BANNER (escenario) */
#megarep-banner-zone {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 220px;          /* 🔑 espacio entre reloj y borde */
  height: 40px;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

/* elemento animado */
#megarep-banner-zone .megarep-banner {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  animation: megarep-zone-slide 4s linear infinite;
  white-space: nowrap;
}

/* imagen */
#megarep-banner-zone img {
  height: 50px;
  width: auto;
  display: block;
}

/* animación SOLO dentro del carril */
@keyframes megarep-zone-slide {
  0% {
    transform: translate(0, -50%);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    transform: translate(-105%, -50%);
    opacity: 0;
  }
}

/* ocultar en mobile */
@media (max-width: 768px) {
  #megarep-banner-zone {
    display: none;
  }
}

/* =====================================================
   BANDERA CHILENA – OVERLAY REAL EN AP BUILDER
   ===================================================== */

/* 1️⃣ anulamos la columna que contiene el HTML */
.ApColumn:has(#megarep-flag-overlay) {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 0 !important;
  overflow: visible !important;
}

/* 2️⃣ referencia segura */
#header,
.header-container,
.header-nav {
  position: relative;
}

/* 3️⃣ bandera flotante */
#megarep-flag-overlay {
  position: absolute;
  top: 24px;          /* 🔑 CONTROLA LA ALTURA AQUÍ */
  left: 164px;
  transform: none;    /* 🔑 quitamos el -50% */
  pointer-events: none;
  z-index: 10;
}

/* imagen + animación */
#megarep-flag-overlay img {
  height: 60px;
  width: auto;
  display: block;
  transform-origin: left center;
  animation: megarep-flag-wave 3.5s ease-in-out infinite;
}

/* animación flameo */
@keyframes megarep-flag-wave {
  0%   { transform: perspective(600px) rotateY(0deg); }
  25%  { transform: perspective(600px) rotateY(-14deg); }
  50%  { transform: perspective(600px) rotateY(0deg); }
  75%  { transform: perspective(600px) rotateY(12deg); }
  100% { transform: perspective(600px) rotateY(0deg); }
}

/* ocultar en mobile */
@media (max-width: 768px) {
  #megarep-flag-overlay {
    display: none;
  }
}

/* =====================================================
   DISPLAYNAV2 – BLANCO PERLADO + DORADO ELEGANTE
   ===================================================== */

nav.header-nav .bottomnav .inner .row.ApRow.has-bg.bg-boxed {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent !important;
}

/* FONDO BLANCO PERLADO CON BRILLOS */
nav.header-nav .bottomnav .inner .row.ApRow.has-bg.bg-boxed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;

  background:
    radial-gradient(120% 120% at 12% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 38%),
    radial-gradient(140% 120% at 90% 100%, rgba(230,235,245,.85), transparent 42%),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f4f5f7 25%,
      #e9ecf1 50%,
      #f6f7f9 75%,
      #ffffff 100%
    );
}

/* LÍNEAS DORADAS CRUZADAS – DEFINIDAS Y VISIBLES */
nav.header-nav .bottomnav .inner .row.ApRow.has-bg.bg-boxed::after {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;

  background:
    linear-gradient(
      120deg,
      transparent 36%,
      rgba(190,150,60,.35) 44%,
      rgba(255,215,140,.9) 50%,
      rgba(190,150,60,.35) 56%,
      transparent 64%
    ),
    linear-gradient(
      -120deg,
      transparent 38%,
      rgba(190,150,60,.25) 46%,
      rgba(255,215,160,.65) 50%,
      rgba(190,150,60,.25) 54%,
      transparent 62%
    );

  opacity: 0.9;
  filter: blur(0.25px);
  pointer-events: none;
}

/* CONTENIDO ARRIBA */
nav.header-nav .bottomnav .inner .row.ApRow.has-bg.bg-boxed > * {
  position: relative;
  z-index: 1;
}

/* TEXTO E ICONOS – CONTRASTE PREMIUM */
nav.header-nav {
  color: #1a1a1a;
}

nav.header-nav img,
nav.header-nav svg {
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.25))
    drop-shadow(0 0 8px rgba(255,215,140,.35));
}

/* =====================================================
   FIX OVERLAY – NO OSCURECER DISPLAYNAV2
   ===================================================== */

/* cuando un popup está activo */
body.modal-open nav.header-nav,
body.modal-open #header,
body.modal-open .header-container {
  filter: none !important;
  opacity: 1 !important;
}

/* el overlay no debe cubrir el header */
.megarep-login-overlay {
  top: calc(var(--header-height, 120px)) !important;
}

/* alternativa más segura: overlay solo bajo el header */
body.modal-open .megarep-login-overlay {
  pointer-events: auto;
}

/* aseguramos que el header quede por encima */
#header,
nav.header-nav {
  position: relative;
  z-index: 100000 !important;
}

/* SELECTS */
#home-vehicle-filter select {
  height: 58px;
  border-radius: 32px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 500;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

/* =========================================================
   HERO – CENTRAR TÍTULO PRINCIPAL
   ========================================================= */

/* contenedor del título */
#home-vehicle-filter .title-ap-group {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* texto del título */
#home-vehicle-filter .title-ap-group {
  display: block;
}

/* =========================================================
   BARRA FLOTANTE SECUNDARIA – DEFINITIVA LIMPIA
   ========================================================= */

.floating-nav-wrapper {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 90;
  margin-top: 0;
  margin-bottom: 0;
}

.floating-nav {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 42px;
  padding: 10px 30px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

.floating-nav-menu {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.floating-nav-menu li a {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  color: #1f1f1f;
  padding: 4px 6px;
  position: relative;
  transition: all 0.3s ease;
}

/* hover premium */
.floating-nav-menu li a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #ffb400, #ff8a00);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.floating-nav-menu li a:hover {
  color: #ff8a00;
  text-shadow: 0 0 6px rgba(255,138,0,.35);
}

.floating-nav-menu li a:hover::after {
  width: 70%;
}

/* =========================================================
   FIX DEFINITIVO – APHTML NO RESERVA ALTURA
   ========================================================= */

.block.ApHtml {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.block.ApHtml .block_content {
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   FIX DEFINITIVO – ELIMINAR ROW BLANCO FANTASMA
   ========================================================= */

/* Row vacío con fondo blanco entre nav y hero */
.row.ApRow.has-bg.bg-boxed:empty,
.row.ApRow.has-bg.bg-boxed:not(:has(*)) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* FIX – subir buscador MegaRep (sin romper header) */
nav.header-nav form.megarep-search {
  margin-top: -25px;
}

/* Aumentar altura del hero (imagen de fondo) */
#home-vehicle-filter {
  min-height: 370px;
}

/* FIX REAL DEFINITIVO – eliminar espacio blanco del header */
body#index #home-vehicle-filter {
  margin-top: -70px;
}

/* =====================================================
   FILTRO MEGAREP – NUEVA ESTRUCTURA (PASO A PASO)
   ===================================================== */

/* contenedor general */
#filter-type-1 {
  margin-top: 100px;
}

/* fila de los 3 pasos */
#filter-type-1 .field-search {
  display: flex;
  gap: 22px;
  justify-content: center;
}

/* cada paso */
#filter-type-1 .value-search {
  flex: 0 0 260px;   /* más pequeños */
  position: relative;
}

/* select base */
#filter-type-1 select {
  width: 100%;
  height: 44px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  padding: 0 16px;
  border: none;
  background: #ffffff;
  color: #1a1a1a;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: all 0.25s ease;
  appearance: none;
  cursor: pointer;
}

/* hover */
#filter-type-1 select:hover {
  transform: translateY(-2px);
}

/* foco */
#filter-type-1 select:focus {
  outline: none;
}

/* bloqueados */
#filter-type-1 select:disabled {
  background: #e6e6e6;
  color: #8a8a8a;
  cursor: not-allowed;
  box-shadow: none;
}

/* =====================================================
   TICKETS INTELIGENTES – FILTRO PASO A PASO
   ===================================================== */

/* base */
#filter-type-1 .value-search {
  position: relative;
}

/* ---------------------------
   ESTADO POR DEFECTO
   --------------------------- */
#filter-type-1 .value-search::before {
  content: "PENDIENTE";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  border-radius: 999px;
  background: #ff3b3b;
  color: #fff;
  box-shadow: 0 0 12px rgba(255,60,60,0.8);
  z-index: 3;
  animation: pulseRed 1.6s ease-in-out infinite;
}

/* ---------------------------
   SELECCIONA (habilitado, placeholder activo)
   --------------------------- */
#filter-type-1 .value-search:has(select:not(:disabled)):has(select option:first-child:checked)::before {
  content: "SELECCIONA";
  background: #ffd400;
  color: #3a2f00;
  box-shadow: 0 0 12px rgba(255,212,0,0.9);
  animation: pulseYellow 1.8s ease-in-out infinite;
}

/* ---------------------------
   LISTO (opción real seleccionada)
   --------------------------- */
#filter-type-1 .value-search:has(select:not(:disabled)):has(select option:not(:first-child):checked)::before {
  content: "LISTO";
  background: #00ff88;
  color: #003b1f;
  box-shadow: 0 0 14px rgba(0,255,136,0.9);
  animation: pulseGreen 1.8s ease-in-out infinite;
}


/* ---------------------------
   ANIMACIONES
   --------------------------- */
@keyframes pulseGreen {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.12); opacity: 0.85; }
}

@keyframes pulseYellow {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.08); opacity: 0.9; }
}

@keyframes pulseRed {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.9; }
  50% { transform: translateX(-50%) scale(1.06); opacity: 1; }
}

/* =====================================================
   BOOTSTRAP-SELECT – ESTILO FINAL DEFINITIVO
   ===================================================== */

/* botón real que ve el usuario */
#filter-type-1 .bootstrap-select .btn {
  height: 46px;
  border-radius: 999px;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.96),
    rgba(245,245,245,0.9)
  );
  color: #1b1b1b;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.6);
  transition: all 0.3s ease;
}

/* hover */
#filter-type-1 .bootstrap-select .btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

/* ==========================
   PENDIENTE (disabled)
   ========================== */
#filter-type-1 .bootstrap-select.disabled .btn {
  background: linear-gradient(
    180deg,
    rgba(210,210,210,0.85),
    rgba(190,190,190,0.85)
  );
  color: #8a8a8a;
  box-shadow: none;
  cursor: not-allowed;
}

/* ==========================
   SELECCIONA (activo)
   ========================== */
#filter-type-1 .value-search:has(select:not(:disabled))
  .bootstrap-select:not(.disabled) .btn {
  background: linear-gradient(
    180deg,
    rgba(255,212,0,0.95),
    rgba(255,190,0,0.9)
  );
  color: #3a2f00;
  box-shadow:
    0 8px 22px rgba(255,200,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ==========================
   LISTO (seleccionado)
   ========================== */
#filter-type-1 .value-search:has(select option:not(:first-child):checked)
  .bootstrap-select .btn {
  background: linear-gradient(
    180deg,
    rgba(0,255,136,0.95),
    rgba(0,210,110,0.9)
  );
  color: #003b1f;
  box-shadow:
    0 10px 26px rgba(0,255,136,0.55),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

/* =====================================================
   BOOTSTRAP-SELECT – DROPDOWN PREMIUM MEGAREP
   ===================================================== */

/* contenedor del dropdown */
#filter-type-1 .bootstrap-select .dropdown-menu {
  border-radius: 18px;
  padding: 8px 0;
  margin-top: 10px;
  border: none;
  background: rgba(255,255,255,0.98);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.35);
  overflow: hidden;
}

/* lista */
#filter-type-1 .bootstrap-select .dropdown-menu ul {
  padding: 0;
  margin: 0;
}

/* cada opción */
#filter-type-1 .bootstrap-select .dropdown-menu li a {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #1f1f1f;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* hover */
#filter-type-1 .bootstrap-select .dropdown-menu li a:hover {
  background: linear-gradient(
    90deg,
    rgba(255,212,0,0.25),
    rgba(255,212,0,0.05)
  );
  color: #3a2f00;
  transform: translateX(4px);
}

/* opción seleccionada */
#filter-type-1 .bootstrap-select .dropdown-menu li.selected a {
  background: linear-gradient(
    90deg,
    rgba(0,255,136,0.25),
    rgba(0,255,136,0.05)
  );
  color: #003b1f;
  font-weight: 600;
}

/* icono check en la seleccionada */
#filter-type-1 .bootstrap-select .dropdown-menu li.selected a::after {
  content: "✔";
  margin-left: auto;
  color: #00c972;
  font-size: 12px;
}

/* separador sutil entre items */
#filter-type-1 .bootstrap-select .dropdown-menu li:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* buscador interno (live search) */
#filter-type-1 .bootstrap-select .bs-searchbox input {
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  padding: 8px 14px;
  font-size: 13px;
  box-shadow: none;
}

/* foco buscador */
#filter-type-1 .bootstrap-select .bs-searchbox input:focus {
  outline: none;
  border-color: #ffd400;
  box-shadow: 0 0 0 2px rgba(255,212,0,0.35);
}

/* =====================================================
   FIX DROPDOWN – evitar que se abra hacia arriba
   ===================================================== */

/* forzar dropdown hacia abajo */
#filter-type-1 .bootstrap-select.dropup .dropdown-menu {
  top: 100% !important;
  bottom: auto !important;
  transform: none !important;
}

/* asegurar espacio visual */
#filter-type-1 .bootstrap-select .dropdown-menu {
  max-height: 260px;
  overflow-y: auto;
}

/* scroll bonito */
#filter-type-1 .bootstrap-select .dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

#filter-type-1 .bootstrap-select .dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

#filter-type-1 .bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
}

#filter-type-1 .bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.45);
}

/* =====================================================
   CENTRAR FILTRO EN EL HERO
   ===================================================== */

body#index #filter-type-1 {
  margin-top: 230px;
}

/* =====================================================
   TÍTULO HERO – BASE PREMIUM
   ===================================================== */

body#index #home-vehicle-filter {
  position: relative;
}

/* TÍTULO */
body#index #home-vehicle-filter::before {
  content: "ENCUENTRA TU REPUESTO AQUÍ";
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%, 10px);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
  z-index: 6;
  pointer-events: none;
  opacity: 0;

  /* COLOR INICIAL */
  color: #ffcc00;

  /* 3D + SOMBRA */
  text-shadow:
    0 1px 0 #e6b800,
    0 2px 0 #cfa500,
    0 3px 0 #b38f00,
    0 4px 6px rgba(0,0,0,0.45),
    0 0 14px rgba(255,204,0,0.55),
    0 0 28px rgba(255,170,0,0.35);

  animation:
    titleEnter 1s ease-out forwards,
    glowGold 3s ease-in-out infinite 1s;
}

/* =====================================================
   ANIMACIÓN ENTRADA
   ===================================================== */

@keyframes titleEnter {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes glowGold {
  0%, 100% {
    text-shadow:
      0 1px 0 #e6b800,
      0 2px 0 #cfa500,
      0 3px 0 #b38f00,
      0 4px 6px rgba(0,0,0,0.45),
      0 0 14px rgba(255,204,0,0.55),
      0 0 28px rgba(255,170,0,0.35);
  }
  50% {
    text-shadow:
      0 1px 0 #ffe066,
      0 2px 0 #ffd633,
      0 3px 0 #ffcc00,
      0 4px 8px rgba(0,0,0,0.55),
      0 0 26px rgba(255,220,120,0.9),
      0 0 46px rgba(255,180,0,0.7);
  }
}

/* =====================================================
   TÍTULO – VERDE CUANDO MARCA ESTÁ LISTA (FIX REAL)
   ===================================================== */

body#index
#home-vehicle-filter:has(
  #filter-type-1
  .value-search:first-child
  select option:not(:first-child):checked
)::before {

  opacity: 1; /* 👈 CLAVE */
  transform: translate(-50%, 0);

  color: #00ff88;

  animation:
    glowGreen 2.6s ease-in-out infinite;

  text-shadow:
    0 1px 0 #00cc70,
    0 2px 0 #00b965,
    0 3px 0 #009e56,
    0 4px 8px rgba(0,0,0,0.5),
    0 0 18px rgba(0,255,136,0.8),
    0 0 44px rgba(0,200,120,0.6);
}

@keyframes glowGreen {
  0%, 100% {
    text-shadow:
      0 1px 0 #00cc70,
      0 2px 0 #00b965,
      0 3px 0 #009e56,
      0 4px 8px rgba(0,0,0,0.5),
      0 0 18px rgba(0,255,136,0.65),
      0 0 36px rgba(0,200,120,0.45);
  }
  50% {
    text-shadow:
      0 1px 0 #66ffb3,
      0 2px 0 #33ff99,
      0 3px 0 #00ff88,
      0 4px 10px rgba(0,0,0,0.6),
      0 0 30px rgba(120,255,200,1),
      0 0 64px rgba(0,255,170,0.85);
  }
}

/* =====================================================
   SUBTÍTULO DINÁMICO – DEBAJO DEL FILTRO
   ===================================================== */

body#index #home-vehicle-filter {
  position: relative;
}

/* SUBTÍTULO BASE */
body#index #home-vehicle-filter::after {
  content: "";
  position: absolute;
  top: 330px; /* ⬅️ ajusta si quieres subir/bajar */
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-align: center;
  z-index: 5;
  pointer-events: none;

  /* color inicial */
  color: rgba(255,255,255,0.85);

  text-shadow:
    0 1px 2px rgba(0,0,0,0.6),
    0 0 12px rgba(255,255,255,0.15);

  animation: subtitleFadeIn 1.2s ease-out forwards;
}

/* =====================================================
   ESTADO AMARILLO – CUANDO SE ESTÁ SELECCIONANDO
   ===================================================== */

body#index
#home-vehicle-filter:has(
  #filter-type-1 select:not(:disabled)
)::after {

  color: #ffd400;

  text-shadow:
    0 1px 0 #e6b800,
    0 2px 6px rgba(0,0,0,0.5),
    0 0 18px rgba(255,212,0,0.6);
}

/* =====================================================
   ESTADO VERDE – CUANDO YA HAY SELECCIÓN
   ===================================================== */

body#index
#home-vehicle-filter:has(
  #filter-type-1 select option:not(:first-child):checked
)::after {

  color: #00ff88;

  text-shadow:
    0 1px 0 #00cc70,
    0 2px 6px rgba(0,0,0,0.55),
    0 0 20px rgba(0,255,136,0.8),
    0 0 40px rgba(0,200,120,0.6);

  animation: glowSubGreen 2.8s ease-in-out infinite;
}

/* =====================================================
   ANIMACIONES
   ===================================================== */

@keyframes subtitleFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes glowSubGreen {
  0%, 100% {
    text-shadow:
      0 1px 0 #00cc70,
      0 2px 6px rgba(0,0,0,0.55),
      0 0 18px rgba(0,255,136,0.6);
  }
  50% {
    text-shadow:
      0 1px 0 #66ffb3,
      0 2px 8px rgba(0,0,0,0.65),
      0 0 32px rgba(120,255,200,1),
      0 0 60px rgba(0,255,170,0.85);
  }
}

body#index #megarep-subtitle {
  position: absolute;
  top: 330px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-align: center;
  z-index: 5;
  pointer-events: none;

  color: rgba(255,255,255,0.85);

  text-shadow:
    0 1px 2px rgba(0,0,0,0.6),
    0 0 12px rgba(255,255,255,0.15);

  transition: opacity 0.6s ease;
}
body#index
#home-vehicle-filter:has(
  #filter-type-1 select:not(:disabled)
)
#megarep-subtitle {
  color: #ffd400;
}

body#index
#home-vehicle-filter:has(
  #filter-type-1 select option:not(:first-child):checked
)
#megarep-subtitle {
  color: #00ff88;
}

/* =========================================
   CTA MARCAS – ESTILO PREMIUM UNIFICADO V2
   (CORREGIDO: POSICIÓN DE FLECHAS LATERALES)
========================================= */

.top_cate {
  text-align: center;
  margin: 40px auto 30px;
}

/* RESET COMPLETO DE LÍNEAS PRESTASHOP */
.top_cate .title_block::after,
.top_cate h3::after,
.top_cate h4::after,
.top_cate .title_block::before {
  content: none !important;
  display: none !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* CONTENEDOR PRINCIPAL (EL BOTÓN NEÓN) */
.top_cate .title_block,
.top_cate h3,
.top_cate h4 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 40px !important;

  /* Tipografía y Estilo */
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 17px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #1a1a1a !important;

  /* Fondo y Bordes Neón */
  background: linear-gradient(145deg, #ffffff, #fcfcfc) !important;
  border: 2px solid #00b36b !important;
  border-radius: 999px !important;

  /* Sombra y Relieve 3D */
  box-shadow: 
    0 4px 15px rgba(0, 179, 107, 0.25), 
    inset 0 2px 2px white !important;

  /* Animación de Respiración Neón */
  animation: megarepNeonPulse 2.5s infinite ease-in-out !important;
  z-index: 1;
}

@keyframes megarepNeonPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(0, 179, 107, 0.25);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 6px 25px rgba(0, 179, 107, 0.45), 0 0 15px rgba(0, 179, 107, 0.2);
    border-color: #00ff99 !important;
  }
}

/* =========================================
   FLECHAS LATERALES (FUERA DEL BOTÓN)
========================================= */

.block.ApLink.top_cate {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0 !important;
  margin: -10px auto 0px !important;
}

/* Flecha izquierda */
.block.ApLink.top_cate::before {
  content: "▼";
  position: absolute;
  left: 50%;
  margin-left: -480px; /* La aleja del centro hacia la izquierda */
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  font-weight: 900;
  color: #00b36b;
  filter: drop-shadow(0 0 5px #00ff99);
  animation: megarepArrowGreen 1.6s ease-in-out infinite;
}

/* Flecha derecha */
.block.ApLink.top_cate::after {
  content: "▼";
  position: absolute;
  right: 50%;
  margin-right: -480px; /* La aleja del centro hacia la derecha */
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  font-weight: 900;
  color: #00b36b;
  filter: drop-shadow(0 0 5px #00ff99);
  animation: megarepArrowGreen 1.6s ease-in-out infinite;
  animation-delay: 0.8s;
}

@keyframes megarepArrowGreen {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(-50%) translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) translateY(10px);
  }
}

/* Ajuste para pantallas medianas (Evita que se monten en el texto) */
@media (max-width: 1200px) {
  .block.ApLink.top_cate::before { margin-left: -400px; }
  .block.ApLink.top_cate::after { margin-right: -400px; }
}

@media (max-width: 991px) {
  .block.ApLink.top_cate::before { margin-left: -320px; font-size: 24px; }
  .block.ApLink.top_cate::after { margin-right: -320px; font-size: 24px; }
}

/* Ocultar en móviles para limpieza visual */
@media (max-width: 768px) {
  .block.ApLink.top_cate::before,
  .block.ApLink.top_cate::after {
    display: none !important;
  }
  .top_cate .title_block {
    font-size: 14px !important;
    padding: 10px 20px !important;
  }
}

/* =========================================
   FIX REAL – TEXTO MARCA SIN ESPACIO FANTASMA
========================================= */

.ApCategoryImage .cat_name {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  line-height: 1.1 !important;
  font-size: 13px;           /* ajusta si quieres */
  font-weight: 600;

  height: auto !important;
  min-height: unset !important;
  max-height: none !important;

  white-space: nowrap;
}

/* evitar que flex estire el texto */
.ApCategoryImage .cate_content {
  justify-content: flex-start !important;
}

/* =========================================
   RESET TOTAL MODULO MARCAS (ApCategoryImage)
========================================= */

.ApCategoryImage *,
.ApCategoryImage *::before,
.ApCategoryImage *::after {
  box-sizing: border-box;
}

.ApCategoryImage ul,
.ApCategoryImage li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.ApCategoryImage li {
  width: auto !important;
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
}

.ApCategoryImage li a {
  display: block !important;
  height: auto !important;
  min-height: unset !important;
  padding: 10px 6px !important;
  text-align: center;
}

/* =========================================
   COMPACTAR SOLO TEXTO MARCA
========================================= */

.ApCategoryImage .cat_name {
  display: block !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;

  font-size: 13px;
  line-height: 1.15 !important;
  font-weight: 600;

  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
}

/* =========================================
   FIX DEFINITIVO – AP CATEGORY IMAGE GRID
========================================= */

/* el grid debe aplicarse al UL, no al contenedor */
.ApCategoryImage .block_content {
  display: block !important;
}

/* grid correcto SOLO en el UL real */
.ApCategoryImage ul.level0 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

/* cada item ocupa solo su celda */
.ApCategoryImage li {
  width: 100% !important;
}

/* enlace normal, sin estirar */
.ApCategoryImage li > a {
  display: block;
  text-align: center;
  padding: 10px 6px;
}

/* logo intacto */
.ApCategoryImage .cover-img img {
  max-width: 100%;
  height: auto;
}

/* texto compacto y normal */
.ApCategoryImage .cat_name {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.2;
}

/* =========================================
   FIX FINAL – GRILLA CORRECTA DE MARCAS
========================================= */

/* ocultar el UL vacío/auxiliar que mete ApBuilder */
.ApCategoryImage ul.level0:empty {
  display: none !important;
}

/* forzar grilla SOLO en el UL con contenido */
.ApCategoryImage ul.level0 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}

/* cada marca ocupa solo su celda */
.ApCategoryImage li {
  width: 100% !important;
}

/* enlace normal */
.ApCategoryImage li > a {
  display: block;
  text-align: center;
  padding: 10px 6px;
}

/* logo intacto */
.ApCategoryImage .cover-img img {
  max-width: 100%;
  height: auto;
}

/* texto compacto */
.ApCategoryImage .cat_name {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.2;
}

/* =========================================
   FIX DEFINITIVO REAL – AP CATEGORY IMAGE
   (GRID EN EL CONTENEDOR CORRECTO)
========================================= */

/* ESTE es el grid verdadero */
.ApCategoryImage .block_content {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

/* anulamos el UL interno para que no interfiera */
.ApCategoryImage ul.level0 {
  display: contents !important;
}

/* cada item ocupa su celda */
.ApCategoryImage li {
  width: 100% !important;
  list-style: none !important;
}

/* enlace limpio */
.ApCategoryImage li > a {
  display: block;
  text-align: center;
  padding: 12px 8px;
}

/* logo normal */
.ApCategoryImage .cover-img img {
  max-width: 100%;
  height: auto;
}

/* texto compacto */
.ApCategoryImage .cat_name {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.2;
}

/* =========================================
   AJUSTE FINAL – TAMAÑO LOGOS MARCAS
========================================= */

/* contenedor del logo */
.ApCategoryImage .cover-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;        /* controla la altura total del área del logo */
}

/* imagen del logo */
.ApCategoryImage .cover-img img {
  max-height: 42px;   /* 🔑 tamaño real del logo */
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* =========================================
   FOOTER – TÍTULOS PROFESIONALES (FONDO CLARO)
========================================= */

#footer .block-title,
#footer h4,
#footer .footer-title {
  color: #2b2b2b;          /* gris oscuro profesional */
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  margin-bottom: 12px;
  padding-bottom: 6px;
}

#footer .block-title::after,
#footer h4::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 6px;
  background: #ffcc00;   /* dorado sobrio */
}

/* Texto descriptivo footer */
#footer .footer-about p {
  font-size: 13px;
  line-height: 1.6;
  color: #7a7a7a;
  margin-bottom: 10px;
}

#footer .footer-about p:last-child {
  margin-bottom: 0;
}

/* =========================================
   FOOTER – ALINEACIÓN REAL POR GRID
========================================= */

/* todas las columnas iguales */
#footer .footer-top .ApColumn {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* títulos perfectamente alineados */
#footer .footer-top .block-title,
#footer .footer-top h4 {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 12px;
}

/* =========================================
   FOOTER – COMPACTAR ALTURA VISUAL
========================================= */

/* reducimos el espacio interno general */
#footer .footer-top {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* controlamos el texto largo de la primera columna */
#footer .footer-about {
  max-width: 90%;
}

/* ajustamos separación entre links */
#footer .block-content li,
#footer ul li {
  margin-bottom: 6px;
}

/* evitamos que el grid “empuje” visualmente */
#footer .footer-top .ApRow {
  align-items: start;
}

/* Ajuste fino: subir columnas de links del footer */
#footer .footer-top .ApColumn:not(:first-child) {
  margin-top: -12px;
}

/* =========================================
   FOOTER – TEXTO IZQUIERDO DESTACADO (LÍNEA DERECHA)
========================================= */

#footer .footer-about {
  position: relative;
  padding-right: 16px;
  padding-left: 0;
  margin-right: 10px;
}

/* línea LED lateral derecha */
#footer .footer-about::before {
  content: "";
  position: absolute;
  right: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;

  background: linear-gradient(
    180deg,
    rgba(255,204,0,0.45),
    rgba(255,204,0,0.25),
    rgba(255,204,0,0.45)
  );

  box-shadow:
    0 0 4px rgba(255,204,0,0.35),
    0 0 10px rgba(255,204,0,0.25);

  border-radius: 2px;

  animation: footerGlow 5.5s ease-in-out infinite;
}

/* texto */
#footer .footer-about p {
  color: #4a4a4a;
  font-size: 13.5px;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0.2px;

  text-shadow:
    0 0 2px rgba(255,204,0,0.25),
    0 0 10px rgba(255,204,0,0.15);
}

/* texto */
#footer .footer-about p {
  color: #4a4a4a;
  font-size: 13.5px;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0.2px;

  text-shadow:
    0 0 2px rgba(255,204,0,0.25),
    0 0 10px rgba(255,204,0,0.15);
}

@keyframes footerGlow {
  0% {
    opacity: 0.45;
    box-shadow:
      0 0 3px rgba(255,204,0,0.25),
      0 0 8px rgba(255,204,0,0.15);
  }
  50% {
    opacity: 0.75;
    box-shadow:
      0 0 6px rgba(255,204,0,0.45),
      0 0 14px rgba(255,204,0,0.3);
  }
  100% {
    opacity: 0.45;
    box-shadow:
      0 0 3px rgba(255,204,0,0.25),
      0 0 8px rgba(255,204,0,0.15);
  }
}

/* Logo sobre texto en footer */
.footer-about-logo {
  max-width: 180px;
  height: auto;
  margin-bottom: 15px;
  display: block;
}

.footer-about {
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}

/* Centrar contenido en columnas de logos */
.footer_box .ApColumn {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Separar logos del texto izquierdo */
.footer-logos-wrapper {
  padding-left: 260px;
}

/* Chilexpress */
.footer-chilexpress img {
  max-width: 160px;
}

/* Círculo */
.footer-center-col img {
  max-width: 75px;
}

/* Starken */
.footer-starken img {
  max-width: 150px;
}

/* Medios de pago */
.footer-payments img {
  max-width: 190px;
}

/* Ajuste visual vertical fino */
.footer-center-col img {
  transform: translateY(30px);
}

.footer-starken img {
  transform: translateY(10px);
}

/* Control total del bloque de logos */
.footer-logos-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* 👈 controla separación */
}

/* Quitar ancho fijo de columnas internas */
.footer-logos-wrapper .ApColumn {
  width: auto !important;
  flex: 0 0 auto !important;
}

.footer-logos-wrapper img {
  transition: transform 0.2s ease;
}

.footer-logos-wrapper img:hover {
  transform: scale(1.05);
}

/* Eliminar espacio inferior del copyright */
.block.copyright {
  margin-bottom: 0 !important;
  padding-bottom: 0px !important;
}

/* Compactar completamente el footer */
.footer-center {
  padding-top: 1px !important;
  padding-bottom: 0 !important;
}

.footer-bottom {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#footer {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* ===== EFECTO PERMANENTE INTENSO ===== */

.block.service.ApRawHtml {
  position: relative;
  padding: 20px;
  border-radius: 14px;

  /* Efecto activo permanente */
  transform: translateY(-6px);
  background: rgba(43, 182, 115, 0.06);
  box-shadow: 0 10px 30px rgba(43, 182, 115, 0.18);

  transition: all 0.35s ease;
}

/* Icono activo permanente */
.block.service.ApRawHtml i {
  transform: scale(1.15);
  color: #1e8f56;
  transition: all 0.3s ease;
}

/* Título activo permanente */
.block.service.ApRawHtml .title {
  color: #1e8f56;
  transition: all 0.3s ease;
}

/* Hover más intenso aún */
.block.service.ApRawHtml:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(43, 182, 115, 0.25);
}

/* Reducir espacio debajo de la fila de banners */
.ApRow.has-bg.bg-boxed {
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
}

/* =====================================================
   BOTÓN VOLVER ARRIBA – ESTILO EXACTO EJEMPLO
===================================================== */

#back-top,
#to-top,
.to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;

  display: flex !important;
  align-items: center;
  justify-content: center;

  /* Verde fuerte */
  background: #0aa84f;

  /* Doble círculo como el ejemplo */
  box-shadow:
    0 0 0 6px rgba(10,168,79,0.25),
    0 12px 30px rgba(0,0,0,0.25);

  transition: all 0.3s ease;

  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);

  overflow: hidden;
}

#back-top::before,
#to-top::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5l-7 7h4v7h6v-7h4l-7-7z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Mostrar cuando tenga clase show */
#back-top.show,
#to-top.show,
.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hover suave */
#back-top:hover,
#to-top:hover,
.to-top:hover {
  transform: translateY(-5px) scale(1.05);
}

#back-top a,
#to-top a {
  font-size: 0 !important;
  color: transparent !important;
}

#back-top i,
#to-top i {
  display: none !important;
}

/* ===== GLOW VERDE PREMIUM SUAVE ===== */

#back-top,
#to-top {

  box-shadow:
    0 8px 20px rgba(0,0,0,0.10),
    0 0 0 4px rgba(30,143,86,0.10),
    0 0 18px rgba(30,143,86,0.25);

  animation: premiumGlow 3.5s ease-in-out infinite;
}

/* Animación respiración elegante */
@keyframes premiumGlow {

  0% {
    box-shadow:
      0 8px 20px rgba(0,0,0,0.10),
      0 0 0 4px rgba(30,143,86,0.10),
      0 0 18px rgba(30,143,86,0.25);
  }

  50% {
    box-shadow:
      0 10px 25px rgba(0,0,0,0.12),
      0 0 0 6px rgba(30,143,86,0.15),
      0 0 28px rgba(30,143,86,0.35);
  }

  100% {
    box-shadow:
      0 8px 20px rgba(0,0,0,0.10),
      0 0 0 4px rgba(30,143,86,0.10),
      0 0 18px rgba(30,143,86,0.25);
  }

}

.megarep-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:26px;
margin-top:30px;
}

.megarep-card{
background:#ffffff;
border:1px solid #e5e5e5;
border-radius:12px;
padding:26px;
position:relative;

/* efecto premium permanente */
box-shadow:
0 10px 25px rgba(0,0,0,0.15),
0 0 0 1px rgba(212,175,55,0.08);

/* transición suave */
transition:all 0.35s ease;
}

/* línea dorada superior */
.megarep-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:3px;
background:linear-gradient(90deg,#d4af37,#f3d46b,#d4af37);
border-top-left-radius:12px;
border-top-right-radius:12px;
}

/* hover más elegante */
.megarep-card:hover{
transform:translateY(-6px);
box-shadow:
0 18px 40px rgba(0,0,0,0.25),
0 0 12px rgba(212,175,55,0.35);
}

.megarep-card h3{
margin-top:0;
font-weight:600;
}

/* tarjeta de medios de pago */
.megarep-paybox{
max-width:540px;
margin:50px auto;
background:#ffffff;
border-radius:14px;
padding:35px;
border:1px solid #e5e5e5;

box-shadow:
0 15px 40px rgba(0,0,0,0.20),
0 0 0 1px rgba(212,175,55,0.1);

text-align:center;
position:relative;
}

/* línea dorada superior */
.megarep-paybox::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:3px;
background:linear-gradient(90deg,#d4af37,#f3d46b,#d4af37);
border-top-left-radius:14px;
border-top-right-radius:14px;
}

/* Animación glow suave */

@keyframes megarepGlow {

0%{
box-shadow:
0 10px 25px rgba(0,0,0,0.15),
0 0 0px rgba(212,175,55,0.15);
}

50%{
box-shadow:
0 12px 28px rgba(0,0,0,0.18),
0 0 14px rgba(212,175,55,0.35);
}

100%{
box-shadow:
0 10px 25px rgba(0,0,0,0.15),
0 0 0px rgba(212,175,55,0.15);
}

}

/* aplicar glow automático */

.megarep-card{
animation:megarepGlow 4s ease-in-out infinite;
}

/* glow para caja de pagos */

.megarep-paybox{
animation:megarepGlow 5s ease-in-out infinite;
}

.about-grid{
margin-top:30px;
align-items:center;
}

.team-box{
margin-top:30px;
}

.middle-img{
display:flex;
align-items:center;
justify-content:center;
min-height:260px;
}

.about-img{
max-width:350px;
width:100%;
height:auto;
display:block;
margin:auto;
}

.megarep-card h3{
text-align:center;
}

.team-box{
text-align:center;
}

.megarep-card p{
text-align:center;
}

.about-intro{
max-width:750px;
margin:0 auto 35px auto;
text-align:center;
font-size:15px;
line-height:1.6;
}

@keyframes megarepFloat{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-8px);
}

100%{
transform:translateY(0px);
}

}

.about-img{
animation:megarepFloat 4s ease-in-out infinite;
}

.megarep-card p{
text-align:center;
line-height:1.5;
}

.about-grid{
display:flex;
align-items:stretch;
}

.about-grid .col-md-4{
display:flex;
flex-direction:column;
gap:20px;
}

.megarep-card{
display:flex;
flex-direction:column;
justify-content:center;
padding:16px 20px;
min-height:auto;
}

.megarep-card h3{
margin-top:0;
margin-bottom:10px;
text-align:center;
}

.megarep-card p{
margin:6px 0 0 0;
text-align:center;
line-height:1.45;
}

.team-box{
min-height:auto;
padding:20px 40px;
max-width:900px;
margin:40px auto 0 auto;
text-align:center;
}

.envio-seguro-textos{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
    width:80%;
    margin:auto;
}

.columna-envio{
    width:48%;
    text-align:justify;
}

.bloques-envio{
    display:flex;
    justify-content:center;
    gap:40px;
    padding:40px 10%;
}

.bloque-envio{
    background:white;
    padding:30px;
    width:45%;
    border-radius:10px;
    box-shadow:0px 6px 18px rgba(0,0,0,0.15);
    border-top:4px solid #d4a017;
    text-align:center;
}

.bloque-envio h3{
    margin-bottom:15px;
    font-size:20px;
}

.bloque-envio p{
    font-size:15px;
    line-height:1.6;
}

.envio-layout{
grid-template-columns:1fr 420px 1fr;
align-items:center;
}

.envio-img{
display:flex;
justify-content:center;
}

.envio-img img{
width:100%;
max-width:300px;
height:auto;
}

.envio-img{
display:flex;
justify-content:center;
align-items:center;
}

.aliados-titulo{
text-align:center;
margin-top:60px;
margin-bottom:30px;
font-size:28px;
}

.aliados-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
max-width:900px;
margin:auto;
}

.aliado-box{
background:white;
border-radius:12px;
padding:30px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.aliado-box img{
max-width:140px;
margin-top:15px;
height:auto;
}

@keyframes aliadosFloat{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-6px);
}

100%{
transform:translateY(0px);
}

}

.aliado-box img{
max-width:140px;
margin-top:15px;
height:auto;
animation:aliadosFloat 4s ease-in-out infinite;
}

/* FORMULARIO CONTACTO */

.contact-form .form-control{
  border-radius:8px;
  border:1px solid #dcdcdc;
  padding:14px;
  background:#fafafa;
  transition:all .2s ease;
}

.contact-form .form-control:focus{
  border-color:#1e73be;
  box-shadow:0 0 0 3px rgba(30,115,190,.15);
  background:#ffffff;
}

.contact-form textarea{
  min-height:120px;
}

.contact-form .btn-primary{
  padding:14px 30px;
  border-radius:8px;
  font-weight:600;
  letter-spacing:.5px;
}

.contact-form .btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 12px rgba(0,0,0,.15);
}

.subcategory-meta::after{
display:none !important;
}

.subcategory-meta{
font-size:0;
}

.subcategory-meta a{
font-size:16px;
}

/* ocultar contador () */
.subcategory-meta span{
display:none !important;
}

/* TARJETA DE CADA MODELO */
.subcategory-block{
background:#f7f7f7;
border-top:3px solid #d6a23a;
border-radius:10px;
padding:2px 6px !important;
margin-bottom:18px;
text-align:center;
box-shadow:0 3px 10px rgba(0,0,0,0.08);

display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
height:auto !important;
}

/* efecto hover */
.subcategory-block:hover{
background:#ffffff;
transform:translateY(-3px);
box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

/* CONTENEDOR IMAGEN */
.subcategory-image{
display:flex;
align-items:flex-start;
justify-content:center;
margin:0 !important;
padding:0 !important;
line-height:0;
background:transparent !important;
}

/* IMAGEN AUTO */
.subcategory-image img{
height:auto !important;
max-height:none !important;
width:auto;
object-fit:contain;
display:block;
margin:0 auto;
}

/* CONTENEDOR TEXTO */
.subcategory-meta{
margin:0 !important;
padding:0 !important;
line-height:1.1;
background:transparent !important;
border:none !important;
}

/* TITULO MODELO */
.subcategory-meta h3{
font-size:17px;
font-weight:600;
margin:0 !important;
padding:2px 0 0 0 !important;
line-height:1.1;
}

/* eliminar espacio inferior de la tarjeta */
.subcategory-block{
padding-bottom:2px !important;
}

/* eliminar espacio del contenedor del texto */
.subcategory-meta{
margin:0 !important;
padding:0 !important;
}

/* compactar el titulo */
.subcategory-meta h3{
margin:0 !important;
padding:0 !important;
line-height:1 !important;
}

/* eliminar altura del h3 contenedor */
.subcategory-meta h3{
height:auto !important;
min-height:0 !important;
max-height:none !important;
line-height:1.2 !important;
}

.subcategory-image{
height:auto !important;
min-height:0 !important;
max-height:none !important;
}

.subcategory-block{
cursor:pointer;
}

/* ocultar contador */
.products-counter{
display:none !important;
}

margin:10px auto 40px auto !important;
padding:8px 28px !important;

background-image:linear-gradient(180deg,#fff8dc,#f5e6c8);
border-top:3px solid #d6a23a;
border-radius:999px;

box-shadow:rgba(255,212,0,0.53) 0px 4px 10px;

font-family:Georgia,"Times New Roman",serif;
font-size:22px;
font-weight:700;
letter-spacing:1px;
line-height:1;

color:#222;
}

/* =================================
   FIX ALTURA NOMBRE MODELO
================================= */

.subcategory-meta h3{
  min-height:44px;
  line-height:1.2;
  text-align:center;
}

/* =================================
   ALTURA UNIFORME TARJETAS MODELOS
================================= */

.subcategory-block{
  height:210px !important;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* contenedor imagen */
.subcategory-image{
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* imagen */
.subcategory-image img{
  max-height:90px;
  width:auto;
}

/* contenedor texto */
.subcategory-meta{
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* titulo modelo */
.subcategory-meta h3{
  line-height:1.2;
  text-align:center;
}

.product-miniature img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    padding: 10px;
}

.product-miniature:hover img{
transform:scale(1.05);
transition:0.3s;
}

#subcategories .subcategory-name{
display:block !important;
width:100%;
text-align:center;
line-height:1.2;

-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
white-space: normal !important;
}

#subcategories .subcategory-name br{
display:block !important;
margin-top:2px;
}

/* =========================
   TEXTO MODELO + AÑOS PRO
========================= */

#subcategories .subcategory-name{
  display:block !important;
  text-align:center;
  font-family:'Poppins', sans-serif;
}

/* MODELO */
#subcategories .subcategory-name .modelo{
  display:block;
  font-size:17px;
  font-weight:700;
  letter-spacing:1px;
  color:#111;

  text-shadow:0 2px 6px rgba(0,0,0,0.15);

  animation:respirarModelo 3s ease-in-out infinite;
}

/* AÑOS */
#subcategories .subcategory-name .anio{
  display:block;
  font-size:13px;
  font-weight:500; /* 🔥 más fino */
  letter-spacing:0.8px;

  color:#c9a227; /* dorado más elegante */

  /* ✨ borde suave tipo halo */
-webkit-text-stroke: 0.2px rgba(0,0,0,0.3);

  animation:respirarAnos 3s ease-in-out infinite;
}

/* ANIMACIONES SUAVES (NO BRUSCAS) */
@keyframes respirarModelo{
  0%{ transform:scale(1); opacity:0.9; }
  50%{ transform:scale(1.03); opacity:1; }
  100%{ transform:scale(1); opacity:0.9; }
}

@keyframes respirarAnos{
  0%{ transform:scale(1); opacity:0.8; }
  50%{ transform:scale(1.06); opacity:1; }
  100%{ transform:scale(1); opacity:0.8; }
}

#subcategories .subcategory-name span{
  display:block !important;
}

#subcategories .subcategory-name .modelo{
  white-space:nowrap;
  font-size:clamp(11px, 1vw, 16px);
}

/* =========================
   SUBTITULO PREMIUM ANIMADO
========================= */

.category-subtitle{
  text-align:center;
  margin-top:10px;
  margin-bottom:22px;

  font-family:'Poppins', sans-serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;

  /* 🔥 COLOR DORADO INTENSO */
  color:#d4af37;

  /* sombra elegante (define mejor) */
  text-shadow:
    0 1px 2px rgba(0,0,0,0.25),
    0 0 4px rgba(212,175,55,0.25);

  /* animación suave */
  animation:respirarTexto 3s ease-in-out infinite;
}

@keyframes respirarTexto{
  0%{ transform:scale(1); opacity:0.9; }
  50%{ transform:scale(1.04); opacity:1; }
  100%{ transform:scale(1); opacity:0.9; }
}

.title_block{
  margin: 10px 0 5px 0 !important; /* 🔥 reduce espacio abajo */
  line-height: 1.2 !important;
  padding-bottom: 0 !important;
}

/* 🔥 LIMPIAR INTERNOS (sin romper contenedor) */
.widget-category_image *{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.widget-category_image *::before,
.widget-category_image *::after{
  background: transparent !important;
  box-shadow: none !important;
}

/* CONTENEDOR BLANCO */
.widget-category_image{
  background:#ffffff !important;
  padding:25px 15px;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

/* 🔥 BANNER AUTO (ARREGLADO) */
.category-cover {
  min-height: 160px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* 👈 IMPORTANTE */
  margin-bottom: -40px !important;
  margin-top: -30px !important;
}

/* IMAGEN */
.category-cover img.img-fluid {
  max-height: 120px !important;
  width: auto !important;
  object-fit: contain;
}

/* CONTENEDOR GENERAL */
.category-header-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

/* BLOQUES IZQUIERDA */
.category-info-boxes {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* CAJAS */
.info-box {
  background: #fff;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  min-width: 90px;
  border: 1px solid #eee;

  /* 👇 CLAVE PARA QUE NO SE CORTE */
  white-space: nowrap;
}

/* UNIÓN VISUAL */
.info-box:not(:last-child) {
  border-bottom: none;
}

/* BORDES SOLO ARRIBA Y ABAJO */
.info-box:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.info-box:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* AUTO */
.category-car img {
  max-height: 120px;
}

.category-header-custom {
  margin-top: 30px;
}

#js-product-list-top .row {
  display: none !important;
}

/* ===============================
   CARD DISEÑO LIMPIO
=============================== */

.my-card {
  background: #fff;
  border-radius: 2px;
  padding: 10px;
  transition: 0.25s;
  position: relative;
}

.my-card:hover {
  transform: scale(1.02);
}

/* IMAGEN */
/* CONTENEDOR MÁS COMPACTO */
.product-image {
  border-radius: 18px;
  overflow: hidden;
  background: #f4f4f4;
  aspect-ratio: 4 / 2.5;
}

/* IMAGEN SIN ESPACIOS */
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* INFO */
.product-info {
  background: transparent; /* 🔥 quitamos el blanco */
  border-radius: 18px;
  padding: 10px;
  margin-top: 8px;
}

/* TITULO */
.product-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #222;
  margin-bottom: 6px;

  display: -webkit-box;
  -webkit-line-clamp: 3; /* 🔥 FIJO */
  -webkit-box-orient: vertical;
  overflow: hidden;

  height: 54px; /* 🔥 CLAVE: altura fija */
}

/* PRECIO */
.price {
  font-size: 17px;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
}

/* CONDICION */
.product-condition {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 20px;
  background: #9aa0a6;
  color: #fff;
}

/* ===============================
   GRID LIMPIO FINAL
=============================== */

#products .product_list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  #products .product_list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  #products .product_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===============================
   ALTURA UNIFORME CARDS
=============================== */

/* cada item ocupa toda la celda */
.ajax_block_product {
  display: flex;
}

/* card flexible */
.my-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* contenido crece */
.product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-title {
  min-height: 56px;
}

/* ===============================
   FIX BADGE (USADO)
=============================== */

.product-condition {
  display: inline-block;
  width: fit-content; /* 🔥 evita que se estire */
  align-self: flex-start;
}

/* ===============================
   ALTURA PERFECTA
=============================== */

.product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* espacio consistente */
.product-title {
  min-height: 60px;
}

/* precio + badge bloque fijo */
.price {
  min-height: 24px;
}

/* ===============================
   PRECIO + CONDICIÓN EN UNA FILA
=============================== */

.price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* metemos el badge dentro del flujo del precio */
.product-condition {
  margin-left: auto;
  font-size: 11px;
  padding: 3px 8px;
}

.product-condition.used {
  background: #e0e0e0;
  color: #555;
}

.product-condition.new {
  background: #00c853;
  color: #fff;
}

.product-condition.refurbished {
  background: #ffd54f;
  color: #333;
}

/* ===============================
   CARD 3D MODERNA
=============================== */

.my-card {
  background: #fff;
  border-radius: 22px;
  padding: 10px;
  position: relative;

  /* 🔥 sombra en capas (3D real) */
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 20px rgba(0,0,0,0.06);

  transition: all 0.3s ease;
}

/* HOVER 3D */
.my-card:hover {
  transform: translateY(-6px) scale(1.01);

  box-shadow:
    0 6px 12px rgba(0,0,0,0.06),
    0 18px 35px rgba(0,0,0,0.12);
}

.my-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.6),
    transparent 40%
  );

  opacity: 0.4;
}

.my-card {
  background: linear-gradient(
    180deg,
    #dcfce7 0%,
    #ffffff 75%
  );
}

/* ===============================
   LIMPIAR CONTENEDOR EXTERNO
=============================== */

.ajax_block_product {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* quitar posibles bordes del theme */
.product-miniature,
.thumbnail-container {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ===============================
   BOTÓN REAL PRESTASHOP
=============================== */

.add-to-cart {
  width: 100%;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: auto;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.add-to-cart::before {
  content: "🛒 ";
}

.add-to-cart:hover {
  background: #22c55e;
  transform: translateY(-1px);
}

.add-to-cart:active {
  transform: scale(0.96);
}

.card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.product-info {
  position: relative;
  z-index: 2;
}

.my-card {
  position: relative;
}

/* ===============================
   MINI CARRITO – VERSION FINAL PRO (ULTRA LIMPIO)
=============================== */

/* ITEM */
.premium-mini-cart .cart-item {
  display: flex;
  align-items: center;
  gap: 10px;

  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  transition: all .2s ease;
}

.premium-mini-cart .cart-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* separador */
.premium-mini-cart .cart-item:not(:last-child) {
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
  padding-bottom: 10px;
}

/* ===============================
   🔥 LAYOUT REAL (FLEX LIMPIO)
=============================== */

.premium-mini-cart .product-line-grid {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

/* eliminar TODA la estructura interna de prestashop */
.premium-mini-cart .product-line-grid-left,
.premium-mini-cart .product-line-grid-body,
.premium-mini-cart .product-line-grid-right,
.premium-mini-cart .row,
.premium-mini-cart [class*="col-"] {
  display: contents !important;
}

/* ===============================
   IMAGEN
=============================== */

.premium-mini-cart .product-image {
  flex: 0 0 42px;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.premium-mini-cart .product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===============================
   NOMBRE
=============================== */

.premium-mini-cart .product-line-info {
  flex: 1;
  min-width: 0;

  display: flex;
  align-items: center;
}

.premium-mini-cart .product-line-info a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  word-break: break-word;
  line-height: 1.25;
}

/* ===============================
   PRECIO
=============================== */

.premium-mini-cart .product-price {
  margin-left: auto;

  font-size: 15px;
  font-weight: 800;
  color: #111;

  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
}

/* ===============================
   BASURERO
=============================== */

.premium-mini-cart .remove,
.premium-mini-cart .remove-from-cart {
  flex: 0 0 auto;

  width: 28px;
  height: 28px;

  border-radius: 50%;
  background: #f1f1f1;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  color: #666;

  cursor: pointer;
  transition: all .2s ease;
}

.premium-mini-cart .remove:hover {
  background: #e60023;
  color: #fff;
}

/* ===============================
   LIMPIEZA
=============================== */

/* ocultar cantidad */
.premium-mini-cart input,
.premium-mini-cart .qty {
  display: none !important;
}

/* ocultar precio duplicado */
.premium-mini-cart .product-line-info .price,
.premium-mini-cart .product-line-info.product-price.h5 {
  display: none !important;
}

/* ===============================
   SUBTOTAL – ESTILO PRO
=============================== */

.premium-mini-cart .cart-subtotals {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-top: 12px;
  margin-top: 12px;
  margin-bottom: 6px;

  border-top: 1px solid #eee;
}

/* texto "Subtotal" */
.premium-mini-cart .cart-subtotals .label {
  font-size: 13px;
  color: #888;
  font-weight: 500;
}

/* precio subtotal */
.premium-mini-cart .cart-subtotals .value {
  font-size: 18px;
  font-weight: 900;
  color: #000;
  letter-spacing: 0.3px;
}

/* CONTENEDOR DEL MINI CARRITO */
.megarep-login-modal {
  max-height: 70vh !important;   /* 🔥 clave */
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

/* LISTA DE PRODUCTOS (scroll interno) */
.premium-mini-cart {
  overflow-y: auto !important;
  flex: 1;
}

/* HEADER SUPERIOR DEL MINI CARRITO */
.megarep-account.megarep-popup-account {
  padding: 10px 20px !important;   /* antes 28px → lo achicamos */
}

/* ÍCONO DEL CARRITO */
.megarep-popup-img {
  width: 50px !important;
  height: 50px !important;
}

/* OPCIONAL: aún más compacto */
.megarep-login-modal h2,
.megarep-login-modal h3 {
  margin-top: 5px !important;
}

/* 🔽 REDUCIR BLOQUE SUPERIOR (ICONO + TITULO) */
.megarep-account.megarep-popup-account {
  padding: 5px 15px !important;
}

/* ICONO MÁS PEQUEÑO */
.megarep-popup-img {
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 5px !important;
}

/* TITULO MÁS COMPACTO */
.megarep-login-modal h2 {
  font-size: 20px !important;
  margin: 5px 0 !important;
}

/* TEXTO "5 productos" */
.megarep-login-modal .cart-count,
.megarep-login-modal p {
  margin-bottom: 5px !important;
}

/* 🔥 MÁS ESPACIO PARA PRODUCTOS */
.premium-mini-cart {
  max-height: 65vh !important;
  overflow-y: auto !important;
}

.megarep-popup-img {
  display: none !important;
}

/* 🔒 Ocultar SOLO icono flotante Leo (sin romper lógica) */
.leo-fly-cart-icon-wrapper {
  display: none !important;
}

/* 🔒 eliminar animación/loader fantasma del carrito */
.leo-fly-cart-cssload-loader {
  display: none !important;
}

/* =========================================================
   LAYOUT CARRITO (IZQUIERDA / DERECHA)
========================================================= */

.cart-container {
  display: flex;
  gap: 2px;
  align-items: flex-start;
  margin-top: 30px;
  position: relative;
}

.cart-left {
  width: 70%;
}

.cart-right {
  width: 30%;
  position: sticky;
  top: 20px;
}

/* =========================================================
   TARJETAS PRODUCTOS
========================================================= */

.product-line-grid {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;

  background: #fff;
  border-radius: 16px;
  padding: 12px 20px;
  margin-bottom: -15px;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.12),
    0 4px 10px rgba(0,0,0,0.06);

  transition: all 0.25s ease;
}

.product-line-grid:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.15),
    0 6px 12px rgba(0,0,0,0.08);
    opacity: 1;
}

/* imagen */
.cart-img {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-img img {
  width: 75px;
  height: 75px;
  object-fit: contain;
  border-radius: 12px;
  background: #f5f5f5;
}

/* ID producto */
.cart-id {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  background: #f3f3f3;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}

/* info */
.cart-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* título */
.cart-title {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  text-decoration: none;
}

/* compatibilidad */
.cart-compat {
  font-size: 13px;
  color: #666;
}

/* atributos */
.cart-attr {
  font-size: 12px;
  color: #777;
}

/* precio */
.cart-price {
  font-size: 22px;
  font-weight: 900;
  color: #000;
  white-space: nowrap;
  margin-right: 10px;
}

/* eliminar */
.cart-remove {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f1f1;
  border-radius: 50%;
  font-size: 18px;
  color: #666;
  text-decoration: none;
  transition: all 0.25s ease;
  opacity: 0.6;
}

.cart-remove:hover {
  background: #ff3b3b;
  color: #fff;
  transform: scale(1.08);
}

/* =========================================================
   ESTRUCTURA / FIXES PRESTASHOP
========================================================= */

/* eliminar contenedor duplicado interno */
.cart-grid-body > .cart-container {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* card principal */
.card.cart-container {
  background: #ffffff;
  border-radius: 18px;
  padding: 25px;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.12);
}

/* eliminar separator del theme */
.cart-grid-body hr.separator {
  display: none !important;
}

/* =========================================================
   TITULO GLOBAL
========================================================= */

/* ocultar título original */
#main h1,
.page-title {
  display: none !important;
}

/* nuevo título */
body#cart #main::before {
  content: "MI CARRITO";
  display: block;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.5px;

  margin: 30px auto 20px auto;
  max-width: 1200px;
  padding-left: 320px;

  color: #111;
  text-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 🔥 eliminar padding interno que genera espacio fantasma */
.cart-grid-body .card-block {
  padding: 0 !important;
}

/* 🔽 BAJAR TODO EL CONTENIDO DEL CARRITO */
#main {
  margin-top: 60px;
}

/* CONTENEDOR REAL DEL CARRITO (IZQUIERDA) */
.cart-grid-body .card.cart-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  z-index: -1;

  background: linear-gradient(
    180deg,
    rgba(212,175,55,0.12),
    transparent 60%
  );

  filter: blur(2px);
}

.cart-grid-body .cart-overview {
  padding-top: 0 !important;
}

.cart-summary {
  background: #fff;
  border-radius: 20px;
  margin-left: 10px;
  padding: 9px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  border: 5px solid #eee;
}

.cart-summary-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px; /* 🔥 igual que MI CARRITO */
  font-weight: 800;
  letter-spacing: 0.5px;

  color: #111;
  text-shadow: 0 2px 8px rgba(0,0,0,0.08);

  margin-bottom: 15px;
  margin-left: 80px; /* micro ajuste fino */
}

.cart-grid-right {
  padding-left: 30px;
  margin-top: -42px;
}

/* =========================================================
   BOTÓN FINALIZAR COMPRA (PRO)
========================================================= */

.checkout.cart-detailed-actions .btn-outline {
  width: 100%;
  display: block;
  letter-spacing: 2px;
  animation: pulseButton 2.5s infinite;

  background: linear-gradient(135deg, #34c759, #28a745);
  color: #fff !important;

  border: none;
  border-radius: 12px;

  font-size: 16px;
  font-weight: 700;

  padding: 14px 18px;

  text-align: center;

  box-shadow: 0 8px 20px rgba(40, 167, 69, 0.25);

  transition: all 0.25s ease;
}

.checkout.cart-detailed-actions .btn-outline:hover {
  transform: translateY(-2px) scale(1.01);

  box-shadow: 0 12px 25px rgba(40, 167, 69, 0.35);

  background: linear-gradient(135deg, #2fbf55, #23913b);
}

.checkout.cart-detailed-actions .btn-outline:active {
  transform: scale(0.98);
}

.checkout.cart-detailed-actions .btn-outline::after {
  content: " →";
  margin-left: 5px;
  transition: margin-left 0.2s ease;
}

.checkout.cart-detailed-actions .btn-outline:hover::after {
  margin-left: 10px;
}

@keyframes pulseButton {
  0% {
    transform: scale(1);
    box-shadow: 0 8px 20px rgba(40, 167, 69, 0.25);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 12px 30px rgba(40, 167, 69, 0.45);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 8px 20px rgba(40, 167, 69, 0.25);
  }
}

.checkout.cart-detailed-actions .btn-outline {
  position: relative;
  overflow: hidden;
}

.checkout.cart-detailed-actions .btn-outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transform: skewX(-20deg);
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}

.checkout.cart-detailed-actions .btn-outline::before {
  animation: shine 3s infinite;
}

.checkout.cart-detailed-actions .btn-outline:active {
  transform: scale(0.96);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.checkout.cart-detailed-actions .btn-outline {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 🔥 ELIMINAR ESPACIO SUPERIOR FANTASMA EN LISTADO */

#content-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* contenedor interno */
#main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* el bloque azul */
#js-product-list-top {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================
   REPUESTOS DISPONIBLES – SOLO EN PRODUCTOS (FIX REAL)
========================================= */

/* ocultar por defecto */
#js-product-list-top {
  display: none !important;
}

/* mostrar SOLO cuando hay productos */
body:has(.product_list) #js-product-list-top {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 55px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* texto */
body:has(.product_list) #js-product-list-top::before {
  content: "Repuestos Disponibles";
  font-size: 18px;
  font-weight: 600;
  color: #25D366;
  letter-spacing: 1px;
}

#wrapper .breadcrumb li a {
    display: inline-block;
    height: 48px;              /* respetamos altura del tema */
    line-height: 48px;         /* mantenemos flujo original */
    padding: 0 6px;
}

.breadcrumb .home-icon {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    transform: translateY(-2px); /* ajuste fino */
}

/* TOTAL DESTACADO */
.cart-summary .value {
  font-size: 15px;
  color: #333;
}

/* línea TOTAL */
.cart-summary .cart-total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e5e5;
}

/* precio TOTAL */
.cart-summary .cart-total .value {
  font-size: 15px;
  font-weight: 900;
  color: #000;
}

/* =========================
   PRODUCTOS (texto corto)
========================= */

#cart-subtotal-products .label {
  font-size: 0;
}

#cart-subtotal-products .label::before {
  content: "Cantidad de Productos";
  font-size: 14px;
  margin-right: 6px;
  color: #555;
}

/* =========================
   PAGINA GARANTIA COMPACTA
========================= */

#content h2 {
  font-size: 22px;
  margin-bottom: 10px;
}

#content h3 {
  font-size: 15px;
  margin-top: 15px;
  margin-bottom: 5px;
  color: #222;
}

#content p {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 8px;
  color: #555;
}

#content ul {
  margin-bottom: 10px;
  padding-left: 18px;
}

#content li {
  font-size: 13px;
  margin-bottom: 4px;
}

/* quitar aire innecesario */
#content {
  padding-top: 10px;
}

/* ocultar bloque de confianza original prestashop */
#block-reassurance,
.ps-reassurance,
.block-reassurance,
.ps_customer_reassurance,
[class*="reassurance"] {
  display: none !important;
}

/* contenedor */
.cart-trust {
  display: flex;
  align-items: center; /* centra los items */
  gap: 0px;
  margin-top: 3px;
}

/* cada item */
.trust-item {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: center; /* centra contenido interno */
  text-align: center;

  font-size: 14px;
  font-weight: 500;
  color: #777;
  text-decoration: none;

  padding: 8px 10px;
  border-radius: 8px;

  transition: all 0.2s ease;
}

/* hover suave */
.trust-item:hover {
  background: #f5f5f5;
}

/* iconos */
.trust-item .icon {
  font-size: 16px;
  color: #16a34a; /* verde confianza */
  font-weight: bold;
  opacity: 0.7;
  width: 20px;
  text-align: center;
}

.checkout-note {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}

#wrapper .row {
    margin-left: -15px;
    margin-right: -15px;
}

.cart-container .cart-overview,
.cart-container .cart-items {
  width: 100%;
}

.cart-container .cart-items {
  padding: 0 !important;
  margin: 0 !important;
}

.cart-item {
  width: 100%;
}

body#checkout .header-nav .bottomnav .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.checkout-title {
  font-size: 23px;
  font-weight: 600;
  padding-left: 280px;
  margin: -20px 0 30px 0;
  letter-spacing: 0.5px;
}

body#checkout .header-top {
  margin-bottom: 0;
}

/* =====================================================
   CHECKOUT STEPS – DISEÑO LIMPIO PRO MEGAREP
===================================================== */

/* CENTRADO */
body#checkout section.checkout-step .step-title {
  text-align: center;
}

/* =====================================================
   ESTADOS VISUALES STEPS (PRO UX)
===================================================== */

/* BASE = PENDIENTE (ROJO) */
body#checkout .step-number {
  width: 42px;
  height: 42px;
  line-height: 42px;
  border-radius: 50%;
  display: inline-block;
  background: linear-gradient(135deg, #ff4d4d, #cc0000);
  color: #fff;
  font-weight: bold;
  margin-bottom: 6px;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 rgba(255,0,0,0);
}

/* =====================================================
   ESTADOS VISUALES STEPS (FORZADO)
===================================================== */

/* 🔴 BASE = PENDIENTE */
body#checkout section.checkout-step .step-number {
  background: linear-gradient(135deg, #ff4d4d, #cc0000) !important;
  color: #fff !important;
}

/* 🟡 ACTUAL */
body#checkout section.checkout-step.js-current-step .step-number {
  background: linear-gradient(135deg, #ffcc00, #ff9900) !important;
  color: #000 !important;
  box-shadow: 0 0 14px rgba(255, 204, 0, 0.9);
  transform: scale(1.15);
}

/* 🟢 COMPLETADO */
body#checkout section.checkout-step.-complete .step-number {
  background: linear-gradient(135deg, #00c853, #009624) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(0,200,83,0.6);
}

/* =====================================================
   ANIMACIONES (se mantienen)
===================================================== */

body#checkout section.checkout-step:not(.js-current-step):not(.-complete) .step-number {
  animation: pulseRed 2s infinite;
}

body#checkout section.checkout-step.js-current-step .step-number {
  animation: pulseYellow 1.6s infinite;
}

@keyframes pulseRed {
  0%,100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes pulseYellow {
  0%,100% { transform: scale(1.15); }
  50% { transform: scale(1.22); }
}

/* =====================================================
   LÍNEA CONTINUA REAL (UNA SOLA)
===================================================== */

body#checkout .checkout-steps {
  position: relative;
}

/* línea base */
body#checkout .checkout-steps::before {
  content: '';
  position: absolute;
  top: 21px;
  left: 12.5%;
  width: 75%;
  height: 3px;
  background: #e0e0e0;
  z-index: 0;
}

/* progreso */
body#checkout .checkout-steps::after {
  content: '';
  position: absolute;
  top: 21px;
  left: 12.5%;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #ffcc00, #ff9900);
  z-index: 1;
  transition: width 0.4s ease;
}

/* progreso dinámico */
body#checkout .checkout-steps.step-1::after { width: 0%; }
body#checkout .checkout-steps.step-2::after { width: 33%; }
body#checkout .checkout-steps.step-3::after { width: 66%; }
body#checkout .checkout-steps.step-4::after { width: 100%; }

/* =====================================================
   🔥 IMPORTANTE: ELIMINAR LÍNEAS VIEJAS
===================================================== */

body#checkout .checkout-step::after {
  display: none !important;
}

/* =========================================
   HALO PREMIUM PASO ACTUAL
========================================= */

body#checkout section.checkout-step.js-current-step .step-number {
  position: relative;
  z-index: 2;
}

/* halo externo */
body#checkout section.checkout-step.js-current-step .step-number::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,204,0,0.5), transparent 70%);
  z-index: -1;
  animation: haloPulse 2s ease-in-out infinite;
}

@keyframes haloPulse {
  0%,100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.2;
  }
}

/* =========================================
   ESPACIO PARA EVITAR QUE EL CÍRCULO TAPE TEXTO
========================================= */

body#checkout section.checkout-step {
  padding-top: 12px;
}

body#checkout .step-title {
  margin-top: 10px;
}

/* =========================================
   CHECKOUT – RESUMEN
========================================= */

body#checkout #js-checkout-summary {
  background: #fff;
  border-radius: 40px;
  padding: 8px;
  border: 1px solid #eaeaea;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.25;
  max-width: 320px;
  margin-left: auto;
  position: relative;
}

/* título */
body#checkout #js-checkout-summary::before {
  content: "RESUMEN DE COMPRA";
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  text-align: center;
  font-weight: 700;
  margin: 4px 0 0;
  color: #111;
  letter-spacing: 0.5px;
}

/* filas */
body#checkout #js-checkout-summary .cart-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

/* textos */
body#checkout #js-checkout-summary .label { color: #777; }
body#checkout #js-checkout-summary .value { font-weight: 700; color: #111; }

/* total */
body#checkout #js-checkout-summary .cart-total {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #e5e5e5;
  text-align: center;
}

body#checkout #js-checkout-summary .cart-total .value {
  font-size: 17px;
}

/* links */
body#checkout #js-checkout-summary a {
  font-size: 13px;
  font-weight: 600;
  color: #16a34a;
}

/* limpiar extras (lo dejas igual) */
body#checkout #js-checkout-summary .card-block::after {
  content: none !important;
}

/* ❌ ocultar SOLO en checkout */
body#checkout #cart-subtotal-products {
  display: none !important;
}

/* ✅ mostrar SOLO en carrito */
body#cart #cart-subtotal-products {
  display: block !important;
}

/* productos resumen */
body#checkout #js-checkout-summary .cart-summary-products {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #000;
}

body#checkout #js-checkout-summary .cart-summary-products p {
  display: inline;
  margin: 0;
}

body#checkout #js-checkout-summary .cart-summary-products p:empty {
  display: none;
}

body#checkout #js-checkout-summary .cart-summary-products::before {
  content: "Cantidad de productos: ";
  font-weight: 600;
}

body#checkout #js-checkout-summary .cart-summary-products a {
  display: block;
  margin-top: 4px;
}

/* =========================================
   ENVÍOS
========================================= */

.delivery-options {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.delivery-option {
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #fff;
  padding: 10px 14px; /* 🔥 más compacto */
  cursor: pointer;
  transition: all 0.2s ease;

  display: flex;
  align-items: center; /* 🔥 centra verticalmente TODO */
}

.delivery-option:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-color: #ddd;
}

.delivery-option.selected {
  border: 2px solid #28a745;
  background: #f6fff8;
}

.delivery-option-2 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

.delivery-option input[type="radio"] {
  margin-right: 12px;
  align-self: center;
}

.delivery-option .carrier-name { font-size: 15px; font-weight: 600; }
.delivery-option .carrier-delay { font-size: 13px; color: #666; }
.delivery-option .carrier-price { font-weight: 700; font-size: 14px; color: #111; }

.delivery-option .carrier-logo img {
  max-height: 40px;
  object-fit: contain;
}

.delivery-option input:checked + span { border-color: #28a745; }

@media (max-width: 768px) {
  .delivery-option-2 {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* =========================================
   LOADING
========================================= */

.checkout-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.checkout-loading-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.checkout-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #ddd;
  border-top: 3px solid #28a745;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-bottom: 8px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.checkout-loading-text {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

/* =========================================
   FORMULARIOS
========================================= */

.form-control {
  height: 48px !important;
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid #ddd;
  padding: 0 14px;
}

.form-control:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 2px rgba(40,167,69,0.1);
}

.form-group { margin-bottom: 20px; }
.form-control-comment { display: none !important; }

.input-group { position: relative; }
.input-group .btn,
.input-group .btn-secondary { display: none !important; }

.js-visible-password { padding-right: 45px !important; }

/* password toggle (UNIFICADO) */
.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  z-index: 10;
  color: #666;
}

/* =========================================
   BOTONES
========================================= */

.btn-continue,
button.continue {
  width: 100%;
  height: 50px;
  font-size: 16px;
  border-radius: 8px;
}

/* =========================================
   TARJETA CHECKOUT (UNIFICADA)
========================================= */

.checkout-card {
  max-width: 650px;
  margin: 0 auto;
  background: #fff;
  padding: 30px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.05);
  position: relative;
  transition: all 0.3s ease;

  box-shadow:
    0 2px 6px rgba(0,0,0,0.05),
    0 12px 30px rgba(0,0,0,0.12),
    0 25px 60px rgba(0,0,0,0.08);
}

.checkout-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), transparent 40%);
  opacity: 0.5;
}

.checkout-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.08),
    0 18px 45px rgba(0,0,0,0.18),
    0 35px 80px rgba(0,0,0,0.12);
}

/* =========================================
   FIX FONDO CHECKOUT
========================================= */

body#checkout section.checkout-step,
body#checkout section.checkout-step .content,
body#checkout section.checkout-step .content .card,
body#checkout .card-block {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* =========================================
   DIRECCIONES – TARJETA (CLON PASO 1)
========================================= */

#checkout-addresses-step .content {
  max-width: 650px;
  margin: 0 auto;
}

#checkout-addresses-step form {
  background: #fff;
  border-radius: 18px;
  padding: 30px;

  box-shadow:
    0 2px 6px rgba(0,0,0,0.05),
    0 12px 30px rgba(0,0,0,0.12),
    0 25px 60px rgba(0,0,0,0.08);

  border: 1px solid rgba(0,0,0,0.05);
}

#checkout-addresses-step .form-control,
#checkout-addresses-step select {
  height: 48px !important;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 15px;
  padding: 0 14px;
}

#checkout-addresses-step .form-control:focus,
#checkout-addresses-step select:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 2px rgba(40,167,69,0.1);
}

#checkout-addresses-step .form-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

#checkout-addresses-step button[type="submit"] {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  font-size: 16px;
  margin-top: 10px;
}

#checkout-addresses-step .js-address-form p {
  display: none !important;
}

#checkout-addresses-step form::before {
  content: "Información para generar despacho";
  display: block;
  text-align: center;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  color: #111;

  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

#checkout-addresses-step .form-group label {
  width: 180px;
  min-width: 180px;
}

#checkout-addresses-step .form-group .form-control,
#checkout-addresses-step .form-group select {
  flex: 1;
}

/* Campo Dirección principal */
#checkout-addresses-step input[name="address1"] + label,
#checkout-addresses-step label[for="field-address1"] {
  font-size: 0;
}

#checkout-addresses-step input[name="address1"] + label::after,
#checkout-addresses-step label[for="field-address1"]::after {
  content: "Nombre Calle/Avenida/Pje";
  font-size: 13px;
  color: #555;
}

/* Campo Dirección secundaria */
#checkout-addresses-step input[name="address2"] + label,
#checkout-addresses-step label[for="field-address2"] {
  font-size: 0;
}

#checkout-addresses-step input[name="address2"] + label::after,
#checkout-addresses-step label[for="field-address2"]::after {
  content: "Depto, casa, oficina u otra referencia";
  font-size: 13px;
  color: #555;
}

#checkout-addresses-step .form-group:nth-of-type(7) {
  display: none !important;
}

.phone-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  height: 48px;
  background: #fff;
}

.phone-prefix {
  background: #f5f5f5;
  padding: 0 12px;
  font-size: 14px;
  color: #555;
  border-right: 1px solid #ddd;
  height: 100%;
  display: flex;
  align-items: center;
}

.phone-wrapper input {
  border: none !important;
  height: 100%;
  flex: 1;
  padding-left: 12px;
}

.phone-wrapper input:focus {
  outline: none;
  box-shadow: none;
}

#use_same_address {
  margin-right: 6px;
}

#use_same_address + label {
  display: inline !important;
  width: auto !important;
  white-space: nowrap !important;
}

/* 🔥 TÍTULO FACTURACIÓN – FIX REAL */
#checkout-addresses-step h2.h4 {
  text-align: center !important;
  width: 100% !important;
  display: block !important;

  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin: 20px 0 10px 0;
}

/* 🔒 Ocultar visualmente direcciones NO seleccionadas SIN romper JS */
.address-item:not(.selected) {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 🔥 CENTRAR BLOQUES DE DIRECCIONES */
#delivery-addresses,
#invoice-addresses {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* cada tarjeta */
#delivery-addresses .address-item,
#invoice-addresses .address-item {
  max-width: 420px;
  width: 100%;
}

/* 🔥 TARJETAS DIRECCIÓN – ESTILO 3D PRO */
#delivery-addresses .address-item,
#invoice-addresses .address-item {
  border-radius: 16px;
  background: #fff;

  border: 1px solid rgba(0,0,0,0.06);

  box-shadow:
    0 4px 10px rgba(0,0,0,0.06),
    0 12px 25px rgba(0,0,0,0.08);

  transition: all 0.25s ease;
  overflow: hidden;
}

/* ✨ hover suave */
#delivery-addresses .address-item:hover,
#invoice-addresses .address-item:hover {
  transform: translateY(-4px);

  box-shadow:
    0 8px 18px rgba(0,0,0,0.10),
    0 20px 40px rgba(0,0,0,0.12);
}

/* ✅ seleccionada (la importante) */
#delivery-addresses .address-item.selected,
#invoice-addresses .address-item.selected {
  border: 2px solid #28a745;

  box-shadow:
    0 6px 16px rgba(40,167,69,0.25),
    0 12px 30px rgba(0,0,0,0.10);
}

#checkout-delivery-step .delivery-options::before {
  content: "Selecciona tu método de envío preferido";
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 25px;
  color: #111;
  letter-spacing: 0.3px;
}

/* 3. Alinear las columnas internas del nombre, logo y precio */
.delivery-option-2 .row {
    width: 100%;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important; /* Quitar márgenes negativos de Bootstrap que causan desborde */
}

/* 4. Asegurar que el logo tenga un espacio y tamaño consistente */
.carrier-hasLogo img {
    max-width: 80px !important;
    height: auto !important;
    display: inline-block;
}

/* 5. Ajustar los textos de descripción para que no se encimen */
.carrier-delay {
    display: block;
    margin: 0 !important;
    padding-left: 10px;
}

/* 6. Empujar el precio al extremo derecho */
.delivery-option-2 .col-sm-3 {
    text-align: right !important;
    margin-left: auto;
}

/* --- 1. BLOQUE CUENTA OPCIONAL COMPACTO --- */
#customer-form div.optional-account {
    background-color: #fcfcfc;
    border-radius: 10px;
    /* Reducimos el padding inferior de 15px a 5px */
    padding: 15px 20px 5px 20px !important; 
    margin-top: 20px;
    margin-bottom: 2px;
    border: 1px solid #e9e9e9;
    border-left: 4px solid #28a745; 
    box-shadow: 2px 4px 12px rgba(0,0,0,0.03);
    transition: all 0.3s ease !important;
}

#customer-form .optional-account .optional-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px !important;
}

#customer-form .optional-account .optional-text {
    font-size: 0.8rem;
    color: #888;
    line-height: 1.3;
    margin-bottom: 12px !important;
}

/* --- Overlay de Carga con Logo Megarep --- */
#custom-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9); /* Fondo blanco casi opaco para enfoque total */
    display: none; /* Se activa vía JS */
    justify-content: center;
    align-items: center;
    z-index: 9999999;
    flex-direction: column;
}

.loader-container {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* El círculo verde que gira */
.loader-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px solid #f0f0f0;
    border-top: 5px solid #28a745; /* Tu verde de marca */
    border-radius: 50%;
    animation: spin-loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Tu Logo Megarep centrado */
.loader-logo {
    width: 110px; /* Tamaño ajustado para que quepa en el círculo */
    height: auto;
    z-index: 10;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.1));
}

@keyframes spin-loader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader-text {
    margin-top: 25px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* --- AJUSTE PARA STARKEN (ID 177) --- */
label[for="delivery_option_177"] .carrier-price {
    font-size: 0 !important;
}
label[for="delivery_option_177"] .carrier-price::after {
    content: "Costo por Definir" !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* --- AJUSTE PARA RETIRO (ID 136) --- */
label[for="delivery_option_136"] .carrier-price {
    font-size: 0 !important;
}
label[for="delivery_option_136"] .carrier-price::after {
    content: "Sin Costo" !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Oculta el resumen original hasta que el JS le ponga la clase 'ready' */
#cart-subtotal-shipping:not(.ready) {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 🔹 Estilo tipo checkout */
body#cart #cart-subtotal-products {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 6px 0 !important;
  margin: 0 !important;
}

/* label */
body#cart #cart-subtotal-products .label {
  font-weight: 500;
  color: #444;
}

/* valor con icono */
body#cart #cart-subtotal-products .value::before {
  content: "🛒 ";
  margin-right: 4px;
}

/* 🔥 quitar espacio vertical innecesario */
body#cart .cart-summary-line {
  margin-bottom: 2px !important;
  padding: 0 !important;
}

/* 🔥 compactar bloque completo */
body#cart .card-block.cart-detailed-subtotals {
  padding: 2px 2px !important;
}

/* ===== CONTENEDOR ===== */
#checkout-payment-step .payment-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 350px;
  margin: 0 auto;
  perspective: 1200px;
}

/* ===== TARJETAS ===== */
#checkout-payment-step .payment-option {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex !important;
  align-items: center;
  cursor: pointer;
  background: #fff;
  position: relative;

  /* 3D BASE */
  transform: perspective(1000px) translateY(-4px) scale(1.02) rotateX(1deg);
  box-shadow: 
    0 12px 25px rgba(0,0,0,0.10),
    0 4px 10px rgba(0,0,0,0.06);

  transition: all 0.25s ease;
}

/* ===== HOVER ===== */
#checkout-payment-step .payment-option:hover {
  border-color: #22c55e;
  transform: perspective(1000px) translateY(-8px) scale(1.03) rotateX(2deg);
  box-shadow: 
    0 20px 40px rgba(0,0,0,0.15),
    0 8px 20px rgba(0,0,0,0.10);
}

/* ===== SELECCIONADO ===== */
#checkout-payment-step .payment-option.selected {
  transform: perspective(1000px) translateY(-6px) scale(1.03) rotateX(1.5deg);
  box-shadow: 
    0 20px 45px rgba(34,197,94,0.25),
    0 10px 25px rgba(0,0,0,0.12);
  border: 2px solid #22c55e;
  background: #f0fdf4;
}

/* ===== EFECTO BRILLO ===== */
#checkout-payment-step .payment-option::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(255,255,255,0.4), transparent);
  opacity: 0.4;
  pointer-events: none;
}

/* ===== RADIO ===== */
#checkout-payment-step .payment-option input[type="radio"] {
  margin-right: 18px;
  transform: scale(1.2);
}

/* ===== LABEL ===== */
#checkout-payment-step .payment-option label {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  cursor: pointer;
}

/* ===== TEXTOS ===== */
#checkout-payment-step .payment-option .payment-option-title {
  font-weight: 600;
  font-size: 16px;
  color: #111;
}

#checkout-payment-step .payment-option .payment-option-description {
  font-size: 13px;
  color: #666;
}

/* Solo mostrar el título cuando el paso de pago tiene la clase 'js-current-step' (es decir, está activo) */
#checkout-payment-step.js-current-step::before {
  content: "Selecciona tu método de pago preferido";
  display: block;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: #414141; /* Ajusta el color si es necesario */
}

/* Por seguridad, ocultarlo si el paso no está activo */
#checkout-payment-step:not(.js-current-step)::before {
  content: none;
  display: none;
}

.starken-info-msg {
    width: 100% !important;
    /* Amarillo crema muy suave */
    background-color: #fffdf5 !important; 
    border: 1px solid #f9eeba !important;
    border-top: none !important; /* Quita el borde superior para que se una a la tarjeta */
    color: #7d6a2e !important;
    padding: 12px 20px !important;
    
    /* Pegado a la tarjeta de arriba */
    margin: -5px 0 20px 0 !important; 
    
    /* Bordes redondeados solo abajo para dar efecto de continuidad */
    border-radius: 0 0 8px 8px !important; 
    
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    display: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important;
}

/* Opcional: un poquito de estilo al texto 'Nota:' */
.starken-info-msg strong {
    color: #b38f00 !important;
}

/* 1. Hacer que toda la tarjeta parezca clickeable */
#checkout-payment-step .payment-option {
    cursor: pointer !important;
    position: relative;
    transition: all 0.2s ease-in-out !important;
}

/* 1. ELIMINAR PESTAÑEO: Ocultar hasta que el diseño esté aplicado */
#checkout-payment-step .payment-options:not(.diseno-listo) {
    opacity: 0 !important;
}

#checkout-payment-step .payment-options {
    display: block !important;
    opacity: 1;
    transition: opacity 0.3s ease-in; /* Aparece suavemente una vez ordenado */
}

/* 2. Mercado Pago: Estilos visuales */
#checkout-payment-step .payment-option.es-mercadopago {
    border: 2px solid #009ee3 !important;
    background-color: #f0faff !important;
    margin-top: 10px !important;
}

/* 3. Estilo base de tarjetas */
#checkout-payment-step .payment-option {
    position: relative;
    margin-bottom: 15px !important;
    padding: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    clear: both;
}

/* 4. Ocultar basura (Botones "Escoger", textos largos y saltos) */
#checkout-payment-step .payment-option button,
#checkout-payment-step .payment-option .additional-information,
#checkout-payment-step .payment-option section,
#checkout-payment-step .payment-option br {
    display: none !important;
}

/* 5. Cartel RECOMENDADO */
.payment-option.es-mercadopago::after {
    content: "RECOMENDADO" !important;
    display: block !important;
    position: absolute;
    top: -12px;
    right: 15px;
    background: #009ee3 !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: bold !important;
    padding: 3px 10px !important;
    border-radius: 10px !important;
    z-index: 10 !important;
    display:none !important;
}

/* OCULTAR BLOQUE INFORMATIVO DE MERCADO PAGO */
#mp_standard_checkout .mp-frame-checkout-seven > .col-md-12:first-child,
#mp_standard_checkout .mp-title-standard-checkout {
    display: none !important;
}

/* Reducir espacios vacíos que deja el módulo */
#mp_standard_checkout .row.mp-frame-checkout-seven {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Estilo para los logos en la misma línea del texto */
.es-mercadopago .mp-payment-methods-container {
    display: inline-flex !important; /* Cambiado a inline-flex para que no salte de línea */
    vertical-align: middle !important; /* Alineación vertical con el texto */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(5px); /* Ajuste fino de posición hacia abajo */
    margin-left: 45px !important; /* Espacio pequeño respecto al nombre */
    gap: 5px !important;
    width: auto !important; /* Evita que ocupe el 100% del ancho */
}

/* Ajuste fino para los logos individuales */
.es-mercadopago .mp-payment-method-logo-container {
    margin-top: 10 !important;
    display: inline-block !important;
    line-height: 1 !important;
}

.es-mercadopago .mp-payment-method-logo-container img {
    height: 18px !important; /* Un poco más pequeño para que no rompa la línea */
    width: auto !important;
    display: block !important;
}

/* Asegurar que el formulario original no deje espacios raros ahora que movimos los logos */
#mp_standard_checkout .frame-tarjetas {
    display: none !important;
}

.es-mercadopago label {
    padding-top: 8px !important;
    display: block !important;
}

/* 1. Reducir el contenedor principal de información adicional */
#checkout-payment-step .additional-information {
    padding: 0px 0px !important; /* Reducimos el aire arriba y abajo */
    margin-top: -5px !important;  /* Lo pegamos más a la tarjeta de arriba */
    margin-bottom: 10px !important; /* Menos espacio respecto a lo que sigue */
    min-height: auto !important;   /* Evitamos que tenga una altura mínima forzada */
}

/* 2. Ajustar el contenedor interno del mensaje de Mercado Pago */
.mp-payment-methods-message-container {
    padding: 5px 0 !important;    /* Quitamos el padding interno excesivo */
    margin-bottom: 0 !important;   /* Eliminamos margen inferior */
    background: transparent !important; /* Opcional: quitar fondo para que sea más ligero */
    border: none !important;       /* Opcional: quitar borde si prefieres que flote */
}

/* 3. Compactar los párrafos de texto */
.mensaje-personalizado-mp p {
    margin: 0 0 4px 0 !important; /* Margen mínimo entre líneas de texto */
    padding: 0 !important;
    font-size: 12.5px !important; /* Un pelín más pequeño para ganar espacio */
}

.mensaje-personalizado-mp strong {
    margin-bottom: 2px !important;
}

/* ELIMINAR TEXTO REDUNDANTE DE TÉRMINOS EN MERCADO PAGO */
#mp_standard_checkout label.mp-pb-5 {
    display: none !important;
}

/* Ajuste de margen para que el botón de pago suba un poco más */
#mp_standard_checkout .col-md-12.mp-pt-15 {
    padding-top: 0 !important;
    margin-top: -10px !important;
}

/* Reducir espacio del contenedor del formulario de MP */
#mp_standard_checkout .row.mp-frame-checkout-seven {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.mp-checkout-form {
    padding-left: 0px !important;
    padding-top: 0 !important
}

/* Estilo para el mensaje de transferencia */
.mensaje-personalizado-transferencia {
    margin-left: 0px !important; /* Alineado con el texto de la tarjeta */
    padding: 0px 0 !important;
}

.mensaje-personalizado-transferencia p {
    margin-bottom: 5px !important;
    line-height: 1.4 !important;
    color: #444 !important;
    font-size: 13px !important;
}

.mensaje-personalizado-transferencia strong {
    color: #333 !important; /* Un tono oscuro neutro para transferencia */
    display: block;
    margin-bottom: 3px;
}

/* Ocultar elementos extra que a veces trae el módulo de transferencia */
#payment-option-1-additional-information dl,
#payment-option-1-additional-information .bankwire-details {
    display: none !important;
}

body#checkout .additional-information {
    margin-left: 0px;
}

/* MOSTRAR H1 SOLO EN PRODUCT PAGE */
body.page-product #main h1.product-detail-name {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* CONTENEDOR DEL LOGO */
.brand-circle {
  width: 90px;
  height: 90px;
  margin: 0 auto 15px;

  border-radius: 50%;
  background: linear-gradient(145deg, #f0f0f0, #dcdcdc);

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 
    inset 0 4px 8px rgba(0,0,0,0.15),
    0 6px 15px rgba(0,0,0,0.25);
}

/* IMAGEN DEL LOGO */
.brand-circle img {
  max-width: 65%;
  max-height: 65%;
  object-fit: contain;
  filter: contrast(1.1);
}

/* 1. CONTENEDOR PRINCIPAL */

.product-container {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-left: 20px !important;
    margin-right: 20px !important;
    align-items: flex-start !important; /* CAMBIO: Ahora no se estiran */
}

/* ========= TARJETAS PREMIUM 3D ========= */

.product-container .col-form_id-form_7207072461964572,
.product-container .col-form_id-form_21007535076883162{

width:calc(50% - 9px);
position:relative;
overflow:visible;

border-radius:24px;

/* Fondo premium */
background:
linear-gradient(
145deg,
#fafafa 0%,
#f1f1f1 45%,
#e5e5e5 100%
);

/* borde elegante */
border:1px solid rgba(255,255,255,.9);

/* profundidad REAL */
box-shadow:

/* luz superior */
inset 0 2px 2px rgba(255,255,255,.95),

/* sombra interior */
inset 0 -4px 8px rgba(0,0,0,.04),

/* sombra externa */
0 12px 30px rgba(0,0,0,.10),

/* sombra corta */
0 4px 10px rgba(0,0,0,.06);

display:flex !important;
flex-direction:column;

transition:all .28s ease;
}

/* BRILLO PREMIUM SUPERIOR */
.product-container .col-form_id-form_7207072461964572::after,
.product-container .col-form_id-form_21007535076883162::after{

content:"";
position:absolute;

top:0;
left:0;
right:0;

height:130px;

background:linear-gradient(
180deg,
rgba(255,255,255,.42) 0%,
rgba(255,255,255,.12) 50%,
rgba(255,255,255,0) 100%
);

pointer-events:none;
z-index:1;
}

/* contenido sobre el brillo */
.product-container .col-form_id-form_7207072461964572 > *,
.product-container .col-form_id-form_21007535076883162 > *{

position:relative;
z-index:2;
}

/* HOVER PREMIUM ESTABLE */

.product-container .col-form_id-form_7207072461964572:hover,
.product-container .col-form_id-form_21007535076883162:hover{

box-shadow:

inset 0 2px 2px rgba(255,255,255,.95),
inset 0 -4px 8px rgba(0,0,0,.04),

0 14px 24px rgba(0,0,0,.10),
0 4px 10px rgba(0,0,0,.06);

transition:box-shadow .25s ease;
}

/* ===== DESTELLO DIAGONAL PREMIUM INTENSO ===== */

.product-container .col-form_id-form_7207072461964572::after,
.product-container .col-form_id-form_21007535076883162::after{

content:"";
position:absolute;

top:-140%;
left:-55%;

width:85%;
height:320%;

background:linear-gradient(
115deg,

rgba(255,255,255,0) 0%,

rgba(255,255,255,.04) 18%,

rgba(255,255,255,.10) 30%,

rgba(255,255,255,.32) 42%,

rgba(255,255,255,.82) 50%,

rgba(255,255,255,.38) 58%,

rgba(255,255,255,.10) 72%,

rgba(255,255,255,.02) 82%,

rgba(255,255,255,0) 100%
);

transform:rotate(10deg);

filter:blur(8px);

mix-blend-mode:screen;

pointer-events:none;
z-index:1;

animation:luxurySweepStrong 6.5s ease-in-out infinite;
}


/* ===== MOVIMIENTO GLAMOUR ===== */

@keyframes luxurySweepStrong{

0%{
transform:
translateX(-240%)
translateY(0)
rotate(10deg);

opacity:0;
}

10%{
opacity:0;
}

22%{
opacity:1;
}

38%{
transform:
translateX(280%)
translateY(0)
rotate(10deg);

opacity:1;
}

50%{
opacity:0;
}

100%{
transform:
translateX(280%)
translateY(0)
rotate(10deg);

opacity:0;
}
}

/* OCULTAR BOTÓN TEMPORAL REFRESCAR */

button[title="Refresh"],
button[title="Refrescar"],
input[value="Refresh"],
input[value="Refrescar"],
.refresh,
.btn-refresh{

display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:0 !important;
height:0 !important;
overflow:hidden !important;
pointer-events:none !important;
}

/* ===== 2. AJUSTE DEL TÍTULO (Centrado y debajo) ===== */

.col-form_id-form_7207072461964572 h1{
margin-top:34px !important;
margin-bottom:4px !important;
text-align:center !important;
font-size:25px !important;
line-height:1.08 !important;
font-weight:600 !important;
letter-spacing:-0.2px;
text-transform:none;
color:#161616 !important;
max-width:95%;
margin-left:auto !important;
margin-right:auto !important;
font-family:
"Baskerville",
"Libre Baskerville",
"Cormorant Garamond",
"Garamond",
serif;
text-shadow:
0 1px 0 rgba(255,255,255,.7);
}

/* 5. CONTENEDOR DE IMAGEN PRINCIPAL (CENTRO) */

.product-cover{
position:relative;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(180deg,#fdfdfd 0%,#f1f1f1 100%) !important;
border-radius:22px;
padding:4px;
height:260px;
min-height:unset;
margin:0 !important;
border:3px solid #ebe4d8;
box-shadow:
inset 0 3px 8px rgba(255,255,255,.95),
inset 0 -2px 6px rgba(0,0,0,.06),
0 4px 10px rgba(0,0,0,.06);
overflow:hidden;
filter:
drop-shadow(0 8px 10px rgba(0,0,0,.22))
drop-shadow(0 18px 18px rgba(0,0,0,.12));

transform:translateZ(0);
flex-shrink:0;
}

.product-cover img{
width:auto !important;
max-width:108% !important;
height:auto !important;
max-height:245px !important;
object-fit:contain;
mix-blend-mode:multiply;
filter:
contrast(1.06)
brightness(1.01)
drop-shadow(0 10px 10px rgba(0,0,0,.12))
drop-shadow(0 18px 22px rgba(0,0,0,.08));
transition:transform .3s ease;
border-radius:20px;
position:relative;
left:-5px;
}

.images-container{
margin-bottom:0 !important;
padding-bottom:0 !important;
}

.product-cover .layer{
bottom:10px !important;
right:10px !important;
}

.col-form_id-form_7207072461964572::before{
content:"• DISPONIBLE •";
position:absolute;
top:-11px;
left:50%;
transform:translateX(-50%);
background:linear-gradient(180deg,#ffffff 0%,#d9d9d9 100%);
border-radius:14px;
padding:6px 22px;
border:2px solid rgba(0,0,0,.10);
box-shadow:
0 5px 10px rgba(0,0,0,.14),
inset 0 2px 2px rgba(255,255,255,.95),
0 0 10px rgba(255,255,255,.65);
font-size:13px;
font-weight:900;
color:#0b7a34;
letter-spacing:.5px;
z-index:20;
animation:stockGlow 2.2s ease-in-out infinite;
}

@keyframes stockGlow{

0%{
box-shadow:
0 5px 10px rgba(0,0,0,.14),
inset 0 2px 2px rgba(255,255,255,.95),
0 0 8px rgba(255,255,255,.25);
}

50%{
box-shadow:
0 5px 10px rgba(0,0,0,.14),
inset 0 2px 2px rgba(255,255,255,.95),
0 0 18px rgba(255,255,255,.95),
0 0 30px rgba(255,255,255,.45);
}

100%{
box-shadow:
0 5px 10px rgba(0,0,0,.14),
inset 0 2px 2px rgba(255,255,255,.95),
0 0 8px rgba(255,255,255,.25);
}
}

.images-container{
display:flex;
justify-content:center;
align-items:flex-start;
gap:12px;
margin:0 auto !important;
padding:0 !important;
width:fit-content;
}

#thumb-gallery{
width:64px;
display:flex;
flex-direction:column;
gap:8px;
flex-shrink:0;
padding-top:18px;
margin:0 !important;
}

.product-thumb-images{
margin:0 !important;
padding:0 !important;
min-height:auto !important;
}

#thumb-gallery .thumb-container{
width:64px;
height:64px;
border-radius:16px;
overflow:hidden;
background:linear-gradient(180deg,#f8f8f8 0%,#e7e7e7 100%);
border:2px solid #d9d9d9;
padding:2px;
box-shadow:
inset 0 2px 3px rgba(255,255,255,.95),
0 3px 6px rgba(0,0,0,.08);
transition:all .2s ease;
}

#thumb-gallery .thumb-container img{
width:100%;
height:100%;
object-fit:cover;
mix-blend-mode:multiply;
}

#thumb-gallery .thumb-container:hover{
transform:translateY(-2px);
box-shadow:
inset 0 2px 3px rgba(255,255,255,.95),
0 6px 12px rgba(0,0,0,.12);
}

#thumb-gallery img.selected{
outline:3px solid #39ff6f;
outline-offset:2px;
border-radius:14px;
box-shadow:
0 0 10px rgba(57,255,111,.95),
0 0 18px rgba(57,255,111,.75),
0 0 28px rgba(57,255,111,.45),
0 8px 16px rgba(0,0,0,.22);
position:relative;
z-index:5;
animation:thumbGlow 1.8s ease-in-out infinite;
}

@keyframes thumbGlow{

0%{
box-shadow:
0 0 8px rgba(57,255,111,.55),
0 0 14px rgba(57,255,111,.35),
0 8px 16px rgba(0,0,0,.18);
}

50%{
box-shadow:
0 0 14px rgba(57,255,111,1),
0 0 24px rgba(57,255,111,.85),
0 0 34px rgba(57,255,111,.55),
0 8px 18px rgba(0,0,0,.22);
}

100%{
box-shadow:
0 0 8px rgba(57,255,111,.55),
0 0 14px rgba(57,255,111,.35),
0 8px 16px rgba(0,0,0,.18);
}
}

.product-thumb-images,
.slick-list,
.slick-track{
height:auto !important;
min-height:unset !important;
}

/* =========================================
   MODAL ESTABLE DEFINITIVO
========================================= */

#product-modal{

    position:fixed !important;
    inset:0 !important;

    width:100vw !important;
    height:100vh !important;

    background:rgba(0,0,0,.92) !important;

    z-index:99999999 !important;

    padding:0 !important;
    margin:0 !important;

    transition:none !important;
    animation:none !important;

    transform:none !important;
    filter:none !important;
    backdrop-filter:none !important;
}

/* BOOTSTRAP SHOW */

#product-modal.show{

    display:block !important;
    opacity:1 !important;
}

/* =========================================
   FIX DEFINITIVO BOOTSTRAP MODAL
========================================= */

#product-modal.fade{
    transition:none !important;
}

#product-modal{
    display:none;
}

#product-modal.show{
    display:block !important;
}

/* =========================================
   VISIBILIDAD MODAL CORRECTA
========================================= */

#product-modal.show .modal-dialog,
#product-modal.show .modal-content,
#product-modal.show .modal-body,
#product-modal.show figure{

    opacity:1 !important;
    visibility:visible !important;
}

#product-modal.show img{

    opacity:1 !important;
    visibility:visible !important;

    display:block !important;
}

#product-modal .modal-dialog{

    width:fit-content !important;
    max-width:92vw !important;

    margin:4vh auto !important;

    pointer-events:auto !important;
}

#product-modal .modal-content{

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

    overflow:visible !important;

    display:block !important;
}

#product-modal figure{

    margin:0 auto !important;

    position:relative !important;

    display:block !important;

    text-align:center !important;
}

#product-modal .product-cover-modal {
    max-width: 90vw !important;
    max-height: 85vh !important; 
    width: auto !important;
    height: auto !important;
    border-radius: 26px;
    box-shadow: 0 25px 60px rgba(0,0,0,.55), 0 0 40px rgba(255,255,255,.06);
    background: #fff;
}

#product-modal img {
    max-width: 90vw !important;
    max-height: 85vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 26px;
    display: block;
}

/* OCULTAR DESCRIPCIÓN */

#product-modal .image-caption,
#product-modal #product-description-short{
display:none !important;
}

/* BOTÓN CERRAR */

#product-modal .close{
position:absolute;
top:-18px;
right:-18px;
width:46px;
height:46px;
border-radius:50%;
background:#ffffff;
opacity:1 !important;
box-shadow:
0 8px 18px rgba(0,0,0,.25);
z-index:20;
}

/* ASEGURAR QUE EL HEADER NO PASE POR ENCIMA */

header,
.header-nav,
.sticky-header,
.leo-megamenu,
.navbar{
z-index:1 !important;
}

/* ===== BOTÓN X MANUAL ===== */

#product-modal .modal-content::after{
content:"×";
position:absolute;
top:-18px;
right:-18px;
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,255,255,.96);
color:#111;
font-size:34px;
font-weight:300;
line-height:1;
cursor:pointer;
box-shadow:
0 10px 24px rgba(0,0,0,.25),
0 0 14px rgba(255,255,255,.25);
transition:all .25s ease;
z-index:99999;
}

#product-modal .modal-content:hover::after{
transform:rotate(90deg) scale(1.06);
}

/* ===== 1. ESTRUCTURA MAESTRA TARJETA DERECHA ===== */
.col-form_id-form_21007535076883162 {
    padding: 12px 20px 0px !important; 
    height: auto !important;
    min-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* ===== 2. DOBLE LOGO PREMIUM (ORDEN 1) ===== */
.col-form_id-form_21007535076883162 .brand-circle {
    order: 1 !important;
    position: relative;
    margin: 0 auto 10px !important;
    transform: translateX(-46px);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #fafafa 0%, #ececec 55%, #dcdcdc 100%);
    box-shadow: inset 0 3px 4px rgba(255,255,255,.95), inset 0 -4px 8px rgba(0,0,0,.08), 0 10px 18px rgba(0,0,0,.16), 0 22px 30px rgba(0,0,0,.10);
    flex-shrink: 0;
}

.col-form_id-form_21007535076883162 .brand-circle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 92px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fafafa 0%, #ececec 55%, #dcdcdc 100%);
    background-image: url("/themes/at_edmart/assets/img/Logo Inversiones Megarep Sin Fondo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
    box-shadow: inset 0 3px 4px rgba(255,255,255,.95), inset 0 -4px 8px rgba(0,0,0,.08), 0 10px 18px rgba(0,0,0,.16), 0 22px 30px rgba(0,0,0,.10);
}

.col-form_id-form_21007535076883162 .brand-circle img {
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: contrast(1.12) brightness(.98);
    opacity: .94;
    z-index: 5;
}

/* ===== 3. PRECIO INDUSTRIAL (ORDEN 2) ===== */
.col-form_id-form_21007535076883162 .product-prices {
    order: 2 !important;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -30px 0 -80px !important; /* Ajustado para que no choque con logos */
}

.col-form_id-form_21007535076883162 .current-price {
    position: relative;
    width: 250px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px 6px;
    background: url("/themes/at_edmart/assets/img/banner-metalico-precio.png") center center no-repeat;
    background-size: 100% 100%;
    filter: drop-shadow(0 3px 0 rgba(0,0,0,.38)) drop-shadow(0 10px 10px rgba(0,0,0,.28)) drop-shadow(0 2px 2px rgba(255,255,255,.20));
    transform: perspective(900px) rotateX(10deg);
}

.col-form_id-form_21007535076883162 .current-price .price,
.col-form_id-form_21007535076883162 .current-price-value {
    font-size: clamp(15px, 2vw, 38px) !important;
    font-weight: 900 !important;
    color: #f7f7f7 !important;
    font-family: "Arial Black", sans-serif;
    text-shadow: 0 1px 0 rgba(255,255,255,.18), 0 3px 4px rgba(0,0,0,0.22);
}

/* ===== 4. BLOQUE ACCIONES: CANTIDAD Y BOTÓN (ORDEN 3) - VERSIÓN FINAL IMPECABLE ===== */
.col-form_id-form_21007535076883162 .product-actions {
    order: 3 !important;
    width: 100%;
    margin-top: 0 !important;
    margin-bottom: -19px !important;
}

.col-form_id-form_21007535076883162 .product-add-to-cart {
    display: block !important;
    width: 100% !important;
    padding-top: 0 !important;
}

.col-form_id-form_21007535076883162 .product-quantity {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    margin-top: 0 !important;
    margin-bottom: -10px !important;
}

.col-form_id-form_21007535076883162 .control-label {
    font-family: 'Arial Black', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    margin: 0 0 4px 0 !important;
    text-align: center !important;
    width: 100% !important;
}

/* CONTENEDOR DEL ÓVALO */
.col-form_id-form_21007535076883162 .input-group.bootstrap-touchspin {
    width: 100px !important;
    height: 35px !important;
    background: linear-gradient(to bottom, #d8d8d8 0%, #b7b7b7 45%, #8f8f8f 100%) !important;
    border-radius: 30px !important;
    border: 2px solid #7a7a7a !important;
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.65), 0 1px 3px rgba(0,0,0,0.35) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important; /* Número izquierda, Flechas derecha */
    padding: 0 10px !important;
    align-items: center !important;
}

/* EL NÚMERO (A LA IZQUIERDA) */
.col-form_id-form_21007535076883162 #quantity_wanted {
    background: transparent !important;
    border: none !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    color: #1a1a1a !important;
    text-align: center !important;
    flex: 1 !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

/* BOTONES DE SUBIR/BAJAR (CONTENEDOR) */
.col-form_id-form_21007535076883162 .input-group-btn-vertical .btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 16px !important; /* Un poquito más altos para el 3D */
    width: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    /* Sombras más suaves y realistas */
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)) drop-shadow(0 1px 0px rgba(255,255,255,0.8)) !important;
    transition: transform 0.1s !important;
}

.col-form_id-form_21007535076883162 .input-group-btn-vertical .btn:active {
    transform: translateY(1px) !important; /* Efecto de hundido al clickear */
}

/* CREACIÓN DE TRIÁNGULOS (MÁS METALIZADOS Y MENOS NEGROS) */
.col-form_id-form_21007535076883162 .bootstrap-touchspin-up::after {
    content: "" !important;
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    /* Color gris oscuro metálico en lugar de negro puro */
    border-bottom: 9px solid #444 !important; 
    display: block !important;
}

.col-form_id-form_21007535076883162 .bootstrap-touchspin-down::after {
    content: "" !important;
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    /* Color gris oscuro metálico */
    border-top: 9px solid #444 !important;
    display: block !important;
}

/* EFECTO DE LUZ SUPERIOR EN LAS FLECHAS PARA MÁS 3D */
.col-form_id-form_21007535076883162 .bootstrap-touchspin-up::before {
    content: "" !important;
    position: absolute;
    top: 3px;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid rgba(255,255,255,0.4); /* Reflejo de luz */
    z-index: 2;
}

/* OCULTAR ICONOS ANTIGUOS */
.col-form_id-form_21007535076883162 .input-group-btn-vertical .btn i {
    display: none !important;
}

/* BOTÓN AGREGAR AL CARRITO */
.col-form_id-form_21007535076883162 .add-to-cart {
    height: 42px !important;
    padding: 0 20px !important;
    border-radius: 30px !important;
    background: linear-gradient(to bottom, #101010 0%, #1b1b1b 50%, #050505 100%) !important;
    border: 2px solid #46ffbf !important;
    color: #66ffd1 !important;
    font-family: 'Arial Black', sans-serif !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    box-shadow: 0 0 8px rgba(0,255,180,0.4) !important;
}

/* ===== 5. CHAPA METÁLICA REFERENCIA (ORDEN 4) CORREGIDA ===== */
.col-form_id-form_21007535076883162 .product-reference {
    order: 4 !important;
    position: relative;
    width: fit-content;
    min-width: 150px;
    margin: 10px auto !important;
    padding: 10px 45px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center; /* ALINEACIÓN HORIZONTAL */
    gap: 5px; /* ESPACIO UNIFORME ENTRE LABEL Y TEXTO */
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.15) 100%), linear-gradient(90deg, #888 0%, #e0e0e0 25%, #bbb 50%, #e0e0e0 75%, #888 100%);
    border: 1px solid #666;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 10px 15px rgba(0,0,0,0.2);
    z-index: 10;
}

.col-form_id-form_21007535076883162 .product-reference label,
.col-form_id-form_21007535076883162 .product-reference span {
    color: #222 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 !important; /* ELIMINA MÁRGENES QUE DESVÍAN EL TEXTO */
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-block;
}

/* ===== 6. PANTALLA TÉCNICA FRASES (ORDEN 5) ===== */
.col-form_id-form_21007535076883162 .description-short {
    order: 5 !important;
    position: relative;
    width: fit-content;
    min-width: 300px;
    margin: 5px auto !important;
    margin-bottom: 22px !important;
    padding: 8px 25px;
    border-radius: 50px;
    background: linear-gradient(180deg, #fffcf0 0%, #f4f1e0 100%);
    border: 1px solid #d1cdb8;
    box-shadow: 0 2px 0 #d1cdb8, 0 4px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
}

.col-form_id-form_21007535076883162 .description-short p { color: transparent !important; margin: 0 !important; }

.col-form_id-form_21007535076883162 .description-short::before {
    content: "";
    position: absolute;
    width: 100%;
    text-align: center;
    font-weight: 800;
    font-size: 13px;
    color: #00a884;
    animation: rotarFrases 12s infinite ease-in-out;
}

/* ===== 7. AVISO DE STOCK (ORDEN 6) ===== */
.col-form_id-form_21007535076883162 #product-availability {
    order: 6 !important;
    width: 100% !important;
    text-align: center !important;
    font-weight: 700 !important;
    margin-top: 5px !important;
    color: #666 !important;
}

/* ANIMACIÓN */
@keyframes rotarFrases {
    0%, 30% { content: "✓ Repuesto en perfecto estado"; opacity: 0; transform: translateY(5px); }
    5%, 25% { opacity: 1; transform: translateY(0); }
    32% { opacity: 0; transform: translateY(-5px); }
    35%, 63% { content: "📦 Disponible para despacho"; opacity: 0; transform: translateY(5px); }
    40%, 60% { opacity: 1; transform: translateY(0); }
    65% { opacity: 0; transform: translateY(-5px); }
    68%, 95% { content: "✈ Envíos nacionales e internacionales"; opacity: 0; transform: translateY(5px); }
    73%, 90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; }
}

/* LIMPIEZA DE ICONOS */
.col-form_id-form_21007535076883162 .add-to-cart i:first-child:not(:only-child) { display: none !important; }

/* ELIMINAR ICONO ANTIGUO */
.col-form_id-form_21007535076883162 .add-to-cart i{
display:none !important;
}

/* =========================================================
   PANEL INFERIOR PREMIUM - MEGAREP STYLE
========================================================= */

.tabs{
background:transparent !important;
border:none !important;
padding:0 !important;
margin-top:30px !important;
}


/* ===== CONTENEDOR GENERAL ===== */

.tabs .tab-content{
background:
linear-gradient(
145deg,
#f7f7f7 0%,
#efefef 50%,
#e5e5e5 100%
) !important;
border-radius:28px !important;
border:1px solid rgba(255,255,255,.9) !important;
max-width:840px !important;
box-shadow:
0 18px 40px rgba(0,0,0,.08),
inset 0 2px 2px rgba(255,255,255,.95),
inset 0 -4px 8px rgba(0,0,0,.04);
margin:auto !important;
margin-top:-23px !important;
position:relative;
overflow:hidden;
}


/* ===== DESTELLO GLAMOUR ===== */

.tabs .tab-content::before{

content:"";
position:absolute;

top:-180%;
left:-40%;

width:70%;
height:400%;

background:linear-gradient(
115deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.04) 25%,
rgba(255,255,255,.42) 50%,
rgba(255,255,255,.04) 75%,
rgba(255,255,255,0) 100%
);

filter:blur(10px);

transform:rotate(10deg);

animation:tabSweep 8s ease-in-out infinite;

pointer-events:none;
z-index:1;
}

@keyframes tabSweep{

0%{
transform:
translateX(-220%)
rotate(10deg);
opacity:0;
}

18%{
opacity:1;
}

35%{
transform:
translateX(260%)
rotate(10deg);
opacity:1;
}

50%{
opacity:0;
}

100%{
transform:
translateX(260%)
rotate(10deg);
opacity:0;
}
}


/* =========================================================
   BOTONES SUPERIORES
========================================================= */

.tabs .nav-tabs{
display:flex !important;
gap:14px !important;
border:none !important;
margin-bottom:28px !important;
}


/* ===== BOTONES ===== */

.tabs .nav-tabs .nav-link{

background:
linear-gradient(
180deg,
#fafafa 0%,
#ececec 100%
) !important;

border:none !important;

border-radius:18px 18px 0 0 !important;

padding:18px 28px !important;

font-size:18px !important;
font-weight:800 !important;

color:#3a3a3a !important;

box-shadow:
0 8px 18px rgba(0,0,0,.08),
inset 0 2px 2px rgba(255,255,255,.95);

transition:all .25s ease;
}


/* ===== BOTÓN ACTIVO ===== */

.tabs .nav-tabs .nav-link.active{

background:
linear-gradient(
180deg,
#111 0%,
#1b1b1b 100%
) !important;

color:#58ffd0 !important;

box-shadow:
0 0 18px rgba(0,255,200,.18),
0 12px 24px rgba(0,0,0,.22);

transform:translateY(-2px);
}


/* =========================================================
   PANEL DETALLES PRODUCTO
========================================================= */

#product-details{

background:
linear-gradient(
145deg,
#0d0d0d 0%,
#131313 45%,
#050505 100%
);

border-radius:26px;

padding:22px;
min-height:auto !important;
border:1px solid rgba(0,255,200,.14);

box-shadow:
0 18px 40px rgba(0,0,0,.35),
inset 0 2px 2px rgba(255,255,255,.04);

color:#fff;

position:relative;
overflow:hidden;
}


/* ===== TÍTULO ===== */

#product-details::before{

display:block;

font-size:24px;
font-weight:900;

margin-bottom:18px;

color:#58ffd0;

text-shadow:
0 0 12px rgba(0,255,200,.35);
}


/* ===== LISTA ===== */

#product-details ul{

list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:22px;
}


/* ===== ITEMS ===== */

#product-details li{

background:
linear-gradient(
180deg,
rgba(255,255,255,.03) 0%,
rgba(255,255,255,.01) 100%
);

border:1px solid rgba(255,255,255,.06);

border-radius:18px;

padding:12px 16px;

font-size:16px;
font-weight:700;

display:flex;
align-items:center;
gap:12px;
border-radius:14px;
box-shadow:
0 8px 20px rgba(0,0,0,.22);

transition:all .25s ease;
}


/* ===== HOVER ===== */

#product-details li:hover{

transform:translateX(6px);

border-color:rgba(0,255,200,.35);

box-shadow:
0 0 18px rgba(0,255,200,.14);
}


/* ===== ICONOS ===== */

#product-details li::before{

font-size:20px;
flex-shrink:0;
}


/* ICONOS INDIVIDUALES */

#product-details li:nth-child(1)::before{
content:"🛡";
}

#product-details li:nth-child(2)::before{
content:"🚘";
}

#product-details li:nth-child(3)::before{
content:"📋";
}

#product-details li:nth-child(4)::before{
content:"🚚";
}


/* =========================================================
   PANEL DESCRIPCIÓN
========================================================= */

#description{

background:
linear-gradient(
145deg,
#fdfdfd 0%,
#f3f3f3 100%
);

border-radius:26px;

padding:24px;
min-height:auto !important;
box-shadow:
inset 0 2px 2px rgba(255,255,255,.95),
0 10px 24px rgba(0,0,0,.08);

position:relative;
overflow:hidden;
}


/* ===== TÍTULO DESCRIPCIÓN ===== */

#description::before{

display:block;

font-size:24px;
font-weight:900;

margin-bottom:16px;

color:#1d1d1d;
}


/* ===== TEXTO ===== */

#description p{

font-size:13px !important;
line-height:1.7 !important;
max-width:760px;
color:#444 !important;

text-align:center;

max-width:1000px;

margin:auto;
}

.tabs .nav-tabs{
flex-direction:row-reverse !important;
}

/* CENTRAR BOTONES INFERIORES */

.tabs .nav-tabs{
display:flex !important;
justify-content:center !important;
align-items:center !important;
width:100% !important;
margin:0 auto 24px auto !important;
padding:0 !important;
}

/* TAMAÑO MÁS ELEGANTE */

.tabs .nav-tabs .nav-link{
min-width:190px !important;
height:auto !important;
min-height:48px !important;

padding:12px 20px !important;
font-size:14px !important;

border-radius:16px 16px 0 0 !important;

text-align:center !important;

display:flex !important;
align-items:center !important;
justify-content:center !important;
}

a[href="#description"]{
position:relative;
text-indent:-9999px;
overflow:hidden;
}

/* ESTADO NORMAL */
a[href="#description"]::after{
content:"INFORMACIÓN";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
text-indent:0;
color:#444;
font-size:14px;
font-weight:bold;
}

/* CUANDO ESTÁ SELECCIONADO */
a[href="#description"].active::after,
li.active a[href="#description"]::after{
color:#00ffe7;
}

/* =========================================================
   NUEVO PANEL PREMIUM DETALLES PRODUCTO
========================================================= */

#product-details{
background:linear-gradient(180deg,#f8f8f6 0%,#f3f3f1 100%);
border-radius:22px;
padding:18px;
border:1px solid rgba(0,0,0,.04);
box-shadow:
0 6px 18px rgba(0,0,0,.05),
inset 0 2px 2px rgba(255,255,255,.9);
position:relative;
overflow:hidden;
width:max-content;
max-width:100%;
margin:auto;
}

/* OCULTAR ELEMENTOS ANTIGUOS */

#product-details .product-manufacturer,
#product-details .product-reference,
#product-details .product-quantities,
#product-details .product-out-of-stock,
#product-details .product-features,
#product-details .product-condition{
display:none!important;
}

/* GRID */

.premium-details{
display:grid;
grid-template-columns:repeat(2,max-content);
justify-content:center;
gap:14px;
position:relative;
z-index:2;
}

/* TARJETAS */

.detail-card{
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:14px;
padding:14px 18px;
border-radius:18px;
width:390px;
max-width:100%;

background:
linear-gradient(
180deg,
rgba(255,255,255,.94),
rgba(250,250,248,.98)
);

border:1px solid rgba(0,0,0,.05);

box-shadow:
0 4px 12px rgba(0,0,0,.035),
inset 0 2px 2px rgba(255,255,255,.9);

transition:all .25s ease;
overflow:hidden;
min-height:100px;
}

/* HOVER */

.detail-card:hover{
transform:translateY(-2px);
box-shadow:
0 8px 18px rgba(0,0,0,.06);
}

/* ICONO */

.detail-icon{
width:58px;
height:58px;
border-radius:15px;

display:flex;
align-items:center;
justify-content:center;

font-size:24px;

background:
linear-gradient(
180deg,
#f3f7f5 0%,
#edf4f1 100%
);

border:1px solid rgba(0,0,0,.04);

box-shadow:
0 4px 10px rgba(0,0,0,.04),
inset 0 2px 2px rgba(255,255,255,.9);

position:relative;
flex-shrink:0;
}

/* LINEA GLOW */

.detail-icon::after{
content:"";
position:absolute;
bottom:-10px;
left:50%;
transform:translateX(-50%);
width:42px;
height:4px;
border-radius:20px;

background:
linear-gradient(
90deg,
transparent,
#22d7bd,
transparent
);

filter:blur(1px);
}

/* CONTENIDO */

.detail-content{
display:flex;
flex-direction:column;
justify-content:center;
}

/* TITULOS */

.detail-title{
font-size:13px;
font-weight:800;
line-height:1.35;
color:#1f1f1f;
margin-bottom:2px;
}

/* DESCRIPCION */

.detail-desc{
font-size:12px;
line-height:1.45;
color:#6d6d6d;
font-weight:500;
}

/* RESALTADOS */

.compatibilidad,
.despacho{
color:#19cdb3;
font-weight:800;
}

/* RESPONSIVE */

@media(max-width:991px){

.premium-details{
grid-template-columns:1fr;
}

.detail-card{
width:100%;
padding:12px;
gap:12px;
min-height:auto;
}

.detail-icon{
width:52px;
height:52px;
font-size:22px;
}

.detail-title{
font-size:12px;
}

.detail-desc{
font-size:10px;
}

#product-details{
padding:14px;
}
}

.estado{
color:#19cdb3;
font-weight:800;
}

.despacho{
text-transform:capitalize;
}

/* --- RESETEO TOTAL CABECERA MÓVIL (CORREGIDO) --- */
@media (max-width: 767px) {

    /* 4. AJUSTE DEL BUSCADOR, LUPA Y CÍRCULO AMARILLO */
    #header .megarep-search {
        display: flex !important;
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
        height: 25px !important; 
        margin: -12px -18px 0 5px !important; 
        background: #f2f2f2 !important;
        box-shadow: none !important;
        border-radius: 6px !important;
        position: relative !important;
        overflow: hidden !important; 
    }

    .megarep-search-input {
        flex: 1 !important;
        max-width: none !important;
        height: 100% !important;
        position: relative !important; /* Necesario para que la frase se mueva respecto a esto */
    }

    .megarep-search-input input {
        padding: 0 10px !important;
        font-size: 13px !important;
        height: 100% !important;
        background: transparent !important; /* Para ver la frase corriendo debajo */
        position: relative !important;
        z-index: 2 !important; /* Input arriba para que el clic funcione */
    }

    /* ACHICAR LUPA Y CÍRCULO AMARILLO */
    .megarep-search button {
        width: 22px !important;  
        height: 22px !important; 
        min-width: 22px !important;
        background-color: #ffed00 !important;
        font-size: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        position: relative !important;
        z-index: 3 !important;
    }

    /* 5. LOGO */
    #header .header-top .ApColumn, 
    #header [class*="col-sp-2"],
    div[id*="image_form_227099"] {
        flex: 0 0 70px !important;
        max-width: 70px !important;
        min-width: 70px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        display: flex !important;
    }

    #header .header-top .ApColumn div.block.ApImage img,
    #header img[src*="Logo"] {
        height: 38px !important; 
        width: auto !important;
        position: relative !important;
        left: 10px !important; 
        display: block !important;
        z-index: 999 !important;
    }

/* 6. RECUPERAR ANIMACIÓN DE LA FRASE (VERSIÓN LIBRE) */
    .search-placeholder {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        
        /* ELIMINAMOS 'left' y 'margin-top' con !important */
        /* Dejamos que la animación 'placeholder-marquee' tome el control */
        
        font-size: 9px !important;
        color: #999 !important;
        pointer-events: none !important;
        white-space: nowrap !important;
        z-index: 1 !important;
        
        /* Alineación vertical sin romper el motor de animación */
        transform: translateY(-50%) !important; 
    }

/* 7. AFINADO DE SUGERENCIAS (POSICIÓN Y TAMAÑOS) */

    /* Mover la barra hacia la izquierda y ajustar ancho total */
    .megarep-search-suggestions-floating {
        width: 320px !important; /* Ancho total de la caja */
        left: 20px !important;   /* <--- BAJA este número para moverla más a la IZQUIERDA */
        border-radius: 12px !important;
        overflow: hidden !important;
    }

/* 2. El contenedor de cada fila (el enlace <a>) */
    .megarep-search-suggestions-floating a {
        display: flex !important;
        align-items: center !important;
        padding: 6px 12px !important;
        gap: 10px !important;
        text-decoration: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* 3. Ajuste de la IMAGEN */
    .megarep-search-suggestions-floating a img {
        width: 38px !important;  /* <--- Tamaño ancho imagen */
        height: 38px !important; /* <--- Tamaño alto imagen */
        min-width: 38px !important;
        object-fit: contain !important;
    }

    /* 4. Contenedor del texto (el div que está al lado de la imagen) */
    .megarep-search-suggestions-floating a > div {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    /* 5. Ajuste del NOMBRE (Primer div de texto) */
    .megarep-search-suggestions-floating a > div > div:first-child {
        font-size: 10px !important;  /* <--- Tamaño letra nombre */
        font-weight: 600 !important;
        color: #333 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 6. Ajuste del PRECIO (Segundo div de texto) */
    .megarep-search-suggestions-floating a > div > div:last-child {
        font-size: 12px !important;  /* <--- Tamaño letra precio */
        font-weight: 800 !important;
        color: #000 !important;
        margin-top: 2px !important;
    }

/* --- 8. BLOQUE UNIFICADO: ICONOS + HAMBURGUESA --- */

.header-actions {
    display: flex !important;
    gap: 15px !important; /* Aumenté un poco el espacio para que quepa la hamburguesa */
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important; 
    height: 23px !important; 
    line-height: 25px !important;
    transform: scale(0.5) !important; 
    margin-top: -11px !important; 
    overflow: visible !important;
    margin-left: 35px;
}

/* Ocultar Whatsapp y Fecha */
.header-actions .header-action-item:nth-child(1), 
.header-actions .header-action-item:nth-child(4) {
    display: none !important;
}

/* --- 9. MENÚ HAMBURGUESA: BOTÓN METÁLICO 3D PRO (FLOTANTE) --- */
.header-actions::after {
    content: "" !important;
    display: inline-block !important;
    /* Aumentamos el tamaño para que luzca más */
    width: 44px !important;    
    height: 44px !important;
    
    /* 1. CUERPO METÁLICO CON DEGRADADO MÁS PROFUNDO */
    background: radial-gradient(circle at 35% 35%, #e0e0e0 0%, #8a8a8a 100%) !important;
    border-radius: 50% !important;
    
    /* 2. EFECTO FLOTANTE (SOMBRAS POTENCIADAS) */
    box-shadow: 
        /* Sombra de "Vuelo" (hace que parezca que flota más alto) */
        0 8px 12px rgba(0,0,0,0.4),                
        /* Brillo de borde superior (luz de ambiente) */
        inset 0 3px 3px rgba(255,255,255,0.9),    
        /* Sombra de profundidad interna */
        inset 0 -3px 5px rgba(0,0,0,0.3),         
        /* El anillo metálico exterior */
        0 0 0 2px #777 !important;             

    /* 3. ICONO INTERNO (AJUSTADO AL NUEVO TAMAÑO) */
    background-image: 
        radial-gradient(circle, #222 50%, transparent 55%),
        radial-gradient(circle, #222 50%, transparent 55%),
        radial-gradient(circle, #222 50%, transparent 55%),
        linear-gradient(#222, #222),
        linear-gradient(#222, #222),
        linear-gradient(#222, #222) !important;

    background-size: 
        5px 5px, 5px 5px, 5px 5px,      
        16px 3px, 16px 3px, 16px 3px !important; 
        
    background-repeat: no-repeat !important;
    
    /* Reposicionamiento para centrar en 44px */
    background-position: 
        10px 12px, 10px 20px, 10px 28px,
        18px 13px, 18px 21px, 18px 29px !important;
    
    margin-left: 15px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    margin-top: 14px;
}

/* EFECTO DE PULSACIÓN REALISTA */
.header-actions::after:active {
    /* La sombra se encoge y el botón baja (se hunde) */
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.5),
        inset 0 4px 6px rgba(0,0,0,0.4) !important;
    transform: translateY(4px) scale(0.95) !important;
}

/* --- 11. ELIMINACIÓN DEFINITIVA DE LA FRANJA BLANCA Y AJUSTE DE ALTURA --- */
@media (max-width: 767px) {
    
    /* 1. Forzamos que el contenedor de los iconos sea transparente y no corte el contenido */
    #header .header-top .block_content,
    .block.megarep-whatsapp.ApHtml .block_content {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        overflow: visible !important; /* Crucial para que se vean los textos 'MI CUENTA' */
        height: auto !important;
        min-height: 0 !important;
    }

    /* 2. Eliminamos el fondo de la fila de navegación que detectamos antes */
    .header-container nav.header-nav,
    .header-container .nav.header-nav .row.ApRow {
        background: transparent !important;
        border: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Ajuste de seguridad para el contenedor de iconos */
    .header-actions {
        margin-top: -15px !important; /* Ajusta este valor si los iconos quedan muy arriba o abajo */
        z-index: 9999 !important;
        overflow: visible !important;
    }
}

/* --- 12. AJUSTE INDIVIDUAL: MI CUENTA Y CARRITO --- */

    /* Contenedor específico de MI CUENTA */
    .megarep-account {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        overflow: visible !important;
        margin-top: 10px;
    }

    /* Imagen del icono MI CUENTA */
    .megarep-account-img {
        /* Aquí puedes ajustar el tamaño del icono de cuenta independientemente */
        width: 60px !important; 
        height: auto !important;
        margin-bottom: -8px !important;
    }

    /* Texto MI CUENTA */
    .megarep-account-label {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #1f1f1f !important;
        text-transform: uppercase !important;
        /* Forzamos una sola línea */
        white-space: nowrap !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

/* --- AJUSTE ESPECÍFICO DEL CARRITO --- */

    /* 1. Contenedor general del bloque Carrito */
    #megarepCartBtn.megarep-cart {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0px !important;
        overflow: visible !important;
        margin-top: 0px !important;
    }

    /* 2. El círculo/contenedor del icono de carrito */
    .megarep-cart-icon {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 60px !important; /* Mismo ancho que el de cuenta */
        height: 60px !important;
    }

    /* 3. La imagen del Carrito */
    .megarep-cart-icon .megarep-account-img {
        width: 46px !important; /* Un poco menos que el círculo para que respire */
        height: auto !important;
        z-index: 1 !important;
        margin: 0 !important;
    }

    /* 4. LA BURBUJA DEL CONTADOR (Círculo rojo con el número) */
    #megarepCartCount.megarep-cart-count {
        position: absolute !important;
        top: -1px !important;      /* Ajusta hacia arriba/abajo */
        right: -3px !important;    /* Ajusta hacia los lados */
        background-color: #ff0000 !important;
        color: #ffffff !important;
        font-size: 13px !important; /* Número más grande y legible */
        font-weight: 900 !important;
        min-width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid #fff !important; /* Borde blanco para que resalte */
        z-index: 10 !important;
        transform: scale(0.9) !important; /* Asegura que no se vea minúsculo */
    }

    /* 5. El texto "CARRITO" */
    #megarepCartBtn .megarep-account-label {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #1f1f1f !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        margin-top: -4px !important; /* Sube el texto para pegarlo al icono */
        text-align: center !important;
    }

/* --- 13. POPUPS LIBERADOS (LOGIN Y CARRITO) --- */
@media (max-width: 767px) {
    /* Estilo para ambos Overlays (Fondo oscuro) */
    #megarepLoginPopup.megarep-login-overlay,
    #megarepCartPopup.megarep-login-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0,0,0,0.85) !important;
        z-index: 99999999 !important;
        display: none; /* Se controla por JS (flex cuando se abre) */
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }

    /* El modal del carrito específicamente */
    #megarepCartPopup .megarep-login-modal {
        width: 90% !important;
        max-width: 350px !important;
        max-height: 80vh !important; /* Evita que se salga de la pantalla si hay muchos productos */
        overflow-y: auto !important;
        padding: 20px !important;
        background: #fff !important;
        border-radius: 20px !important;
    }

    /* Forzar visibilidad del mini-cart interno */
    #megarepCartPopup .premium-mini-cart {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    /* Ajuste del botón de cerrar para el carrito */
    #megarepCartPopup .megarep-login-close {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 999 !important;
    }
}

/* --- 14. MENÚ LATERAL REDISEÑADO 2026 (ESTILO LUXURY) --- */

/* Ocultar por seguridad en PC por si acaso */
@media (min-width: 768px) {
    #megarepSideMenu { display: none !important; }
}

@media (max-width: 767px) {
    #megarepSideMenu {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 100000000;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    #megarepSideMenu.active {
        visibility: visible;
    }

    .side-menu-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.8);
        backdrop-filter: blur(4px);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    #megarepSideMenu.active .side-menu-overlay {
        opacity: 1;
    }

    .side-menu-content {
        position: absolute;
        right: -280px;
        width: 280px;
        height: 100%;
        background: #ffffff;
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
        transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        display: flex;
        flex-direction: column;
    }

    #megarepSideMenu.active .side-menu-content {
        right: 0;
    }

    /* Cabecera con Logo 3D */
    .side-menu-header {
        background: linear-gradient(135deg, #1f1f1f 0%, #333 100%);
        padding: 45px 20px 25px;
        position: relative;
        border-bottom: 4px solid #ffed00;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .side-menu-3d-logo {
        max-width: 150px;
        height: auto;
        filter: drop-shadow(0 5px 15px rgba(0,0,0,0.9));
        transform: perspective(500px) rotateX(5deg);
    }

    .side-menu-subtitle {
        color: #ffed00;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 3px;
        margin-top: 10px;
    }

    .side-menu-close {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 32px;
        height: 32px;
        color: #fff;
        font-size: 28px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .side-menu-content nav { padding: 15px 0; }

    .side-menu-content nav a {
        display: block;
        padding: 16px 25px;
        font-size: 14px;
        font-weight: 700;
        color: #333;
        text-decoration: none !important;
        border-bottom: 1px solid #f8f8f8;
    }

    .side-menu-footer {
        margin-top: auto;
        padding: 20px;
        font-size: 10px;
        font-weight: 700;
        color: #999;
        text-align: center;
        background: #f4f4f4;
        text-transform: uppercase;
    }
}

/* --- AJUSTES DE SEGURIDAD PARA BOTONES DEL HEADER --- */
@media (max-width: 767px) {
    .header-actions {
        padding-right: 5px !important;
        overflow: visible !important;
    }

    #megarepCartBtn {
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }

    .header-actions::after {
        margin-left: 20px !important;
        pointer-events: auto !important;
    }
}
}

/* =========================================================
   AJUSTES CARRITO VISTA MÓVIL - PASO 1
========================================================= */
@media (max-width: 767px) {
    
    /* 1. Corregir el título "MI CARRITO" (Estaba desplazado 320px) */
    body#cart #main::before {
        padding-left: 0 !important; /* Quitamos el desplazamiento lateral */
        text-align: center;         /* Lo centramos */
        margin: 20px auto 10px auto;
        font-size: 15px;            /* Un poco más pequeño para móvil */
    }

    /* 2. Corregir el título "RESUMEN DE COMPRA" (Estaba desplazado 80px) */
    .cart-summary-title {
        margin-left: 0 !important;  /* Quitamos el ajuste fino que lo descentra */
        text-align: center;         /* Lo centramos */
        font-size: 15px;
        display: block;
        width: 100%;
    }

    /* 3. Bajar el contenido para que no choque con el header */
    #main {
        margin-top: 20px !important; /* Ajuste más suave para móvil */
    }

    /* 4. Quitar márgenes negativos que montan los bloques */
    .cart-grid-right {
        padding-left: 0 !important;
        margin-top: 0 !important;   /* Quitamos el -42px que subía el bloque de totales */
    }

    /* 5. Ajustar el contenedor de totales */
    .cart-summary {
        margin-left: 16px !important;
        margin-top: -10px;
        border-width: 2px !important; /* Borde más fino para que no ocupe tanto espacio */
    }

/* 6. Forzamos al contenedor principal a ser una columna */
    #cart .cart-grid {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 7. El bloque de la derecha (Resumen) lo ponemos en orden 1 */
    /* Pero le damos un margen superior para que visualmente parezca que bajó */
    .cart-grid-right {
        order: 2 !important;
        margin-top: 30px !important;
    }

    /* 8. El bloque de la izquierda (donde está el botón) lo ponemos en orden 1 */
    .cart-grid-body {
        order: 1 !important;
        display: contents !important; /* Esto rompe el contenedor y libera al botón */
    }

    /* 9. Ahora que el botón es "libre", le damos el golpe final */
    #cart a.label {
        display: block !important;
        order: 3 !important; /* Lo mandamos al tercer lugar, después del resumen */
        margin: 40px auto !important;
        width: fit-content !important;
        position: relative !important;
        clear: both !important;
    }

/* 10. Estilizar el botón REVISA para que resalte más */
    #cart .checkout.card-block .btn-primary {
        width: 100% !important;
        padding: 15px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3) !important;
        background-color: #28a745 !important; /* Un verde más vivo */
        border: none !important;
    }

    .cart-summary-line.cart-total {
        border-bottom: none !important;
        padding: 15px 5px !important;
        margin-top: 10px !important;
        margin-bottom: -10px;
    }

    /* 12. Un toque extra al botón "Seguir Comprando" que ahora está al final */
    #cart a.label {
        color: #666 !important;
        text-decoration: none !important;
        font-size: 14px !important;
        border: 1px solid #ddd !important;
        border-radius: 30px !important;
        transition: all 0.3s ease !important;
    }
}

/* =========================================================
   ORDENAR CUADROS "QUIÉNES SOMOS" (MÓVIL)
========================================================= */
@media (max-width: 767px) {

    /* 1. Forzar que la fila sea una columna vertical */
    .row.about-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 2. Hacer que cada columna ocupe el ancho completo */
    .about-grid .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        padding: 0 15px !important;
        margin-bottom: 20px !important;
    }

    /* 3. Estilizar las tarjetas (megarep-card) */
    .megarep-card {
        width: 100% !important;
        height: auto !important;
        min-height: 120px !important; /* Altura mínima uniforme */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 25px !important;
        text-align: center !important;
        border-radius: 15px !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
        background: #fff !important;
    }

    /* 4. Ajustar títulos e iconos dentro de la tarjeta */
    .megarep-card h3, 
    .megarep-card p {
        margin: 5px 0 !important;
    }

    /* 5. Ocultar o ajustar la imagen central si molesta en móvil */
    .middle-img {
        display: none !important; /* Normalmente la imagen decorativa central quita mucho espacio en móvil */
    }

/* Ajuste del texto de introducción en Quiénes Somos */
    .about-intro {
        padding: 0 20px !important;
        margin-bottom: 30px !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

/* 1. Subir todo el contenido para eliminar el espacio blanco arriba */
    .about-page {
        margin-top: -40px !important; /* Ajusta este número si quieres que suba más o menos */
    }

    /* 2. Ajuste fino al título artificial que creamos */
    .about-page::before {
        content: "Quiénes Somos" !important;
        display: block !important;
        text-align: center !important;
        font-size: 18px !important; /* Lo que ya achicaste */
        font-weight: 800 !important;
        color: #000 !important;
        margin-bottom: 20px !important;
        letter-spacing: 0.5px !important;
        border-bottom: 3px solid #ffcc00 !important;
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-bottom: 5px !important;
    }

/* =========================================================
   ORDENAR PÁGINA "ENVÍO SEGURO" (MÓVIL)
========================================================= */

    /* 1. Resetear el Grid a una sola columna centrada */
    .envio-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: -30px !important; /* Subimos un poco para matar el blanco */
    }

    /* 2. Título artificial para Envío Seguro */
    .envio-layout::before {
        content: "Envío Seguro" !important;
        display: block !important;
        text-align: center !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #000 !important;
        margin-bottom: 25px !important;
        border-bottom: 3px solid #ffcc00 !important;
        width: fit-content !important;
        padding-bottom: 5px !important;
    }

    /* 3. Ajustar las tarjetas de envío */
    .envio-layout .megarep-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* 4. Tratamiento de las imágenes intermedias */
    .envio-img {
        width: 100% !important;
        max-width: 250px !important; /* Limitamos el ancho para que no sea gigante */
        height: auto !important;
        margin: 10px auto 25px auto !important;
        display: block !important;
    }
    
    .envio-img img {
        width: 100% !important;
        height: auto !important;
        border-radius: 10px !important;
    }

    /* 5. Centrar el título de Aliados si aparece abajo */
    .aliados-titulo {
        text-align: center !important;
        margin-top: 30px !important;
        font-weight: 700 !important;
    }

.aliados-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Dos columnas iguales */
        gap: 10px !important; /* Espacio pequeño para que no choquen */
        padding: 0 10px !important;
    }

    .aliado-box {
        padding: 10px !important; /* Reducimos padding interno para ganar espacio */
    }

    .aliado-box img {
        max-width: 80% !important; /* Achicamos un poco el logo para que quepa */
    }

/* =========================================================
   ORDENAR PÁGINA "PAGO SEGURO" (MÓVIL)
========================================================= */

    /* 1. Contenedor principal: Centrado total y eliminación de aires laterales */
    #content.page-cms-5 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: -40px !important;
    }

    /* 2. Título "Pago Seguro" centrado */
    #content.page-cms-5::before {
        content: "Pago Seguro" !important;
        display: block !important;
        text-align: center !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #000 !important;
        margin: 0 auto 25px auto !important;
        border-bottom: 3px solid #ffcc00 !important;
        width: fit-content !important;
        padding-bottom: 5px !important;
    }

    /* 3. Ajuste de las 4 tarjetas superiores (Acercarlas al centro) */
    .page-cms-5 .megarep-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important; /* Espacio reducido entre cuadros */
        width: 100% !important;
    }

    .page-cms-5 .megarep-card {
        width: 85% !important; /* Menos ancho para que no toquen los bordes del móvil */
        max-width: 320px !important; /* Evita que se estiren demasiado */
        margin-bottom: 10px !important;
    }

    /* 4. Corregir la tarjeta de logos de abajo (Apegada a la derecha) */
    .megarep-paybox {
        width: 85% !important;
        margin: 20px auto !important; /* El 'auto' la centra perfectamente */
        padding: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        float: none !important; /* Por si tiene algún float que la desvíe */
    }

    .megarep-paybox img {
        max-width: 100% !important;
        height: auto !important;
    }

/* =========================================================
   ORDENAR PÁGINA "NOTICIAS" (MÓVIL - APILADO VERTICAL)
========================================================= */

    /* 1. Contenedor principal: Forzar columna y dar aire a los lados */
    #content.page-cms-9 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 15px !important; /* Margen para que no toquen los bordes del cel */
        margin-top: -40px !important;
    }

    /* 2. Título centrado */
    #content.page-cms-9::before {
        content: "Noticias" !important;
        display: block !important;
        text-align: center !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #000 !important;
        margin: 0 auto 30px auto !important;
        border-bottom: 3px solid #ffcc00 !important;
        width: fit-content !important;
        padding-bottom: 5px !important;
    }

    /* 3. FORZAR APILADO: Matar cualquier intento de ponerse de lado */
    #content.page-cms-9 .row, 
    #content.page-cms-9 .blog-list,
    #content.page-cms-9 .post-list {
        display: block !important; /* Cambiado de flex a block para asegurar el salto de línea */
        width: 100% !important;
        margin: 0 !important;
    }

    /* 4. Tarjetas de noticia: Una debajo de la otra */
    .page-cms-9 .post-item,
    .page-cms-9 article,
    .page-cms-9 .col-md-6 { /* Atacamos también las columnas de Bootstrap */
        width: 100% !important;
        display: block !important;
        float: none !important; /* Por si usan floats antiguos */
        margin-bottom: 35px !important;
        background: #fff !important;
        border-radius: 12px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
        overflow: hidden !important;
    }

    /* 5. Imágenes y Texto */
    .page-cms-9 img {
        width: 100% !important;
        height: auto !important;
    }

    .page-cms-9 .post-content {
        padding: 20px !important;
        text-align: center !important;
    }

    /* 6. BOTONES "LEER NOTICIA" LIMPIOS */
    .page-cms-9 a[style*="background:#c49a2c"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 90% !important;
        max-width: 240px !important;
        padding: 14px !important;
        background-color: #c49a2c !important;
        color: #fff !important;
        border-radius: 8px !important;
        border: none !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        margin-top: 15px !important;
    }
}

/* ============================================================
   MOBILE - FILTRO FINAL LIMPIO
   ============================================================ */
@media (max-width: 767px) {

    /* ========================================================
       BANNER
       ======================================================== */
    #home-vehicle-filter {

        position: relative !important;
        overflow: visible !important;

        height: 250px !important;
        min-height: 250px !important;

        padding: 0 !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /* ========================================================
       TITULO
       ======================================================== */
    body#index #home-vehicle-filter::before {

        content: "ENCUENTRA TU REPUESTO AQUÍ" !important;

        position: absolute !important;

        top: 88px !important;
        left: 50% !important;

        transform: translateX(-50%) !important;

        width: 100% !important;

        text-align: center !important;

        font-size: 11px !important;
        font-weight: 700 !important;

        color: #FFFFFF !important;

        z-index: 9999 !important;

        text-shadow: 0 2px 6px rgba(0,0,0,0.8);
    }

    /* ========================================================
       LIMPIAR MODULO
       ======================================================== */

    .leo-partsfilter,
    .block_content,
    #filter-type-1,
    #filter-type-1.active {

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* ========================================================
       POSICION FILTRO
       ======================================================== */
    #home-vehicle-filter .ApColumn {

        margin-top: 48px !important;

        padding: 0 !important;

        position: relative !important;

        z-index: 100 !important;
    }

    /* ========================================================
       CONTENEDOR
       ======================================================== */
    .container-filter {

        width: 72% !important;
        max-width: 240px !important;

        margin: 65px auto 0 auto !important;

        padding: 15px !important;

        background: rgba(0,0,0,0.10) !important;

        border-radius: 10px !important;
    }

    /* ========================================================
       TABLA
       ======================================================== */
    #mmy {

        width: 100% !important;

        margin: 0 !important;
    }

    /* ========================================================
       FILAS
       ======================================================== */
    #mmy tr.field-search {

        display: flex !important;

        flex-direction: column !important;

        gap: 2px !important;
    }

    /* ========================================================
       COLUMNAS
       ======================================================== */
    #mmy td.value-search {

        width: 100% !important;

        padding: 0 !important;
        margin: 0 !important;

        height: auto !important;
    }

    /* ========================================================
       SELECT2 WRAPPER
       ======================================================== */
    #mmy .select2-container {

        width: 100% !important;

        margin: 0 !important;
    }

    /* ========================================================
       SELECTS
       ======================================================== */
    #mmy .select2-selection,
    #mmy .select2-selection--single {

        height: 22px !important;
        min-height: 22px !important;

        border-radius: 14px !important;

        padding: 0 4px !important;

        margin: 0 !important;
    }

    /* ========================================================
       TEXTO
       ======================================================== */
    #mmy .select2-selection__rendered {

        height: 22px !important;
        line-height: 22px !important;

        font-size: 8px !important;
        font-weight: 600 !important;

        padding-left: 4px !important;
        padding-right: 18px !important;

        margin: 0 !important;
    }

    /* ========================================================
       FLECHA
       ======================================================== */
    #mmy .select2-selection__arrow {

        height: 22px !important;

        width: 18px !important;

        top: 0 !important;
    }

    /* ========================================================
       BOTON
       ======================================================== */
    #btn_search,
    .btn-search {

        height: 22px !important;
        min-height: 22px !important;

        line-height: 22px !important;

        border-radius: 14px !important;

        font-size: 8px !important;

        padding: 0 6px !important;

        margin-top: 2px !important;
    }
}

@media (max-width: 767px) {

    #filter-type-1 .value-search {

        flex: 0 0 auto !important;
    }
}

/* ========================================================
   CONTENEDOR (Achicado para que no ocupe toda la pantalla)
   ======================================================== */
@media (max-width: 767px) {
    .container-filter {
        width: 72% !important; /* Bajamos de 58% */
        max-width: 240px !important; /* Bajamos de 170px */
        margin: 65px auto 0 auto !important;
        padding: 15px !important;
    }

    /* ========================================================
       SELECTS (Bootstrap Select Buttons)
       ======================================================== */
    /* Este es el botón real que ves en pantalla */
    #mmy .bootstrap-select > .dropdown-toggle,
    #mmy .bootstrap-select .btn {
        height: 18px !important;
        min-height: 18px !important;
        padding: 0 8px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        line-height: 18px !important;
        background-color: #f8f9fa !important; /* Color de fondo claro */
    }

    /* Ajuste del texto interno y el icono */
    #mmy .bootstrap-select .filter-option {
        line-height: 18px !important;
        height: 18px !important;
        font-weight: 600 !important;
    }

    /* Ajuste del icono de la flechita */
    #mmy .bootstrap-select .caret {
        top: 50% !important;
        margin-top: -2px !important;
    }

    /* ========================================================
       BOTÓN DE BÚSQUEDA (Final)
       ======================================================== */
    #btn_search,
    .btn-search {
        height: 18px !important;
        min-height: 18px !important;
        line-height: 18px !important;
        font-size: 7.5px !important;
        border-radius: 12px !important;
        margin-top: 4px !important;
        padding: 0 !important;
    }

.field-search .value-search .btn-default:before {
font-size: 10px;
margin-left:-8px;
}

/* Reemplaza tu bloque final por este */
#mmy .value-search::before {
    font-size: 6px !important;
}

#filter-type-1 .value-search::before {
left:60%;
padding: 0px 5px;
}

.field-search .btn-group, .field-search .btn-group .btn-default, .leo-partsfilter .leo-partsfilter-submit .label {
    height: 35px;
}

body#index #megarep-subtitle {
    top: -25px !important ;
    font-size: 9px;
    width: auto !important;          /* Permite que el ancho crezca según el texto */
    white-space: nowrap !important;  /* Obliga a que la frase se mantenga en una sola línea */
    padding: 5px 10px !important;    /* Esto le da "margen interno" (aire) alrededor del texto */
    left: 50% !important;
    transform: translateX(-50%) !important; /* Mantiene el subtítulo centrado */
}
}

/* ========================================================
   AJUSTE DE DESPLEGABLES (DROPDOWN)
   ======================================================== */

@media (max-width: 767px) {

    /* CONTENEDOR GENERAL */
    #mmy {
        position: relative !important;
        z-index: 999999 !important;
    }

    /* MENU DESPLEGABLE */
    #mmy .bootstrap-select .dropdown-menu {
        z-index: 99999999 !important;
        min-width: 150px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
        overflow: visible !important;
        max-height: unset !important;
    }

    /* SCROLL SOLO INTERNO */
    #mmy .dropdown-menu.inner {
        max-height: 200px !important;
        overflow-y: auto !important;
    }

    /* BUSCADOR */
    #mmy .bs-searchbox input {
        height: 25px !important;
        font-size: 10px !important;
        padding: 5px !important;
    }

    /* OPCIONES */
    #mmy .dropdown-menu li a {
        padding: 4px 10px !important;
    }

    #mmy .dropdown-menu li a span.text {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

}

@media (max-width: 767px) {

    /* FILTRO ARRIBA DE TODO */
    #mmy {
        position: relative !important;
        z-index: 99999 !important;
    }

    /* BLOQUE DE MARCAS ABAJO */
    .block_content,
    .manufacturer-grid,
    .homefeatured,
    .products,
    .product_list {
        position: relative !important;
        z-index: 1 !important;
    }

.top_cate .title_block {
    font-size: 10px!important;
}

}

/* ========================================================
   GRID LOGOS MARCAS MOBILE
   ======================================================== */
@media (max-width:767px){

.ApCategoryImage .block_content{
display:grid!important;
grid-template-columns:repeat(4,1fr)!important;
gap:14px 8px!important;
padding:12px!important;
overflow:hidden!important;
}

.ApCategoryImage .block_content ul,
.ApCategoryImage .block_content li{
width:100%!important;
min-width:0!important;
margin:0!important;
padding:0!important;
}

.ApCategoryImage .block_content li{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:flex-start!important;
}

.ApCategoryImage .block_content li a{
width:100%!important;
padding:2px!important;
margin:0!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:flex-start!important;
}

.ApCategoryImage .block_content img{
max-width:48px!important;
height:48px!important;
object-fit:contain!important;
margin-bottom:6px!important;
}

.ApCategoryImage .cate_content{
font-size:10px!important;
line-height:1!important;
text-align:center!important;
margin-top:4px!important;
}

.widget-category_image {
margin-left: -15px;
margin-right: -17px;
padding: 0px 0px;
}

.ApCategoryImage .cat_name{
display:block!important;
white-space:normal!important;
max-width:58px!important;
margin:4px auto 0 auto!important;
line-height:1.15!important;
text-align:center!important;
font-size:10px!important;
font-weight:600!important;
}
}

/* ========================================================
   TARJETAS CONFIANZA MOBILE
   ======================================================== */
@media (max-width:767px){

/* todas las tarjetas ancho completo */
.col-xs-2-4{
width:100%!important;
max-width:100%!important;
flex:0 0 100%!important;
}

/* columnas */
.ApColumn{
padding-left:6px!important;
padding-right:6px!important;
margin-bottom:10px!important;
}

/* eliminar espacio entre tarjetas */
.ApColumn .block{
margin-bottom:0!important;
}

/* tarjeta */
.block.service.ApRawHtml{
padding:10px!important;
border-radius:12px!important;
transform:none!important;
min-height:auto!important;
box-shadow:0 4px 14px rgba(0,0,0,.08)!important;
display:flex!important;
align-items:center!important;
gap:8px!important;
}

/* iconos generales */
.block.service.ApRawHtml i{
font-size:22px!important;
min-width:22px!important;
}

/* bloque texto */
.block.service.ApRawHtml .content{
line-height:1.2!important;
flex:1!important;
min-width:0!important;
}

/* titulo */
.block.service.ApRawHtml .title{
font-size:12px!important;
font-weight:700!important;
line-height:1.1!important;
display:block!important;
margin:0 0 2px!important;
}

/* descripcion */
.block.service.ApRawHtml .text{
font-size:10px!important;
line-height:1.2!important;
opacity:.8!important;
display:block!important;
}

/* quitar altura extra */
.block.service.ApRawHtml:before{
display:none!important;
}

/* ========================================================
   FIX PRIMERA TARJETA
   ======================================================== */

/* icono rocket */
.icon-rocket{
font-size:18px!important;
min-width:18px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}

/* contenido primera tarjeta */
.icon-rocket + .content{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
}

/* titulo primera tarjeta */
.icon-rocket + .content .title{
font-size:11px!important;
line-height:1.05!important;
margin-bottom:1px!important;
}

/* texto primera tarjeta */
.icon-rocket + .content .text{
font-size:9px!important;
line-height:1.1!important;
}
}

/* ========================================================
   CARRUSELES LOGOS MOBILE
   ======================================================== */
@media (max-width:767px){

/* contenedor slider */
.slick-track{
display:flex!important;
align-items:center!important;
}

/* slides */
.slick-slide{
padding:4px!important;
}

/* imágenes */
.slick-slide img{
width:100%!important;
height:60px!important;
object-fit:contain!important;
border-radius:8px!important;
}

/* reducir altura general */
.slick-list{
padding:0!important;
margin:0!important;
}

/* items del carrusel */
.timeline-wrapper{
padding:0!important;
}

/* ========================================================
   FORZAR 3 ITEMS EN MOBILE
   ======================================================== */
.slick-track{
width:100%!important;
display:flex!important;
}

/* cada item ocupa 33% */
.slick-slide{
width:33.333%!important;
min-width:33.333%!important;
padding:4px!important;
box-sizing:border-box!important;
}

/* imágenes más compactas */
.slick-slide img{
height:48px!important;
object-fit:contain!important;
}
}

/* ========================================================
   ESPACIO ENTRE LOGOS Y CARRUSEL REPUESTOS
   ======================================================== */
@media (max-width:767px){

.slick-row.hide-loading{
margin-top:20px!important;
}
}

/* ========================================================
   FOOTER MOBILE FINAL
   ======================================================== */
@media (max-width:767px){

/* footer general */
#footer .footer-top{
margin-top:25px!important;
padding:25px 15px!important;
}

/* fila principal */
#footer-pre{
display:flex!important;
flex-wrap:wrap!important;
justify-content:center!important;
}

/* columnas generales */
#footer-pre .ApColumn{
width:50%!important;
max-width:50%!important;
flex:0 0 50%!important;
padding:0 10px!important;
margin-bottom:20px!important;
text-align:center!important;
}

/* primera columna logo ocupa ancho completo */
#footer-pre .ApColumn:first-child{
width:100%!important;
max-width:100%!important;
flex:0 0 100%!important;
margin-bottom:25px!important;
}

/* bloque logo */
.footer-about{
max-width:100%!important;
margin:0 auto!important;
padding:0!important;
border:none!important;
text-align:center!important;
}

/* logo */
.footer-about-logo{
max-width:140px!important;
margin:0 auto 12px!important;
display:block!important;
}

/* descripcion */
.footer-about p{
font-size:12px!important;
line-height:1.7!important;
max-width:280px!important;
margin:0 auto 10px!important;
color:#555!important;
}

/* TITULOS MENUS */
#footer .title_block,
#footer h4{
font-size:13px!important;
font-weight:700!important;
margin-bottom:10px!important;
text-align:center!important;
letter-spacing:.5px!important;
position:relative!important;
}

/* quitar flechas accordion */
#footer .title_block:after,
#footer .title_block:before{
display:none!important;
}

/* listas */
#footer ul{
display:block!important;
padding:0!important;
margin:0!important;
list-style:none!important;
}

/* items */
#footer li{
margin-bottom:4px!important;
}

/* links */
#footer li a,
#footer a{
font-size:12px!important;
line-height:1.6!important;
color:#666!important;
text-decoration:none!important;
}

/* logos pagos/envios */
.footer-logos-wrapper{
margin-top:10px!important;
padding-top:10px!important;
}

/* fila logos */
.footer-logos-wrapper .ApRow{
display:flex!important;
flex-wrap:wrap!important;
justify-content:center!important;
align-items:center!important;
gap:0px!important;
margin-top: 200px;
}

/* logos */
.footer-logos-wrapper img{
max-height:50px!important;
width:auto!important;
object-fit:contain!important;
}

/* copyright */
.footer-center,
.copyright,
#footer .copyright{
text-align:center!important;
font-size:11px!important;
line-height:1.5!important;
margin-top:12px!important;
padding-top:10px!important;
color:#777!important;
}

/* eliminar espacios raros */
#footer .ApRow.has-bg.bg-boxed{
margin-bottom:0!important;
padding-bottom:0!important;
}

}

/* ========================================================
   BAJAR SUBMENUS FOOTER MOBILE
   ======================================================== */
@media (max-width:767px){

#footer-pre .ApColumn:not(:first-child){
top:190px!important;
}

}

/* ========================================================
   TARJETAS 3D PREMIUM FOOTER
   ======================================================== */
@media (max-width:767px){

/* contenedor */
#footer-pre{
gap:10px!important;
justify-content:center!important;
}

/* tarjetas */
#footer-pre .ApColumn:not(:first-child){

/* tamaño 2x2 */
width:calc(50% - 10px)!important;
max-width:calc(50% - 10px)!important;
flex:0 0 calc(50% - 10px)!important;

/* apariencia */
background:
linear-gradient(
145deg,
#ffffff,
#f3f3f3
)!important;

border-radius:14px!important;

padding:12px 8px!important;

box-shadow:
0 10px 22px rgba(0,0,0,.10),
0 2px 6px rgba(255,255,255,.9) inset,
0 -2px 4px rgba(0,0,0,.03) inset!important;

border:1px solid rgba(255,255,255,.7)!important;

backdrop-filter:blur(6px)!important;

position:relative!important;

overflow:hidden!important;

transition:all .35s ease!important;
}

/* brillo superior */
#footer-pre .ApColumn:not(:first-child):before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:40%;

background:
linear-gradient(
180deg,
rgba(255,255,255,.55),
transparent
);

pointer-events:none;
}

/* hover flotante */
#footer-pre .ApColumn:not(:first-child):hover{
transform:
translateY(-5px)
scale(1.02)!important;

box-shadow:
0 18px 30px rgba(0,0,0,.14),
0 4px 10px rgba(255,255,255,.8) inset!important;
}

/* títulos */
#footer .title_block,
#footer h4{
font-size:12px!important;
font-weight:800!important;
letter-spacing:.6px!important;
margin-bottom:8px!important;
color:#222!important;
}

/* links */
#footer li{
margin-bottom:2px!important;
}

#footer li a,
#footer a{
font-size:11px!important;
line-height:1.5!important;
color:#666!important;
}

/* flechas */
#footer .title_block:after,
#footer .title_block:before{
opacity:.5!important;
}

}

/* ========================================================
   FOOTER CARDS COMPACTAS
   ======================================================== */
@media (max-width:767px){

/* tarjetas mas pequeñas */
#footer-pre .ApColumn:not(:first-child){

min-height:110px!important;
padding:10px 6px!important;

border-radius:12px!important;

display:flex!important;
flex-direction:column!important;
justify-content:center!important;

}

/* titulos */
#footer .title_block,
#footer h4{
font-size:11px!important;
margin-bottom:6px!important;
}

/* links */
#footer li{
margin-bottom:1px!important;
}

#footer li a,
#footer a{
font-size:10px!important;
line-height:1.35!important;
}

/* quitar flechas */
.material-icons.add,
.material-icons.remove,
.collapse-icons{
display:none!important;
}

/* quitar espacio derecho reservado */
.float-xs-right{
display:none!important;
}

/* compactar listas */
#footer ul{
margin-top:4px!important;
}

/* misma altura visual */
.block-toggler{
height:100%!important;
}

/* efecto mas premium */
#footer-pre .ApColumn:not(:first-child){
box-shadow:
0 8px 18px rgba(0,0,0,.10),
0 2px 5px rgba(255,255,255,.8) inset,
0 -2px 4px rgba(0,0,0,.03) inset!important;
}

}

/* ========================================================
   FIX FOOTER LOGOS MOBILE
   ======================================================== */
@media (max-width:767px){

.footer-logos-wrapper{

padding-left:0!important;

width:100%!important;

display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;

}

/* copyright */
.block.copyright.ApRawHtml{

width:100%!important;

text-align:center!important;

margin-top:18px!important;

}

}

/* ========================================================
   SUBIR IMAGEN MANOS
   ======================================================== */
@media (max-width:767px){

/* imagen manos */
.footer-center-col img{
position:relative!important;
top:-25px!important;
}

}

/* ========================================================
   AJUSTE STARKEN Y PAGOS
   ======================================================== */
@media (max-width:767px){

/* logo starken */
.footer-starken img{
max-height:50px!important;
position:relative!important;
top:-4px!important;
}

/* logo pagos */
.footer-payments img{
max-height:50px!important;
position:relative!important;
top:4px!important;
}

}

/* ========================================================
   TÍTULO UNIFICADO: 2 LÍNEAS, BRILLO INTERNO Y FLECHAS NEÓN
   ======================================================== */
@media (max-width: 767px) {

  /* 1. CONTENEDOR DE LA PÍLDORA */
  .block.ApLink.top_cate {
    position: relative !important;
    overflow: hidden !important; /* Mantiene el brillo estrictamente dentro */
    padding: 12px 10px !important; /* Ajustado para dar más espacio horizontal */
    border-radius: 18px !important; 
    background: #ffffff !important; 
    border: 2px solid #00b36b !important; 
    
    box-shadow: 0 4px 15px rgba(0, 179, 107, 0.15) !important;
    animation: breathingBox 3s infinite ease-in-out !important;
    
    display: block !important;
    margin: 15px auto !important;
    text-align: center !important;
  }

  /* 2. TEXTO INTERNO (Ajustado para forzar 2 líneas) */
  .block.ApLink.top_cate .title_block {
    font-size: 12px !important; /* Un punto menos para ayudar a romper en 2 líneas */
    font-weight: 800 !important; 
    line-height: 1.3 !important;
    letter-spacing: 0.2px !important; /* Más compacto para que quepan más palabras por línea */
    text-transform: uppercase !important;
    text-align: center !important;
    margin: 0 !important;
    
    /* Reducimos el espacio lateral de las flechas para dejarle más ancho al texto */
    padding-left: 36px !important; 
    padding-right: 36px !important;
    
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #1a2a3a !important; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    display: block !important;

    /* INYECTAMOS LAS FLECHAS UN POCO MÁS PEQUEÑAS */
    background-image: 
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23111' stroke='%2300b36b' stroke-width='1.5'/><path d='M6 8l6 6 6-6M6 13l6 6 6-6' fill='none' stroke='%2300f2fe' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23111' stroke='%2300b36b' stroke-width='1.5'/><path d='M6 8l6 6 6-6M6 13l6 6 6-6' fill='none' stroke='%2300f2fe' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    
    /* Ubicación milimétrica para los nuevos tamaños */
    background-position: 
      left 4px center, 
      right 4px center !important;
    
    /* Rediseñadas a 26px para que dejen respirar al texto */
    background-size: 26px 26px !important;
    background-repeat: no-repeat !important;
    
    /* Mantenemos intacto tu efecto de aura neón preferido */
    filter: drop-shadow(0px 0px 5px rgba(0, 242, 254, 0.65)) drop-shadow(0px 2px 2px rgba(0,0,0,0.3)) !important;
  }

  /* 3. EL EFECTO DE BRILLO INTERNO (Impecable y aprobado) */
  .block.ApLink.top_cate .title_block::before {
    content: "" !important;
    position: absolute !important;
    top: -100% !important;
    left: -150% !important;
    width: 45% !important; 
    height: 300% !important;
    
    background: linear-gradient(
      115deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.9) 50%, 
      rgba(255, 255, 255, 0) 80%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
    
    transform: rotate(25deg) !important;
    pointer-events: none !important;
    mix-blend-mode: overlay !important; 
    z-index: 2 !important;
    animation: innerShine 4s infinite ease-in-out !important;
  }

  /* ========================================================
     ANIMACIONES CONSTANTES
     ======================================================== */

  @keyframes innerShine {
    0% { left: -150%; }
    28% { left: 150%; }
    100% { left: 150%; }
  }

  @keyframes breathingBox {
    0% {
      transform: scale(1);
      box-shadow: 0 4px 15px rgba(0, 179, 107, 0.15);
    }
    50% {
      transform: scale(1.02); 
      box-shadow: 0 8px 25px rgba(0, 179, 107, 0.35); 
    }
    100% {
      transform: scale(1);
      box-shadow: 0 4px 15px rgba(0, 179, 107, 0.15);
    }
  }

}

@media (max-width: 768px) {
    /* 1. Contenedores principales ocupando el 100% real */
    .container-fluid, 
    #wrapper .row, 
    .row, 
    #content-wrapper,
    #main,
    #products {
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 2. Cuadrícula - Reducimos row-gap al mínimo (4px) */
    #products .product_list {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        column-gap: 4px !important;
        row-gap: 4px !important; /* Separación mínima entre filas de la cuadrícula */
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* 3. ¡AJUSTE CLAVE! Forzamos a que la tarjeta flex reduzca su altura interna */
    .ajax_block_product,
    .ajax_block_product .js-product,
    .ajax_block_product .product-miniature,
    .ajax_block_product .my-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: 1 1 auto !important; /* Cambiado a auto para que no fuerce estiramiento */
        flex-direction: column !important;
        justify-content: flex-start !important; /* Alinea todo arriba */
        box-sizing: border-box !important;
        padding: 1px !important; /* Reducido para ganar espacio vertical */
        margin: 0 !important;   /* Eliminamos cualquier margen exterior residual */
    }

    /* 4. Eliminamos márgenes inferiores del contenedor de la tarjeta */
    .product-miniature {
        margin-bottom: 0 !important;
    }

    /* 5. Las imágenes adaptadas a la mala */
    .ajax_block_product img,
    .ajax_block_product .thumbnail-container img,
    .ajax_block_product .thumbnail-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        margin-bottom: 4px !important;
    }

    /* 6. Textos e información compacta */
    .ajax_block_product h1, 
    .ajax_block_product h2, 
    .ajax_block_product h3,
    .ajax_block_product .product-title,
    .ajax_block_product a {
        font-size: 11px !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        margin-bottom: 4px !important;
    }

    .ajax_block_product .price {
        font-size: 10px !important;
        display: block !important;
        margin-top: auto !important; /* Empuja el precio y botón al fondo de la mini tarjeta */
        margin-bottom: 2px !important;
    }
    
    .ajax_block_product .product-flags,
    .ajax_block_product .usado-badge {
        font-size: 8px !important;
        padding: 1px 2px !important;
        margin-bottom: 4px !important;
    }

    /* 7. El botón "Agregar al carrito" pegado al borde inferior */
    .ajax_block_product button,
    .ajax_block_product .btn,
    .ajax_block_product [class*="add-to-cart"] {
        font-size: 7px !important; 
        padding: 4px 1px !important;
        width: 100% !important;
        white-space: nowrap !important;
        margin-bottom: 0 !important; /* Cero espacio abajo del botón */
    }
}

@media (max-width: 768px) {
    /* Ajuste exclusivo para el listado de repuestos */
    body.category-page #main,
    body.catalog-listing-page #main,
    body[id*="category"] #main,
    #products-top + #js-product-list-top, /* Si hay filtros arriba */
    #products #main {
        margin-top: -20px !important;
    }
}

@media (max-width: 768px) {
    /* Ajuste exclusivo para la página de resultados del buscador */
    body#search #main,
    body.search-program #main,
    body[id*="search"] #main,
    body.search-results #main,
    #search_filters + #products #main {
        margin-top: -20px !important;
    }
}

/* =========================================================
   PRODUCTO MOBILE – TARJETAS SUPERIORES COMPACTAS
   ========================================================= */

@media (max-width:767px){

/* =====================================================
   CONTENEDOR GENERAL
   ===================================================== */

.product-container{
    gap:10px !important;
    margin:0 !important;
    align-items:stretch;
}

.product-container *{
    max-width:100%;
}

/* =====================================================
   TARJETAS SUPERIORES
   ===================================================== */

.product-container > [class*="col-form-id"]{
    width:calc(50% - 5px) !important;
    padding:8px 6px !important;
    border-radius:16px !important;
    min-height:auto !important;
}

/* =====================================================
   BADGE DISPONIBLE
   ===================================================== */

.col-form_id-form_7207072461964572::before{
    font-size:14px !important;
    padding:4px 18px !important;
    top:-16px !important;
    border-radius:20px !important;
    letter-spacing:.3px !important;
    line-height:14px !important;
    min-height:14px !important;
    margin-left: 90px;
    white-space:nowrap !important;
    min-width:120px !important;
    text-align:center !important;
}

/* =====================================================
   TITULO PRODUCTO
   ===================================================== */

.product-detail-name{
    font-size:10px !important;
    line-height:1.15 !important;
    text-align:center;
    margin-bottom:4px !important;
    padding:0 2px !important;
}

/* =====================================================
   GALERIA IMAGENES
   ===================================================== */

.images-container{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
}

/* imagen principal */

.images-container .product-cover{
    order:1 !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    border-radius:10px !important;
    overflow:hidden;
}

/* imagen real */

.images-container .product-cover img{
    max-height:110px !important;
    object-fit:contain !important;
}

/* =====================================================
   THUMBNAILS
   ===================================================== */

.images-container .js-qv-mask,
.images-container .product-thumb-images{
    order:2 !important;

    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;

    width:100% !important;

    gap:8px !important;
    margin-top:8px !important;
}

/* galeria real del theme */

#thumb-gallery.product-thumb-images{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    gap:8px !important;
}

/* items */

#thumb-gallery .thumb-container,
#main .thumb-container{
    width:70px !important;
    height:55px !important;
    flex:0 0 70px !important;
    margin:0 !important;
}

/* imagen thumb */

#thumb-gallery .thumb-container img,
#main .thumb-container img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:10px !important;
}

/* =====================================================
   TARJETA DERECHA
   ===================================================== */

/* logos */

.product-manufacturer,
.product-brand,
.manufacturer-logo{
    transform:scale(.78);
    margin-bottom:-6px !important;
}

/* precio */

.product-price,
.current-price,
.current-price span{
    font-size:18px !important;
    line-height:1 !important;
}

/* imagen precio */

.current-price img{
    max-width:140px !important;
}

/* =====================================================
   CANTIDAD + BOTON
   ===================================================== */

.product-add-to-cart{
    margin-top:6px !important;
}

.product-quantity{
    gap:6px !important;
    align-items:center !important;
}

/* input cantidad */

.qty,
#quantity_wanted{
    height:32px !important;
    min-height:32px !important;
    font-size:14px !important;
}

/* boton carrito */

.add-to-cart{
    height:25px !important;
    padding:0 16px !important;

    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:.3px;

    border-radius:999px !important;

    background:linear-gradient(
      135deg,
      #12d15f 0%,
      #09b44b 50%,
      #07933d 100%
    ) !important;

    box-shadow:
      0 4px 10px rgba(18,209,95,.35),
      inset 0 1px 0 rgba(255,255,255,.35);

    transition:.25s ease;
}

.add-to-cart{
    position:relative;
    overflow:hidden;
}

.add-to-cart::before{
    content:"";
    position:absolute;

    top:-50%;
    left:-120%;

    width:40px;
    height:200%;

    background:rgba(255,255,255,.25);

    transform:rotate(25deg);

    animation:btnshine 3s infinite;
}

@keyframes btnshine{
    0%{
        left:-120%;
    }

    100%{
        left:150%;
    }
}

/* =====================================================
   TEXTOS SECUNDARIOS
   ===================================================== */

.product-reference,
.product-availability,
#product-availability,
.product-minimal-quantity,
.product-information{
    font-size:10px !important;
    line-height:1.25 !important;
    text-align:center;
}

/* referencia */

.product-reference{
    padding:8px !important;
    border-radius:10px !important;
}

/* =====================================================
   BOTONES / ESTADOS
   ===================================================== */

.shipping-box,
.envio-box,
.stock-box{
    font-size:10px !important;
    padding:8px 10px !important;
    border-radius:999px !important;
}

/* =====================================================
   ESPACIADOS
   ===================================================== */

.product-prices,
.product-actions,
.product-additional-info{
    margin-bottom:4px !important;
}
}

@media (max-width:767px){

body.page-product #main{
    margin-top:0 !important;
}
}

@media (max-width:767px){

#subcategories{
    margin-top:-30px !important;
}

.col-form_id-form_7207072461964572 h1 {
    font-size: 16px !important;
}


.col-form_id-form_21007535076883162 .brand-circle {
width: 50px;
height: 50px;
}

.col-form_id-form_21007535076883162 .brand-circle::after {
width: 50px;
height: 50px;
}

.product-quantity .product-qty{
display: none;
}
}

@media (max-width:767px){

/* contenedor del boton */
.product-quantity .add{
    flex:0 0 190px !important;
    width:150px !important;
    max-width:none !important;
    min-width:150px !important;
}

/* boton real */
.col-form_id-form_21007535076883162 .add-to-cart{
    width:100% !important;

    height:42px !important;
    margin-top:10px;
    padding:0 8px !important;
    font-size:11px !important;
    gap:4px !important;
    justify-content:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

/* icono */
.col-form_id-form_21007535076883162 .add-to-cart i{
    font-size:11px !important;
    flex:0 0 auto;
}

.product-add-to-cart {
border-top: 0px;
}

.product-last-items{
    font-size:14px !important;
    margin-top: -6px;
}

.col-form_id-form_21007535076883162 #product-availability{
font-size: 9px !important;
}
}

@media (max-width:767px){

.col-form_id-form_21007535076883162 .product-reference{
order:4 !important;
position:relative;
width:calc(100% + 30px) !important;
max-width:none !important;
min-width:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:2px !important;
box-sizing:border-box !important;
margin:4px 0 !important;
padding:5px 8px !important;
border-radius:10px !important;
font-size:7px !important;
line-height:1.1 !important;
overflow:hidden !important;
text-align:center !important;
word-break:break-word !important;
overflow-wrap:anywhere !important;
}

.col-form_id-form_21007535076883162 .product-reference label, .col-form_id-form_21007535076883162 .product-reference span{
font-size: 8px !important;
}

.col-form_id-form_21007535076883162 .product-reference label{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 !important;
}

.col-form_id-form_21007535076883162 .product-reference span{
display:block !important;
width:100% !important;
text-align:center !important;
}

.col-form_id-form_21007535076883162 .description-short{
order:5 !important;
position:relative;
width:calc(100% + 24px) !important;
max-width:none !important;
min-width:0 !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
box-sizing:border-box !important;
margin:13px 10px !important;
padding:2px 6px !important;
min-height:26px !important;
border-radius:14px !important;
font-size:7px !important;
line-height:0.5px !important;
text-align:center !important;
overflow:hidden !important;
word-break:break-word !important;
overflow-wrap:anywhere !important;
}

.col-form_id-form_21007535076883162 .description-short::before{
width:100% !important;
font-size:7px !important;
line-height:1 !important;
white-space:normal !important;
text-align:center !important;
left:0 !important;
}
}

@media (max-width:767px){

/* =====================================================
   CONTENEDOR GENERAL TABS
   ===================================================== */

.tabs{
margin-top:10px !important;
}

/* =====================================================
   BOTONES SUPERIORES
   ===================================================== */

.tabs .nav-tabs{
margin:0 auto 10px auto !important;
gap:6px !important;
}

/* botones */

.tabs .nav-tabs .nav-link{
min-width:105px !important;
min-height:30px !important;
padding:5px 8px !important;
font-size:8px !important;
line-height:1.1 !important;
border-radius:10px 10px 0 0 !important;
}

/* texto informacion */

a[href="#description"]::after{
font-size:8px !important;
}

/* =====================================================
   PANEL INFORMACION
   ===================================================== */

#description{
padding:12px !important;
border-radius:16px !important;
min-height:auto !important;

box-shadow:
inset 0 1px 1px rgba(255,255,255,.9),
0 4px 10px rgba(0,0,0,.05) !important;
}

/* titulo */

#description::before{
font-size:14px !important;
margin-bottom:8px !important;
}

/* texto */

#description p{
font-size:9px !important;
line-height:1.45 !important;
max-width:100% !important;
}

/* =====================================================
   PANEL DETALLES
   ===================================================== */

#product-details{
padding:10px !important;
border-radius:16px !important;

box-shadow:
0 4px 10px rgba(0,0,0,.08),
inset 0 1px 1px rgba(255,255,255,.03) !important;
}

/* titulo */

#product-details::before{
font-size:12px !important;
margin-bottom:8px !important;
}

/* lista */

#product-details ul{
gap:6px !important;
}

/* items */

#product-details li{
padding:6px 8px !important;
font-size:8px !important;
border-radius:10px !important;
gap:6px !important;

box-shadow:
0 2px 4px rgba(0,0,0,.08) !important;
}

/* iconos */

#product-details li::before{
font-size:10px !important;
}

/* =====================================================
   PREMIUM DETAILS NUEVO
   ===================================================== */

.premium-details{
gap:8px !important;
}

/* tarjetas */

.detail-card{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;

width:100% !important;
min-height:58px !important;

padding:8px 12px !important;

gap:12px !important;

border-radius:12px !important;

text-align:left !important;

box-sizing:border-box !important;

box-shadow:
0 2px 6px rgba(0,0,0,.03),
inset 0 1px 1px rgba(255,255,255,.9) !important;
}

/* iconos */

.detail-icon{
width:34px !important;
height:34px !important;
font-size:14px !important;
border-radius:10px !important;
flex-shrink:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}

/* glow */

.detail-icon::after{
width:24px !important;
height:2px !important;
bottom:-6px !important;
}

/* contenido */

.detail-content{
gap:1px !important;
flex:1 !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
text-align:left !important;
}

/* titulo */

.detail-title{
font-size:9px !important;
line-height:1.15 !important;
margin-bottom:0 !important;
}

/* descripcion */

.detail-desc{
font-size:10px !important;
line-height:1.15 !important;
}

/* separacion tabs */

.tabs .tab-content{
margin-top:-15px !important;
}

.tabs .tab-content{
width:fit-content !important;
max-width:100% !important;

padding:10px 6px !important;

margin:-15px auto 0 auto !important;

box-sizing:border-box !important;
}

}

.categoria-auto-imagen{
    text-align:center;
    clear:both;
    perspective:1000px;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:10px 0;
    overflow:visible;
}

.categoria-auto-imagen img{

    max-width:320px;
    max-height:220px;

    width:auto;
    height:auto;

    object-fit:contain;

    display:inline-block;

    filter:
        drop-shadow(0 8px 12px rgba(0,0,0,.18))
        drop-shadow(0 25px 35px rgba(0,0,0,.12))
        drop-shadow(0 45px 60px rgba(0,0,0,.08));

    transform:
        perspective(1000px)
        rotateX(4deg)
        translateY(-15px);

    transition:all .35s ease;
}

.categoria-auto-imagen img:hover{

    transform:
        perspective(1000px)
        rotateX(0deg)
        scale(1.03)
        translateY(-20px);

    filter:
        drop-shadow(0 12px 18px rgba(0,0,0,.22))
        drop-shadow(0 35px 45px rgba(0,0,0,.16))
        drop-shadow(0 60px 80px rgba(0,0,0,.10));
}

/* TABLET */
@media (max-width: 768px){

    .categoria-auto-imagen{
        padding:5px 0;
    }

    .categoria-auto-imagen img{
        max-width:220px;
        max-height:160px;

        transform:
            perspective(1000px)
            rotateX(4deg)
            translateY(-8px);
    }

}

/* MOBILE */
@media (max-width: 480px){

    .categoria-auto-imagen img{
        max-width:180px;
        max-height:130px;
    }
}

@media (max-width: 767px) {
    .col-form_id-form_21007535076883162 .product-reference label::after {
        /* Ahora el texto dependerá de lo que diga PrestaShop */
        content: var(--condicion-producto) !important; 
        display: inline !important;
    }
}

@media (max-width: 767px) {
    /* Ajuste elástico exclusivo para que el título se encoja si es muy largo */
    .col-form_id-form_7207072461964572 h1 {
        font-size: clamp(12px, 4.2vw, 16px) !important;
        line-height: 1.1 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}

@media (max-width: 767px) {
    /* Ajuste elástico real para el nombre dentro de la tarjeta personalizada */
    .premium-details .detail-card .detail-title {
        font-size: clamp(10px, 3.8vw, 14px) !important; /* Se encoge más si el nombre es gigante */
        line-height: 1.1 !important; /* Pega las líneas para que no sumen altura */
        max-height: 32px !important; /* Pone un límite estricto de altura para que no empuje la tarjeta */
        overflow: hidden !important; /* Si el texto supera la altura máxima, esconde el excedente de forma limpia */
    }
}

@media (max-width: 767px) {
    /* Forzar al h1 nativo de Ap Page Builder a encogerse de verdad si es largo */
    .col-form_id-form_7207072461964572 h1 {
        /* Bajamos el mínimo a 10px y reducimos el multiplicador para que se encoja de forma agresiva */
        font-size: clamp(10px, 3.4vw, 14px) !important; 
        line-height: 1.1 !important;
    }
}

@media (max-width: 767px) {
    /* Ocultamos el texto pero controlamos la altura para subir las tarjetas */
    #product .breadcrumb {
        visibility: hidden !important;
        opacity: 0 !important;
        /* Usamos margen negativo para empujar el contenido hacia arriba de forma limpia */
        margin-bottom: 0px !important; 
    }
}

/* FORZAR LA VISIBILIDAD DE LA LUPA EN VISTA MÓVIL */
.product-cover .layer.hidden-sm-down {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* AJUSTE DE UBICACIÓN Y TAMAÑO EN MÓVILES */
@media (max-width: 767px) {
    .product-cover .layer {
        bottom: 0px !important;
        right: 0px !important;
        z-index: 10 !important;
        
        /* 1. TAMAÑO DEL CÍRCULO BLANCO (CONTENEDOR) */
        width: 22px !important;  /* <-- Sube o baja este valor (Ej: 50px para más grande) */
        height: 22px !important; /* <-- Debe ser igual al ancho para que siga siendo un círculo */
    }

    .product-cover .layer .zoom-in {
        /* 2. TAMAÑO DE LA LUPA (ICONO) */
        font-size: 17px !important; /* <-- Sube o baja este valor para agrandar/achicar la lupa interna */
    }
}

@media (max-width: 767px){

  .product-line-grid{
    gap:8px;
    padding:8px;
    align-items:flex-start;
  }

  .cart-img{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
  }

  .cart-id{
    font-size:8px;
    padding:2px 5px;
    margin-bottom:0;
    text-align:center;
  }

  .cart-img img{
    width:60px;
    height:60px;
    margin-bottom: -8px;
    margin-top: -4px;
  }

  .cart-title{
    font-size:13px;
    line-height:1.2;
  }

  .cart-compat{
    font-size:10px;
  }

  .cart-price{
    font-size:12px;
    margin-right: -10px;
    white-space:nowrap;
    align-self:flex-start;
  }

  .cart-remove{
    width:34px;
    height:34px;
    font-size:17px;
    flex-shrink:0;
    position: relative;
    left: -20px;
    margin-top:32px;
    margin-left:-34px;
  }

.cart-item{
    padding: 5px 0 !important;
    margin-bottom: 10px;
}

.card.cart-container{
    padding:0px 5px 16px 5px !important
}
}

@media (max-width: 767px){

.product-condition {
    font-size: 7px;
    padding: 0px 8px;
    margin-top: 2px;
}
}

@media (max-width:768px){

.ajax_block_product .price{
    display:flex !important;
    align-items:center;
    width:100%;
}

.ajax_block_product .product-condition{
    margin-left:auto !important;
    margin-right:-7px !important;
}
}

@media (max-width:768px){

.product-info {
    margin-top: -12px;
}
}

@media (max-width:768px){

.product-title{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 5 !important;
    overflow: hidden !important;
    height: 60px !important;
    min-height: 60px !important;
}
}

@media (max-width:768px){

  .checkout-title{
      padding-left:0 !important;
      margin:-30px 0 15px !important;
      text-align:center;
      font-size:22px;
      line-height:1.2;
  }

#content h2{
      font-size:15px;
      text-align: center;
}

body#checkout section.checkout-step .step-title {
      line-height: 12px;
      top: -5px;
}
}

@media (max-width:768px){

  /* Tarjeta principal */
  .checkout-card{
      padding:20px !important;
      margin-top:110px !important;
      margin-bottom: -15px ! important;
  }

  /* Título */
  .checkout-card h2{
      margin-bottom:5px !important;
      line-height:1.1 !important;
  }

  /* Texto iniciar sesión */
  .checkout-card .login-link{
      margin-bottom:10px !important;
      display:inline-block;
      font-size: 12px;
  }

  /* Cada grupo del formulario */
  .checkout-card .form-group{
      margin-bottom:8px !important;
      margin-top: -15px;
  }

  /* Etiquetas */
  .checkout-card label{
      margin-bottom:3px !important;
      font-size:13px;
  }

  /* Inputs */
  .checkout-card input{
      min-height:25px !important;
      height:25px !important;
      padding:6px 10px !important;
  }

  /* Bloque crear cuenta */
  .optional-account{
      margin-top:10px !important;
      padding-top:10px !important;
  }

  /* Texto descriptivo */
  .optional-account p{
      margin-bottom:8px !important;
      line-height:1.2 !important;
  }
}

@media (max-width:768px){

  #checkout-personal-information-step #customer-form{
      margin-top:9px !important;
  }
}

@media (max-width:768px){

  #customer-form div.optional-account{

      /* Más ancho y menos alto */
      padding:4px 0px 0px 12px !important;

      /* Mantener el diseño */
      margin-top:15px !important;
      margin-bottom:0 !important;
      border-left-width:3px !important;
      margin-left: -15px ! important;
      margin-right: -13px ! important;
  }

  /* Título */
  #customer-form div.optional-account h3,
  #customer-form div.optional-account h4,
  #customer-form div.optional-account legend{

      font-size:14px !important;
      line-height:1.1 !important;
      margin-bottom:4px !important;
  }

  /* Texto descriptivo */
  #customer-form div.optional-account p{
      font-size:9px !important;
      line-height:1.15 !important;
      margin-bottom:6px !important;
  }

  /* Etiqueta contraseña */
  #customer-form div.optional-account label{
      font-size:12px !important;
      margin-bottom:2px !important;
  }

  /* Campo contraseña */
  #customer-form div.optional-account input{
      height:25px !important;
      min-height:25px !important;
      padding:4px 8px !important;
  }
}

@media (max-width:768px){

  #customer-form .optional-account .form-group.row{
      display:flex !important;
      align-items:center !important;
      flex-wrap:nowrap !important;
      gap:8px;
  }

  #customer-form .optional-account .form-control-label{
      width:auto !important;
      flex:0 0 auto !important;
      margin:0 !important;
      font-size:12px !important;
      white-space:nowrap;
  }

  #customer-form .optional-account .col-md-6{
      width:auto !important;
      flex:1 1 auto !important;
      max-width:none !important;
      padding-left:0 !important;
      padding-right:0 !important;
      margin-top: 10px;
  }

  #customer-form .optional-account .form-control-comment{
      display:none !important;
  }
}

@media (max-width:768px){

  #checkout-personal-information-step .form-footer{
      display:block !important;
      width:100% !important;
      clear:both !important;
  }

  #checkout-personal-information-step .continue.btn{
      display:block !important;
      width:100% !important;
      float:none !important;
      margin:0 !important;
      visibility:visible !important;
      opacity:1 !important;
      position:relative !important;
      z-index:10 !important;
  }
}

@media (max-width:768px){

  #checkout-personal-information-step .continue.btn{
      display:none !important;
  }

}

@media (min-width:769px){

  .continue-mobile{
      display:none !important;
  }
}

@media (max-width:768px){

  .continue-mobile{

      position: relative;
      overflow: hidden;

      width: 82%;
      max-width: 180px;
      height: 30px;

      margin: 8px auto 10px !important;
      display: block;

      border: 0;
      border-radius: 10px;

      font-size: 13px;
      font-weight: 700;
      letter-spacing: .3px;
      text-transform: uppercase;

      background: linear-gradient(
        180deg,
        #47c85a 0%,
        #2fb24a 100%
      );

      box-shadow:
        0 3px 8px rgba(47,178,74,.25),
        0 2px 4px rgba(0,0,0,.10);

      transition: all .25s ease;
  }

  .continue-mobile:hover,
  .continue-mobile:active{
      transform: translateY(-1px);
      box-shadow:
        0 6px 14px rgba(47,178,74,.30),
        0 3px 6px rgba(0,0,0,.12);
  }

  /* Brillo diagonal */
  .continue-mobile:before{
      content:'';
      position:absolute;
      top:-50%;
      left:-120%;

      width:60%;
      height:220%;

      background:rgba(255,255,255,.25);

      transform:rotate(25deg);

      animation:continueShine 3s infinite;
      pointer-events:none;
  }

  @keyframes continueShine{
      0%{
          left:-120%;
      }
      30%{
          left:140%;
      }
      100%{
          left:140%;
      }
  }

}

@media (max-width:768px){

body#checkout #js-checkout-summary::before {
      font-size: 14px;
      margin-bottom: 10px;
}
}

/* =========================================================
   AJUSTES CHECKOUT MOVIL PASO 2 DIRECCIONES
========================================================= */

@media (max-width:768px){

  #checkout-addresses-step form{
      margin-top:100px;
      padding:10px;
  }

  #checkout-addresses-step form::before{
      font-size:15px;
      letter-spacing:0;
  }

  #checkout-addresses-step .form-group{
      gap:0;
  }

  #checkout-addresses-step .col-md-6{
      padding-left:0 !important;
      padding-right:0 !important;
  }

  #checkout-addresses-step .form-control-label{
      margin-left:-20px !important;
  }

  #checkout-addresses-step .form-control,
  #checkout-addresses-step select{
      height:35px !important;
  }

  #checkout-addresses-step .form-footer{
      display:block !important;
  }

  #checkout-addresses-step .continue.btn{

      display:block !important;
      float:none !important;

      position:relative;
      overflow:hidden;

      width:82% !important;
      max-width:260px !important;
      height:40px !important;

      margin:10px auto !important;

      border:0;
      border-radius:10px;

      font-size:15px;
      font-weight:700;
      letter-spacing:.3px;
      text-transform:uppercase;

      background:linear-gradient(
        180deg,
        #47c85a 0%,
        #2fb24a 100%
      );

      box-shadow:
        0 3px 8px rgba(47,178,74,.25),
        0 2px 4px rgba(0,0,0,.10);

      transition:all .25s ease;
  }

  #checkout-addresses-step .continue.btn:hover,
  #checkout-addresses-step .continue.btn:active{
      transform:translateY(-1px);
      box-shadow:
        0 6px 14px rgba(47,178,74,.30),
        0 3px 6px rgba(0,0,0,.12);
  }

  #checkout-addresses-step .continue.btn:before{
      content:'';
      position:absolute;
      top:-50%;
      left:-120%;

      width:60%;
      height:220%;

      background:rgba(255,255,255,.25);

      transform:rotate(25deg);

      animation:continueShineAddress 3s infinite;
      pointer-events:none;
  }

  @keyframes continueShineAddress{
      0%{ left:-120%; }
      30%{ left:140%; }
      100%{ left:140%; }
  }
}

/* =========================================================
   AJUSTES CHECKOUT MOVIL PASO 3 METODOS DE ENVIO
========================================================= */

@media (max-width:768px){

.delivery-options {
      margin-top: 100px ! important;
      gap: 0;
  }

#checkout-delivery-step .delivery-options::before {
      font-size: 15px;
      margin-bottom: 10px;
  }

  /* Contenedor principal */
#checkout-delivery-step .delivery-option-2 > .row{
    display:grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "main price"
        "desc desc";
    align-items:center !important;
}

/* Logo + nombre */
#checkout-delivery-step .delivery-option-2 .col-sm-5{
    grid-area: main;
    width:auto !important;
    max-width:none !important;
}

/* Descripción */
#checkout-delivery-step .delivery-option-2 .col-sm-4{
    grid-area: desc;

    width:auto !important;
    max-width:none !important;

    margin-top:2px !important;
    padding-left:35px !important;
    margin-left: -50px;
    text-align: center;
    margin-right: -20px;
}

/* Precio */
#checkout-delivery-step .delivery-option-2 .col-sm-3{
    grid-area: price;

    width:auto !important;
    max-width:none !important;

    text-align:right !important;
    align-self:center !important;
    margin-right: -20px;
}

/* Radio selector */
#checkout-delivery-step .col-sm-1{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding-top:0 !important;
    margin-top:-8px !important;
    margin-left: -10px;
   }

/* Círculo */
#checkout-delivery-step .custom-radio{
    margin-top:0 !important;
   }

body#checkout section.checkout-step .delivery-option label {
    margin-top: -20PX;
    margin-bottom: -10PX;
   }

#checkout-delivery-step .carrier-delay{
    font-size:12px !important;
    line-height:1.1 !important;
  }

.delivery-option .carrier-logo img {
    margin-left: -10px;
  }

#checkout-delivery-step .carrier-name{
    margin-right:-20px !important;
  }

  #checkout-delivery-step .custom-radio{
      position: relative;
      top: 12px;
  }

  #checkout-delivery-step .continue.btn{
      display:block !important;
      visibility:visible !important;
      opacity:1 !important;

      width:82% !important;
      max-width:260px !important;

      margin:12px auto !important;
      float:none !important;
  }

  #checkout-delivery-step .continue.btn{

      position:relative;
      overflow:hidden;

      height:40px !important;

      border:0;
      border-radius:10px;

      font-size:15px;
      font-weight:700;
      letter-spacing:.3px;
      text-transform:uppercase;

      background:linear-gradient(
        180deg,
        #47c85a 0%,
        #2fb24a 100%
      );

      box-shadow:
        0 3px 8px rgba(47,178,74,.25),
        0 2px 4px rgba(0,0,0,.10);

      transition:all .25s ease;
  }

  #checkout-delivery-step .continue.btn:hover,
  #checkout-delivery-step .continue.btn:active{
      transform:translateY(-1px);

      box-shadow:
        0 6px 14px rgba(47,178,74,.30),
        0 3px 6px rgba(0,0,0,.12);
  }

  #checkout-delivery-step .continue.btn:before{
      content:'';
      position:absolute;

      top:-50%;
      left:-120%;

      width:60%;
      height:220%;

      background:rgba(255,255,255,.25);

      transform:rotate(25deg);

      animation:continueShineDelivery 3s infinite;

      pointer-events:none;
  }

  @keyframes continueShineDelivery{
      0%{
          left:-120%;
      }
      30%{
          left:140%;
      }
      100%{
          left:140%;
      }
  }

}

/* =========================================================
   AJUSTES CHECKOUT MOVIL PASO 4 METODOS DE PAGO
========================================================= */

@media (max-width:768px){

#checkout-payment-step{
      margin-top:100px !important;
  }

#checkout-payment-step.js-current-step::before {
     font-size: 16px;
     margin-bottom: 30px;
  }

body#checkout section.checkout-step .payment-options label {
     margin-bottom: -5px;
     margin-top: -12px;
  }

.payment-option.es-mercadopago::after {
     display: none! important;
  }

body#checkout .modal-content {
     margin-top: 40px;
  }
}

#content p {
     color: darkgreen! important;
}

#cta-terms-and-conditions-0{
      color: darkviolet !important;
}

@media (max-width:768px){

  .product-flags .product-flag.out_of_stock{
      top: 3px !important;
  }
}

@media (max-width:768px){

  #product-availability .product-unavailable{
      position:relative;
      top:-10px;
  }
}

/* FRONT HOME - eliminar márgenes laterales móviles */
@media (max-width:768px){

body:not(#checkout) .container-fluid,
body:not(#checkout) #content-wrapper,
body:not(#checkout) #main{

    padding-left:0 !important;
    padding-right:0 !important;

    margin-left:0 !important;
    margin-right:0 !important;
}

#home-vehicle-filter,
#home-vehicle-filter .ApColumn,
#home-vehicle-filter .col-xs-12{

    padding-left:0 !important;
    padding-right:0 !important;
}
}

@media (max-width:768px){

  /* Pasos del checkout */
  body#checkout .checkout-card,
  body#checkout #checkout-addresses-step .content,
  body#checkout #checkout-delivery-step .content,
  body#checkout #checkout-payment-step .content{

      margin-left:14px !important;
      margin-right:14px !important;
  }
}

@media (max-width:768px){

  #conditions-to-approve{

      background:#fff8e6;
      border:2px solid #ffb300;
      border-radius:10px;

      padding:8px 12px 2px !important;
      margin:35px 5px 12px !important;

      box-shadow:
      0 0 0 3px rgba(255,179,0,.15);

      animation: garantiaPulse 2s infinite;
  }

  #conditions-to-approve label{
      font-size:13px !important;
      font-weight:600 !important;
      line-height:1.3 !important;
      margin-bottom:0 !important;
  }

  #conditions-to-approve input[type="checkbox"]{
      transform:scale(1.2);
      margin-right:8px;
  }

  @keyframes garantiaPulse{
      0%{
          box-shadow:0 0 0 0 rgba(255,179,0,.35);
      }
      70%{
          box-shadow:0 0 0 8px rgba(255,179,0,0);
      }
      100%{
          box-shadow:0 0 0 0 rgba(255,179,0,0);
      }
  }

#conditions-to-approve::before{
    content:"⚠ Debes aceptar las políticas para finalizar tu compra";
    display:block;
    font-size:10px;
    font-weight:700;
    color:#c96a00;
    margin-bottom:6px;
    text-align: center;
}
}

@media (max-width:768px){

  #payment-confirmation button.btn{

      display:block !important;

      width:82% !important;
      max-width:260px !important;
      height:40px !important;

      margin:12px auto !important;

      position:relative;
      overflow:hidden;

      border:0 !important;
      border-radius:10px !important;

      font-size:15px !important;
      font-weight:700 !important;
      letter-spacing:.3px !important;
      text-transform:uppercase !important;

      background:linear-gradient(
        180deg,
        #47c85a 0%,
        #2fb24a 100%
      ) !important;

      color:#fff !important;

      box-shadow:
        0 3px 8px rgba(47,178,74,.25),
        0 2px 4px rgba(0,0,0,.10);

      transition:all .25s ease;
  }

  #payment-confirmation button.btn:hover,
  #payment-confirmation button.btn:active{

      transform:translateY(-1px);

      box-shadow:
        0 6px 14px rgba(47,178,74,.30),
        0 3px 6px rgba(0,0,0,.12);
  }

  #payment-confirmation button.btn:before{

      content:'';
      position:absolute;

      top:-50%;
      left:-120%;

      width:60%;
      height:220%;

      background:rgba(255,255,255,.25);

      transform:rotate(25deg);

      animation:pedidoShine 3s infinite;

      pointer-events:none;
  }

  @keyframes pedidoShine{
      0%{ left:-120%; }
      30%{ left:140%; }
      100%{ left:140%; }
  }
}

@media (max-width:768px){

  #js-checkout-summary{

      margin-top:-85px !important;
      margin-right:auto !important;

      width:95% !important;
      max-width:240px !important;
  }
}

@media (max-width:768px){

  body#checkout:has(#checkout-payment-step.js-current-step)
  #js-checkout-summary{
      margin-top:10px !important;
  }
}

/* =========================================
   RESULTADOS BUSCADOR MOBILE
   ========================================= */

@media (max-width:768px){

    /* Barra superior */
    body:has(.product_list) #js-product-list-top{
        position:relative;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        height:40px !important;
        margin-bottom:20px !important;
        border-bottom:1px solid #eee;
        margin-top: 40px ! important;
    }

    /* Título */
    body:has(.product_list) #js-product-list-top:before{
        content:"Repuestos Disponibles";
        font-size:18px;
        font-weight:600;
        color:#25D366;
        letter-spacing:1px;
        margin-left: 20px;
    }

    /* Mostrar contador */
    body:has(.product_list) .leo-filter-total-product{
        display:block !important;
        position:absolute;
        right:10px;
        bottom: -20px;
        font-size: 11px;
        color: darkgreen;
        margin:0 !important;
        padding:0 !important;
    }

    /* Ocultar ordenar por */
    body:has(.product_list) .sort-by,
    body:has(.product_list) .products-sort-order{
        display:none !important;
    }
}

/* =========================================
   RESULTADOS FILTRO LEO - SOLO ESCRITORIO
========================================= */

@media (min-width:769px){

    body:has(.leo-filter-total-product) #js-product-list-top{
        position:relative;
        justify-content:center !important;
    }

    body:has(.leo-filter-total-product) .leo-filter-total-product{
        position:absolute;
        right:20px;
        bottom:12px;
        width:auto !important;
        margin:0 !important;
        font-size:16px;
        color:#555;
    }
}

/* =========================================
   CATEGORÍAS - QUITAR ESPACIO SOBRE TÍTULO
   SOLO MÓVIL
========================================= */

@media (max-width:768px){

    body#category #js-product-list-top{
        margin-top:0 !important;
    }
}

/* =========================================
   CATEGORÍAS - OCULTAR VOLVER ARRIBA
   SOLO MÓVIL
========================================= */

@media (max-width:768px){

    body#category .hidden-md-up.text-xs-right.up{
        display:none !important;
    }
}

.megarep-tracking-header{
    text-align:center;
    margin-bottom:30px;
}

.megarep-tracking-header h2{
    font-size:32px;
    font-weight:700;
    color:#222;
    margin-bottom:10px;
}

.megarep-tracking-header p{
    font-size:16px;
    color:#666;
}

/* ===== SEGUIMIENTO DE PEDIDO MEGAREP ===== */

#guestOrderTrackingForm{
    max-width: 900px;
    margin: 30px auto;
    background: #fff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

#guestOrderTrackingForm .form-group{
    margin-bottom: 25px;
}

#guestOrderTrackingForm label{
    font-weight: 700;
    color: #333;
}

#guestOrderTrackingForm .form-control{
    height: 52px;
    border-radius: 10px;
    border: 1px solid #dcdcdc;
}

#guestOrderTrackingForm .btn-primary{
    background: #d8ac35 !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700;
    border-radius: 10px;
    padding: 12px 40px;
    text-transform: uppercase;
}

#guestOrderTrackingForm .btn-primary:hover{
    opacity: .9;
}

.megarep-help-text{
    margin-top:2px;
    font-size:11px;
    color:#777;
    line-height:1.5;
}

.megarep-package-icon{
    margin-right:10px;
}

.megarep-help-text{
    margin-top:12px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:13px;
    color:#555;
}

.megarep-info-icon{
    width:22px;
    height:22px;
    min-width:22px;
    border-radius:50%;
    background:#d8ac35;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:14px;
}

.megarep-help-content{
    line-height:1.5;
}

.megarep-secure-info{
    margin-top:18px;
    color:#444;
    font-size:12px;
    font-weight:600;
}

#guestOrderTrackingForm .form-control::placeholder{
    color:#999;
}

.page-guest-tracking #content.page-content.card.card-block{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.megarep-order-header h2{
    margin:0;
    font-size:28px;
    font-weight:700;
    color:#ffffff;
}

.megarep-order-header p{
    margin-top:5px;
    color:#666;
}

/* =====================================
   MEGAREP - DETALLE DE PEDIDO
===================================== */

#order-infos .box{
    background:#1c1c1c;
    border:2px solid #d4af37;
    border-radius:15px;
    padding:25px;
    color:#fff;
    margin-bottom:25px;
    box-shadow:0 6px 20px rgba(0,0,0,.15);
}

#order-infos{
    text-align:center;
}

#order-infos .box{
    display:inline-block;
    width:auto;
    min-width:500px;
    text-align:left;
}

#order-infos strong{
    color:#d4af37;
}

.megarep-order-meta{
    margin-top:15px;
}

.megarep-order-meta div{
    color:#f5f5f5;
    margin-bottom:6px;
}

#order-history.box{
    background:#fff;
    border-radius:15px;
    padding:20px;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
    width:100%;
    margin:0 auto 25px auto;
}

#order-history .table{
    width:95%;
    margin:0 auto;
    text-align: center;
}

#order-history h3{
    font-size:28px;
    font-weight:700;
    color:#222;
    margin-bottom:20px;
    text-align: center;
    margin-top: -10px;
}

#order-history .label{
    display:inline-block;
    padding:10px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
    line-height:1.4;
    white-space:normal;
    max-width:100%;
}

#order-products{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

#order-products{
    width:100%;
    margin:0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

#order-products thead{
    background:#111;
    color:#d4af37;
}

#order-products th{
    color:#d4af37 !important;
    font-weight:700;
}

#order-products td{
    vertical-align:middle;
}

#order-products tfoot tr:last-child{
    background:#f7f7f7;
    font-weight:700;
    font-size:18px;
}

.box{
    border-radius:15px;
}

/* MÓVIL */

@media(max-width:768px){

    #order-infos .box{
        padding:18px;
    }

    #order-history h3{
        font-size:22px;
    }

    #order-products{
        font-size:14px;
    }

}

.order-items .order-item{
    background:#fff;
    border-radius:15px;
    padding:15px;
    margin-bottom:15px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.order-items .name{
    font-weight:700;
    color:#222;
    margin-bottom:8px;
}

.order-items .ref{
    color:#777;
    font-size:13px;
}

#order-products th,
#order-products td{
    text-align:center;
}

#order-products td.text-xs-right{
    text-align:center !important;
}

body.page-guest-tracking #content-wrapper{
    max-width:700px;
    margin:0 auto;
    float:none;
}

@media(max-width:768px){

    #order-history .label{
        display:inline-block;
        width:auto;
        max-width:90%;
        padding:10px 16px;
        font-size:12px;
        line-height:1.3;
        text-align:center;
    }

    #order-history .label,
    #order-history .label-pill{
        color:#ffffff !important;
    }

    #order-history .history-line{
        text-align:center;
    }

    .order-totals .order-total:last-child{
        font-size:13px;
        font-weight:700;
    }

    #order-infos .box{
        min-width:0;
        width:95%;
        padding:5px;
    }

    .order-items .qty{
        text-align:center;
        margin-top:8px;
    }

    .megarep-order-meta{
        font-size:13px;
    }
}