/*
Theme Name: ImpoAuto
Version: 1.0
*/

/* =====================
   BASE
===================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #222;
  min-width: 320px;
}

/* CONTENEDOR UNIVERSAL */
.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}

body {
  overflow-x: hidden;
}

/* =====================
   HEADER
===================== */
.site-header {
  background-color: #0A3A66;
  color: #fff;
}

.header-top {
  display: flex;
  align-items: center;
  padding: 15px 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.header-col {
  display: flex;
  align-items: center;
  margin: 5px 0;
}

.header-logo a {
  color: #ffffff;
  font-size: 26px;
  font-weight: bold;
  text-decoration: none;
}

.header-search-big {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header-search-big .search-form-modern {
  display: flex;
  width: 65%;
  max-width: 520px;
}

.header-search-big .search-field-modern {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
}

.header-search-big .search-submit-modern {
  padding: 10px 18px;
  background-color: #082F52;
  border: 1px solid #082F52;
  color: #ffffff;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
}

.header-phone {
  font-size: 10px;
  color: #ffffff;
  white-space: nowrap;
}

.header-cart a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.header-bottom {
  background-color: #082F52;
  padding: 10px 40px;
}

.menu-principal,
.menu-principal ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 25px;
}

.menu-principal a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.menu-principal a:hover {
  color: #AFCDE7;
}

/* =====================
   HERO (CORREGIDO)
===================== */



/* Imagen de fondo */
.hero-image {
width: 100%; 
height: auto; 
max-height: 520px; 
object-fit: cover; 
display: block; }

/* Contenido encima */
.hero-text {
  position: relative;
  z-index: 2;

  max-width: 1200px;
  width: 90%;
  height: 100%;

  margin: 0 auto;
  padding: 0;

  color: #ffffff;
  text-align: center;

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

  background: transparent;
  box-shadow: none;
}

.hero-text h1 {
  font-size: 42px;
  margin-bottom: 12px;
  color: #ffffff;
}

.hero-text p {
  font-size: 18px;
  margin-bottom: 26px;
  color: #ffffff;
}



/* =====================
   PRODUCTOS DESTACADOS
===================== */


/* =====================
   POR QUÉ ELEGIR DLAA
===================== */
.porque-dlaa {
  padding: 80px 40px;
  background-color: #f7f7f7;
  text-align: center;
}

.caracteristicas-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.caracteristica-card {
  background-color: #ffffff;
  border-radius: 12px;
  width: 350px;
  height: 350px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.caracteristica-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caracteristica-card h3,
.caracteristica-card p {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  color: #ffffff;
  padding: 14px 20px;
}

.caracteristica-card h3 {
  bottom: 55px;
  font-size: 20px;
  font-weight: 600;
}

.caracteristica-card p {
  bottom: 20px;
  font-size: 14px;
  line-height: 1.4;
}

.caracteristica-card:hover {
  transform: scale(0.92);
  box-shadow: 0 16px 30px rgba(0,0,0,0.25);
}

/* =====================
   RESPONSIVE
===================== */
@media (max-width: 768px) {
  .hero-text h1 {
    font-size: 32px;
  }

  .hero-text p {
    font-size: 16px;
  }

  .filtro-container-hero {
    flex-direction: column;
  }

  .caracteristica-card {
    width: 280px;
    height: 280px;
  }
}

/* =====================
   FOOTER
===================== */
.site-footer {
  background-color: #0A3A66;
  color: #ffffff;
  padding-top: 60px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-column {
  flex: 1 1 220px;
  max-width: 300px;
}

.footer-column h4 {
  font-size: 16px;
  margin-bottom: 15px;
}

.footer-column p,
.footer-column li,
.footer-column a {
  color: #E1E9F0;
  font-size: 14px;
  line-height: 1.6;
  text-decoration: none;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-bottom {
  background-color: #082F52;
  padding: 15px 20px;
  text-align: center;
}

.footer-bottom p {
  margin: 0;
  font-size: 13px;
  color: #C9D8E6;
}

/* =====================
   ORDEN HEADER
===================== */
.header-logo { order: 1; }
.header-search-big { order: 2; }
.header-phone { order: 3; }
.header-cart { order: 4; }

/* =====================
   FIX FINAL – DLAA
===================== */
.caracteristica-card h3,
.caracteristica-card p {
  background: none;
}



/* Contenedor principal de la página (contenido entre header y footer) */

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #222;
  overflow-x: hidden;
}

.woocommerce-cart,
.woocommerce-checkout {
  min-height: calc(100vh - 150px); /* Ajusta 150px según header + footer */
}

/* =====================
   WOOCOMMERCE - MI CUENTA
===================== */

.woocommerce-account .woocommerce {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 40px;
}

/* Menú lateral */
.woocommerce-MyAccount-navigation {
  background-color: #0A3A66;
  border-radius: 10px;
  padding: 15px 0;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 22px;
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s;
}

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
  background-color: #082F52;
}

/* Contenido */
.woocommerce-MyAccount-content {
  background-color: #ffffff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Formularios */
.woocommerce-account input,
.woocommerce-account button {
  border-radius: 6px;
}

.woocommerce-account button {
  background-color: #0A3A66;
  color: #fff;
  border: none;
  padding: 12px 18px;
  font-weight: 600;
}

.woocommerce-account button:hover {
  background-color: #082F52;
}

/* Responsive */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    padding: 0 20px;
  }

  .woocommerce-MyAccount-navigation {
    margin-bottom: 30px;
  }
}
.contacto-impoauto {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  font-family: Arial, sans-serif;
}

.contacto-header {
  text-align: center;
  margin-bottom: 40px;
}

.contacto-header h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.contacto-header p {
  color: #555;
  font-size: 16px;
}

.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.contacto-info {
  display: grid;
  gap: 20px;
}

.contacto-box {
  background: #f8f8f8;
  padding: 20px;
  border-radius: 8px;
}

.contacto-box h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.contacto-box p,
.contacto-box a {
  color: #333;
  text-decoration: none;
  font-size: 15px;
}

.contacto-form {
  background: #f8f8f8;
  padding: 30px;
  border-radius: 8px;
}

.contacto-form h3 {
  margin-bottom: 20px;
}

.contacto-form input,
.contacto-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.contacto-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contacto-form button {
  background: #0057b8;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
}

.contacto-form button:hover {
  background: #003f88;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .contacto-grid {
    grid-template-columns: 1fr;
  }
}
.envio-impoauto {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  font-family: Arial, sans-serif;
}

.envio-header {
  text-align: center;
  margin-bottom: 40px;
}

.envio-header h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.envio-header p {
  color: #555;
  font-size: 16px;
}

.envio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.envio-box {
  background: #f8f8f8;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.envio-box h3 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #0A3A66;
}

.envio-box p,
.envio-box a {
  color: #333;
  font-size: 15px;
  text-decoration: none;
}

.envio-box a:hover {
  text-decoration: underline;
}
/* Ocultar WhatsApp gigante de Click to Chat */
.ccw_plugin,
.ccw-footer,
.ccw-widget {
  display: none !important;
}
.header-logo img,
.logo-img {
  max-height: 100px;   /* 👈 clave */
  width: auto;
  height: auto;
  display: block;
}
.header-phone {
  font-size: 18px;        /* antes 14px */
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}
.header-search-big {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-search-big .search-form-modern {
  width: 100%;
  max-width: 480px;
}
.header-top {
  padding: 8px 30px; /* menos alto */
}








/* =====================
   FONDO GENERAL SUAVE
===================== */
body {
  background-color: #f2f2f2;
}

/* =====================
   SECCIÓN BENEFICIOS
===================== */
.beneficios-impoauto {
  padding: 60px 20px;
}

.beneficios-card {
  max-width: 1200px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 14px;
  padding: 40px 30px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;

  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* CADA BENEFICIO */
.beneficio-item {
  text-align: center;
}

.beneficio-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 15px;
}

.beneficio-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #222;
}

.beneficio-item p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .beneficios-card {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .beneficios-card {
    grid-template-columns: 1fr;
  }
}
body {
  background-color: #f2f2f2;
}
/* =====================
   TARJETA - PRODUCTOS DESTACADOS
===================== */
.destacados {
  max-width: 1300px;      /* ← más ancha */
  margin: 40px auto;      /* ← menos espacio arriba/abajo */
  background: #ffffff;
  border-radius: 16px;
  padding: 50px 50px;     /* ← más contenido, menos vacío */

  box-shadow: 0 6px 25px rgba(0,0,0,0.08);
}


.destacados h2 {
  text-align: center;
  margin-bottom: 50px;
}
/* =====================
   TARJETA - POR QUÉ ELEGIR DLAA
===================== */
.porque-dlaa {
  max-width: 1300px;      /* ← misma anchura */
  margin: 40px auto;
  background: #ffffff;
  border-radius: 16px;
  padding: 50px 50px;

  box-shadow: 0 6px 25px rgba(0,0,0,0.08);
}


.porque-dlaa h2 {
  text-align: center;
  margin-bottom: 50px;
}

.destacados h2,
.porque-dlaa h2 {
  margin-bottom: 35px; /* antes 50px */
}
@media (max-width: 768px) {
  .destacados,
  .porque-dlaa {
    padding: 35px 20px;
    margin: 30px 15px;
  }
}
.beneficios-impoauto {
  background: #f2f2f2;
  padding: 40px 40px;   /* ← menos espacio vertical */
}

/* MISMO ANCHO QUE DESTACADOS */
.beneficios-container {
  max-width: 1300px;    /* ← CLAVE */
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Tarjetas */
.beneficio-card {
  background: #ffffff;
  padding: 35px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  text-align: center;
}
.home-hero {
  background: #f2f2f2; /* gris suave como Chromium */
  padding: 30px 0;
}

.hero-layout {
  max-width: 1300px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 280px 1fr; /* marcas | imagen */
  gap: 20px;
}
.hero-marcas {
  background: #ffffff;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.hero-marcas h3 {
  font-size: 20px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.hero-marcas ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-marcas li {
  padding: 8px 0;
  cursor: pointer;
  font-size: 15px;
}

.hero-marcas li:hover {
  color: #1e7f43;
}
.hero-image-wrap {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: 420px;
}


/* ===== HERO TEXTO ===== */

.hero-text h1 {
  color: #ffffff;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 14px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.hero-text p {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 20px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

/* ===== BOTÓN HERO ===== */

.btn-hero-shop {
  background-color: #1E7F43;
  color: #ffffff;
  padding: 12px 26px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.btn-hero-shop:hover {
  background-color: #166534;
  transform: translateY(-2px);
}
.hero-right {
  position: relative;
}

.hero-text {
  position: absolute;
  right: 40px;   /* ← ahora a la derecha */
  bottom: 40px;

  max-width: 420px;
  text-align: right; /* ← alinea texto y botón */

  display: flex;
  flex-direction: column;
  align-items: flex-end; /* ← botón a la derecha */
  gap: 14px;

  z-index: 3;
}

.hero-image-wrap {
  position: relative;
}

.hero-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.1)
  );
  pointer-events: none; /* 🔥 ESTO ES LO IMPORTANTE */
}

/* =========================
   COLORES IMPAUTO – AZUL VIVO
========================= */

/* HEADER Y FOOTER */
header,
.site-header,
footer,
.site-footer {
  background-color: #0B3C8C !important;
  color: #ffffff;
}

/* MENÚ */
header nav,
.header-bottom,
.menu-principal {
  background-color: #062A63 !important;
}

/* LINKS DEL MENÚ */
.menu-principal a {
  color: #ffffff;
}

.menu-principal a:hover {
  color: #AFCDE7;
}

/* =====================
   FRANJA BLANCA LOGOS
===================== */
.marcas-strip {
  width: 100%;
  background: #ffffff;
  padding: 35px 0;
  overflow: hidden;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/* Track */
.marcas-strip-track {
  width: 100%;
  overflow: hidden;
}

/* Cinta en movimiento */
.marcas-strip-slide {
  display: flex;
  align-items: center;
  gap: 70px;
  width: max-content;
  animation: marcas-strip-scroll 50s linear infinite; /* ⬅ VELOCIDAD AQUÍ */
}

/* Logos */
.marcas-strip-slide img {
  height: 55px;
  width: auto;
  opacity: 0.75;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.marcas-strip-slide img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* Animación infinita */
@keyframes marcas-strip-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .marcas-strip-slide {
    gap: 45px;
    animation-duration: 55s; /* más lento en móvil */
  }

  .marcas-strip-slide img {
    height: 42px;
  }
}

/* =====================
   PROMO IMPAUTO
===================== */

.promo-impoauto {
  background: #f2f2f2;
  padding: 90px 20px;
}

.promo-inner {
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* =====================
   SECCIÓN NEBLINERAS DESTACADA
===================== */


.neblineras-section {
  background: #f3f3f3;
  padding: 80px 20px 120px;
}

.neblineras-container {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

/* CONTENEDOR DE IMAGEN */
.neblineras-image-box {
  width: 100%;
  max-width: 980px;        /* MÁS ANCHA */
  aspect-ratio: 16 / 9;   /* HORIZONTAL (CLAVE) */
  border-radius: 28px;
  overflow: hidden;
  margin: 0 auto;
  background: #ddd;
}

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

/* TARJETA FLOTANTE */
.neblineras-card {
  background: #ffffff;
  max-width: 750px;
  margin: -30px auto 0;   /* FLOTA SIN PEGARSE */
  padding: 18px 42px;
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.18);
  position: relative;
  z-index: 3;
}

.neblineras-card h2 {
  font-size: 40px;
  font-weight: 700;
  color: #111;
  margin: 0;
  line-height: 1.05;
  text-align: center; /* 👈 ESTA es la clave */
}


/* RESPONSIVE */
@media (max-width: 768px) {

  .neblineras-section {
    padding: 90px 16px 130px;
  }

  .neblineras-image-box {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 30px;
  }

  .neblineras-card {
    margin-top: -50px;
    padding: 26px 30px;
  }

  .neblineras-card h2 {
    font-size: 30px;
  }
}


/* =====================
   BLOQUE RASTREO CARGO
===================== */
/* SECCIÓN GENERAL */
.rastreo-cargo {
  display: flex;
  width: 100%;
  height: 260px;          /* ALTURA CONTROLADA */
  background: #000;
  overflow: hidden;
}

/* LADO IZQUIERDO */
.rastreo-cargo-texto {
  width: 50%;
  padding: 60px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* LADO DERECHO (CONTENEDOR) */
.rastreo-cargo-media {
  width: 50%;
  height: 100%;           /* RESPETA ALTURA DE LA SECCIÓN */
}

/* CONTENEDOR INTERNO */
.rastreo-cargo-media-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* IMAGEN */
.rastreo-cargo-media-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* LLENA SIN ESTIRARSE */
  display: block;
}
/* BOTÓN CARGO – RESET TOTAL */
.btn-cargo {
  all: unset;                    /* 👈 elimina estilos nativos */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 18px;
  padding: 10px 22px;

  background-color: #c4161c;     /* rojo Cargo */
  color: #ffffff;

  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;

  border-radius: 32px;
  cursor: pointer;

  transition: all 0.25s ease;
}

/* Hover */
.btn-cargo:hover {
  background-color: #a81216;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(196,22,28,0.45);
}

/* Quitar foco gris/azul */
.btn-cargo:focus {
  outline: none;
  box-shadow: none;
}
.btn-cargo {
  padding: 10px 22px !important;
  font-size: 15px !important;
  max-width: max-content !important;
}
/* =====================
   LOGO EN FOOTER
===================== */

/* LOGO FOOTER */
.footer-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 14px 0;   /* 👈 controla la altura */
  margin: 0;
}

.footer-logo-wrap img {
  height: 70px;      /* tamaño real del logo */
  width: auto;
  display: block;
}

/* FOOTER GENERAL */
.site-footer {
  padding-top: 0;
}
/* =====================
   SECCIÓN DESTACADOS
===================== */


.destacados h2 {
  font-size: 36px;
  color: #0A3A66;
  margin-bottom: 45px;
}

/* =====================
   CARRUSEL
===================== */
.carousel-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.carousel-viewport {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 30px;
  transition: transform 0.4s ease;
}

/* =====================
   TARJETA PRODUCTO
===================== */
.producto-card {
  background: #f2f2f2;                 /* 👈 gris suave */
  width: 250px;
  border-radius: 14px;
  padding: 18px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  flex-shrink: 0;
  text-align: left;
}

.producto-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}

/* IMAGEN */
.producto-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
}

/* TÍTULO */
.producto-card h3 {
  font-size: 18px;
  color: #0A3A66;
  margin-bottom: 8px;
}

/* DESCRIPCIÓN */
.producto-card p {
  font-size: 14px;
  color: #555;
  margin-bottom: 14px;
}

/* BOTÓN */
.producto-card .btn-principal {
  display: block;
  width: 100%;
  padding: 11px 0;
  background-color: #0A3A66;
  color: #ffffff;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.25s ease;
}

.producto-card .btn-principal:hover {
  background-color: #072c4d;
}

/* =====================
   BOTONES CARRUSEL
===================== */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #0A3A66;
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
}

.carousel-btn.prev { left: -22px; }
.carousel-btn.next { right: -22px; }

.carousel-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* =====================
   CONTENEDOR MARCAS
===================== */
.marcas-box {
  background: #ffffff;
  border-radius: 14px;
  padding: 20px 22px;
  height: 100%; /* mantiene misma altura que la imagen hover */
  box-sizing: border-box;
}

/* TÍTULO */
.marcas-box h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0A3A66;
  margin: 0 0 10px;
}

/* LÍNEA SEPARADORA */
.marcas-box hr {
  border: none;
  border-top: 1px solid #e2e2e2;
  margin: 0 0 14px;
}

/* LISTA */
.marcas-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}

.marcas-lista li {
  margin-bottom: 10px;
}

/* LINKS */
.marcas-lista a {
  text-decoration: none;
  color: #444;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s ease;
}

/* HOVER */
.marcas-lista a:hover {
  color: #0A3A66;
}

/* =====================
   SECCIÓN NEBLINERAS DESTACADA
===================== */


.neblineras-section {
  background: #f3f3f3;
  padding: 80px 20px 120px;
}

.neblineras-container {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

/* CONTENEDOR DE IMAGEN */
.neblineras-image-box {
  width: 100%;
  max-width: 980px;        /* MÁS ANCHA */
  aspect-ratio: 16 / 9;   /* HORIZONTAL (CLAVE) */
  border-radius: 28px;
  overflow: hidden;
  margin: 0 auto;
  background: #ddd;
}

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

/* TARJETA FLOTANTE */
.neblineras-card {
  background: #ffffff;
  max-width: 750px;
  margin: -30px auto 0;   /* FLOTA SIN PEGARSE */
  padding: 18px 42px;
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.18);
  position: relative;
  z-index: 3;
}

.neblineras-card h2 {
  font-size: 40px;
  font-weight: 700;
  color: #111;
  margin: 0;
  line-height: 1.05;
  text-align: center; /* 👈 ESTA es la clave */
}


/* RESPONSIVE */
@media (max-width: 768px) {

  .neblineras-section {
    padding: 90px 16px 130px;
  }

  .neblineras-image-box {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 30px;
  }

  .neblineras-card {
    margin-top: -50px;
    padding: 26px 30px;
  }

  .neblineras-card h2 {
    font-size: 30px;
  }
}


/* =====================
   BLOQUE RASTREO CARGO
===================== */
/* SECCIÓN GENERAL */
.rastreo-cargo {
  display: flex;
  width: 100%;
  height: 260px;          /* ALTURA CONTROLADA */
  background: #000;
  overflow: hidden;
}

/* LADO IZQUIERDO */
.rastreo-cargo-texto {
  width: 50%;
  padding: 60px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* LADO DERECHO (CONTENEDOR) */
.rastreo-cargo-media {
  width: 50%;
  height: 100%;           /* RESPETA ALTURA DE LA SECCIÓN */
}

/* CONTENEDOR INTERNO */
.rastreo-cargo-media-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* IMAGEN */
.rastreo-cargo-media-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* LLENA SIN ESTIRARSE */
  display: block;
}
/* BOTÓN CARGO – RESET TOTAL */
.btn-cargo {
  all: unset;                    /* 👈 elimina estilos nativos */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 18px;
  padding: 10px 22px;

  background-color: #c4161c;     /* rojo Cargo */
  color: #ffffff;

  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;

  border-radius: 32px;
  cursor: pointer;

  transition: all 0.25s ease;
}

/* Hover */
.btn-cargo:hover {
  background-color: #a81216;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(196,22,28,0.45);
}

/* Quitar foco gris/azul */
.btn-cargo:focus {
  outline: none;
  box-shadow: none;
}
.btn-cargo {
  padding: 10px 22px !important;
  font-size: 15px !important;
  max-width: max-content !important;
}
/* =====================
   LOGO EN FOOTER
===================== */

/* LOGO FOOTER */
.footer-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 14px 0;   /* 👈 controla la altura */
  margin: 0;
}

.footer-logo-wrap img {
  height: 70px;      /* tamaño real del logo */
  width: auto;
  display: block;
}

/* FOOTER GENERAL */
.site-footer {
  padding-top: 0;
}
/* =====================
   SECCIÓN DESTACADOS
===================== */


.destacados h2 {
  font-size: 36px;
  color: #0A3A66;
  margin-bottom: 45px;
}

/* =====================
   CARRUSEL
===================== */
.carousel-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.carousel-viewport {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 30px;
  transition: transform 0.4s ease;
}

/* =====================
   TARJETA PRODUCTO
===================== */
.producto-card {
  background: #f2f2f2;                 /* 👈 gris suave */
  width: 250px;
  border-radius: 14px;
  padding: 18px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  flex-shrink: 0;
  text-align: left;
}

.producto-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}

/* IMAGEN */
.producto-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
}

/* TÍTULO */
.producto-card h3 {
  font-size: 18px;
  color: #0A3A66;
  margin-bottom: 8px;
}

/* DESCRIPCIÓN */
.producto-card p {
  font-size: 14px;
  color: #555;
  margin-bottom: 14px;
}

/* BOTÓN */
.producto-card .btn-principal {
  display: block;
  width: 100%;
  padding: 11px 0;
  background-color: #0A3A66;
  color: #ffffff;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.25s ease;
}

.producto-card .btn-principal:hover {
  background-color: #072c4d;
}

/* =====================
   BOTONES CARRUSEL
===================== */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #0A3A66;
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
}

.carousel-btn.prev { left: -22px; }
.carousel-btn.next { right: -22px; }

.carousel-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* =====================
   CONTENEDOR MARCAS
===================== */
.marcas-box {
  background: #ffffff;
  border-radius: 14px;
  padding: 20px 22px;
  height: 100%; /* mantiene misma altura que la imagen hover */
  box-sizing: border-box;
}

/* TÍTULO */
.marcas-box h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0A3A66;
  margin: 0 0 10px;
}

/* LÍNEA SEPARADORA */
.marcas-box hr {
  border: none;
  border-top: 1px solid #e2e2e2;
  margin: 0 0 14px;
}

/* LISTA */
.marcas-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}

.marcas-lista li {
  margin-bottom: 10px;
}

/* LINKS */
.marcas-lista a {
  text-decoration: none;
  color: #444;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s ease;
}

/* HOVER */
.marcas-lista a:hover {
  color: #0A3A66;
}

/* ACTIVA (cuando estás dentro de la marca) */
.marcas-lista a:visited,
.marcas-lista a.active {
  color: #0A3A66;
  font-weight: 600;
}


/* ===============================
   REORDENAR CONTENIDO SUMMARY
================================ */
.single-product .summary {
  display: flex;
  flex-direction: column;
}

/* ORDEN VISUAL */
.single-product .product_title {
  order: 1;
}

.single-product .woocommerce-product-details__short-description {
  order: 2;
}

.single-product .price {
  order: 3;
}

.single-product form.cart {
  order: 4;
}

/* === CONTENEDOR BLANCO UNICO === */
.single-product .summary {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Titulo + descripcion comparten el MISMO fondo */
.single-product .product_title,
.single-product .woocommerce-product-details__short-description {
  background: #fff;
  width: 440px;              /* ← ancho del contenedor */
  padding: 22px 26px;
}

/* borde superior solo al titulo */
.single-product .product_title {
  border-radius: 18px 18px 0 0;
  margin: 0;
}

/* borde inferior solo a la descripcion */
.single-product .woocommerce-product-details__short-description {
  border-radius: 0 0 18px 18px;
  margin: 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

/* PRECIO FUERA DEL CONTENEDOR */
.single-product .summary .price {
  margin-top: 20px;
  text-align: center;
}

/* Centrar título del producto */
.single-product .product_title {
  text-align: center;
}

/* Tamaño de imagen principal del producto */
.single-product .woocommerce-product-gallery {
  max-width: 450px;   /* ajusta este valor */
  width: 100%;
}

/* Asegura que la imagen no se deforme */
.single-product .woocommerce-product-gallery img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* Mover imagen del producto hacia la derecha */
.single-product .woocommerce-product-gallery {
  margin-left: 190px;   /* mueve a la derecha */
}

/* Mover TODO el bloque derecho del producto hacia la izquierda */
.single-product div.product {
  display: grid !important;
  grid-template-columns: 70% 30% !important;
  column-gap: 20px;
}

/* Asegurar que el bloque derecho use su columna */
.single-product .summary.entry-summary {
   position: relative;
  left: -80px;
}

.single-product .summary.entry-summary .price {
  position: relative;
  left: -190px;
}

/* ===== CANTIDAD ===== */
.single-product .quantity {
  margin-right: 15px;
}

.single-product .quantity input.qty {
  width: 90px;          /* ancho */
  height: 48px;         /* alto */
  font-size: 16px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #ccc;
}

/* ===== BOTÓN AÑADIR AL CARRITO ===== */
.single-product .single_add_to_cart_button {
  height: 48px;         /* mismo alto que cantidad */
  padding: 0 60px;      /* ancho del botón */
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  background-color: #0A3A66;
  border: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

/* Hover elegante */
.single-product .single_add_to_cart_button:hover {
  background-color: #082F52;
  transform: translateY(-1px);
}

/* ===== ALINEACIÓN HORIZONTAL ===== */
.single-product form.cart {
  display: flex;
  align-items: center;
}

.single_add_to_cart_button {
  width: auto !important;
  display: inline-flex !important;
  padding: 0 40px !important;
  height: 48px;
}

.single_add_to_cart_button {
  white-space: nowrap;
  flex-wrap: nowrap;
  text-align: center;
}

.single_add_to_cart_button {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;        /* tamaño de letra */
  line-height: 1;        /* evita que se vaya hacia arriba */
  white-space: nowrap;

  padding: 14px 24px;    /* altura real del botón */
}

/* Mover SOLO cantidad + botón añadir al carrito a la izquierda */
.single-product form.cart {
  margin-left: -210px; /* 👈 ajusta este valor */
}

/* Input cantidad – borde más fuerte */
.single-product .quantity input.qty {
  border: 2px solid #999;   /* gris más fuerte */
  color: #000;
}

/* Flechitas en Chrome, Edge, Safari */
.single-product .quantity input.qty::-webkit-inner-spin-button,
.single-product .quantity input.qty::-webkit-outer-spin-button {
  opacity: 1;
  filter: invert(0); /* asegura color oscuro */
}

/* Flechitas en Firefox */
.single-product .quantity input.qty {
  -moz-appearance: textfield;
}

/* Firefox controles  */
.single-product .quantity input.qty::-moz-number-spin-box {
  border-color: #999;
}

/* =====================================================
   CONTENEDOR BLANCO – DESCRIPCIÓN DE PRODUCTO
   ===================================================== */

.single-product .woocommerce-Tabs-panel--description {
  background: #ffffff;
  padding: 30px;
  margin-top: 30px;

  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);

  box-sizing: border-box;
}

/* Título "Descripción" si Woo lo imprime */
.single-product .woocommerce-Tabs-panel--description h2 {
  margin-top: 0;
  margin-bottom: 20px;
}


/* =====================================================
   CONTENEDOR BLANCO – DESCRIPCIÓN LARGA DEL PRODUCTO
   ===================================================== */

.single-product .woocommerce-product-details__long-description,
.single-product .woocommerce-Tabs-panel--description {
  background: #ffffff;
  padding: 30px;
  margin-top: 30px;

  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);

  box-sizing: border-box;
}

/* Título "Descripción" */
.single-product .woocommerce-product-details__long-description h2,
.single-product .woocommerce-Tabs-panel--description h2 {
  margin-top: 0;
  margin-bottom: 20px;
}
/* =====================================================
SIMILARES + RECIÉN VISTOS (FULL WIDTH - estilo tienda)
===================================================== */
.productos-similares-container,
.productos-recientes-container{
  background: #ffffff;
  width: 100%;
  max-width: none;
  margin: 30px 0 45px;
  padding: 18px 40px;
  border-radius: 0;
  box-shadow: none;
}

/* Título */
.productos-similares-container h2,
.productos-recientes-container h2{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: #111;
}

/* Grid WooCommerce dentro del bloque */
.productos-similares-container ul.products,
.productos-recientes-container ul.products{
  margin: 0;
  padding: 0;
}

/* =====================================================
TARJETAS (MISMO DISEÑO EN SIMILARES + RECIÉN VISTOS)
===================================================== */
.productos-similares-container li.product,
.productos-recientes-container li.product{
  background: #fff;
  display: flex;
  flex-direction: column;

  padding: 14px;
  min-height: 360px;

  border: 1px solid rgba(0,0,0,0.08);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.12),
    0 0 0 1px rgba(0,0,0,0.02);

  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.productos-similares-container li.product:hover,
.productos-recientes-container li.product:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
}

/* Imagen */
.productos-similares-container li.product img,
.productos-recientes-container li.product img{
  max-height: 190px;
  object-fit: contain;
  margin-bottom: 10px;
}

/* Precio */
.productos-similares-container li.product .price,
.productos-recientes-container li.product .price{
  margin: 8px 0 8px;
}

/* Botón */
.productos-similares-container li.product .button,
.productos-recientes-container li.product .button{
  align-self: center;
  margin-top: 6px;
  margin-bottom: 10px;

  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;

  background: #0d3c7b;
  color: #fff;

  border-radius: 999px;
  text-align: center;
  white-space: nowrap;

  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;

  /* Mover botón a la izquierda (se mantiene también en hover) */
  transform: translateX(-53px);
}

.productos-similares-container li.product .button:hover,
.productos-recientes-container li.product .button:hover{
  background: #0a2f63;
  transform: translateX(-30px) scale(1.05); /* ← mantiene el offset */
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

/* Responsive (para ambos contenedores) */
@media (max-width: 768px){
  .productos-similares-container,
  .productos-recientes-container{
    padding: 16px 14px;
    margin: 20px 0 35px;
  }

  /* (Opcional) en móvil menos desplazamiento */
  .productos-similares-container li.product .button,
  .productos-recientes-container li.product .button{
    transform: translateX(-12px);
  }

  .productos-similares-container li.product .button:hover,
  .productos-recientes-container li.product .button:hover{
    transform: translateX(-12px) scale(1.05);
  }
}

/* =====================================================
CONTENEDOR DESCRIPCIÓN DEL PRODUCTO
===================================================== */
.single-product .product-simple-description{
  background: #ffffff;
  max-width: 500px;
  margin: 40px auto;
  padding: 28px 30px;

  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);

  line-height: 1.6;
}

.product-simple-description h2{
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 22px;
  font-weight: 700;
  color: #111;
}

.product-simple-description p{
  margin-bottom: 14px;
  font-size: 16px;
  color: #222;
}

.product-simple-description ul,
.product-simple-description ol{
  padding-left: 20px;
  margin-bottom: 16px;
}

@media (max-width: 768px){
  .product-simple-description{
    max-width: 100%;
    margin: 28px 14px;
    padding: 22px 18px;
    border-radius: 12px;
  }

  .product-simple-description h2{
    font-size: 20px;
  }
}

/* =====================================================
PRECIO + BADGE EN LA MISMA LÍNEA (SINGLE PRODUCT)
===================================================== */
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 45px; /* mueve precio+stock a la derecha */
}

/* Badge stock */
.impoauto-stock-badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  white-space: nowrap;
}

.impoauto-stock-badge.in-stock{
  background: #e6f6ea;
  color: #1e7f43;
  border: 1px solid #bfe7cf;
}

.impoauto-stock-badge.out-of-stock{
  background: #fdeaea;
  color: #a61b1b;
  border: 1px solid #f5bcbc;
}

/* Seguro extra si tu theme imprime stock aparte */
.single-product .product .stock{
  display: none !important;
}

/* Ocultar badge en tarjetas (similares + recientes + tienda) */
.productos-similares-container .impoauto-stock-badge,
.productos-recientes-container .impoauto-stock-badge,
.woocommerce ul.products .impoauto-stock-badge{
  display: none !important;
}


/* =====================================================
BOTÓN: OFFSET FIJO (no vuelve a su posición antigua)
===================================================== */
.productos-similares-container,
.productos-recientes-container{
  --btn-offset-x: -53px; /* ← AQUI ajustas qué tanto a la izquierda */
}

/* Estado normal */
.productos-similares-container li.product .button,
.productos-recientes-container li.product .button{
  transform: translateX(var(--btn-offset-x)) !important;
}

/* Hover: mantiene el mismo offset + escala */
.productos-similares-container li.product .button:hover,
.productos-recientes-container li.product .button:hover{
  transform: translateX(var(--btn-offset-x)) scale(1.05) !important;
}

/* =========================
MEGA MARCAS (FRONT PAGE)
========================= */
.mega-marcas {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
  padding: 18px 16px;
  max-width: 330px;
}

.mega-marcas h3{
  margin: 0 0 10px;
  font-size: 18px;
}

.mega-marcas hr{
  border: 0;
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 0 0 12px;
}

/* layout */
.mega-marcas-wrap{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* lista izquierda */
.mega-marcas .marcas-lista{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 170px;
}

.mega-marcas .marca-item{
  margin: 0;
  padding: 0;
}

.mega-marcas .marca-item a{
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #0b1b2a;
  font-weight: 600;
  transition: background .18s ease, transform .18s ease, color .18s ease;
}

.mega-marcas .marca-item:hover a,
.mega-marcas .marca-item.is-active a{
  background: rgba(10, 58, 102, 0.10);
  color: #0A3A66;
  transform: translateX(2px);
}

/* flyout */
.mega-marcas .lineas-flyout{
  position: absolute;
  left: calc(170px + 14px);
  top: 0;
  width: 320px;
  min-height: 260px;
  background: #0A1633;            /* azul oscuro */
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
  padding: 16px 16px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 50;
}

.mega-marcas.is-open .lineas-flyout{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-marcas .lineas-panel{
  display: none;
}

.mega-marcas .lineas-panel.is-active{
  display: block;
}

.mega-marcas .lineas-panel h4{
  margin: 2px 0 10px;
  font-size: 16px;
  font-weight: 800;
}

.mega-marcas .lineas-panel ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}

.mega-marcas .lineas-panel a{
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  opacity: 0.92;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background .18s ease, opacity .18s ease, transform .18s ease;
  display: inline-block;
}

.mega-marcas .lineas-panel a:hover{
  background: rgba(255,255,255,0.12);
  opacity: 1;
  transform: translateX(2px);
}

.mega-marcas .placeholder{
  margin: 10px 0 0;
  opacity: 0.8;
}

/* responsive: en móvil mejor sin flyout (opcional básico) */
@media (max-width: 860px){
  .mega-marcas{ max-width: 100%; }
  .mega-marcas .lineas-flyout{
    position: static;
    width: 100%;
    margin-top: 12px;
    left: auto;
    min-height: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    display: none;
  }
  .mega-marcas.is-open .lineas-flyout{ display: block; }
}





/* ---------- Ocultar badges/stock en tarjetas (solo single) ---------- */
.woocommerce ul.products li.product .stock,
.woocommerce ul.products li.product .impo-stock-badge,
.woocommerce ul.products li.product .stock-badge{
  display: none !important;
}

/* ---------- Responsive fino ---------- */
@media (max-width: 520px){
  .woocommerce .woocommerce-before-shop-loop{
    gap: 10px !important;
  }
  .impo-result-count{
    font-size: 20px;
  }
}


/* =========================
   OCULTAR SIDEBAR / WIDGETS EN WOOCOMMERCE
   (SEGURO: no rompe carrito ni checkout)
========================= */



/* ⚠️ MUY IMPORTANTE
   NO ocultar <aside> genérico
   porque WooCommerce puede usarlo
   para carrito / checkout / layout */
/*
.woocommerce-page aside{
  display:none !important;
}


/* SOLO para WooCommerce en general (NO carrito/checkout) */
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) #primary,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) .content-area,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) .site-main,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) main{
  display: block !important;
  width: 100% !important;
  max-width: 1300px;
  margin: 0 auto !important;
}











/* =========================================================
   WOOCOMMERCE SHOP (TIENDA) - DISEÑO TARJETAS + CONTROLES
   SOLO ARCHIVES: /shop, categorías, tags, búsqueda
   (NO afecta single: similares/recientes)
========================================================= */

/* ---------- Layout del área de tienda (ancho real) ---------- */
body.woocommerce-shop .site-main,
body.woocommerce-shop .content-area,
body.woocommerce-shop .woocommerce,
body.woocommerce-shop .entry-content,
body.tax-product_cat .site-main,
body.tax-product_cat .content-area,
body.tax-product_cat .woocommerce,
body.tax-product_cat .entry-content,
body.tax-product_tag .site-main,
body.tax-product_tag .content-area,
body.tax-product_tag .woocommerce,
body.tax-product_tag .entry-content,
body.search.woocommerce .site-main,
body.search.woocommerce .content-area,
body.search.woocommerce .woocommerce,
body.search.woocommerce .entry-content{
  width: 100% !important;
  max-width: 1300px;
  margin: 0 auto !important;
  padding: 0 18px !important;
}

/* Ocultamos el contador default de Woo SOLO en tienda */
body.woocommerce-shop .woocommerce-result-count,
body.tax-product_cat .woocommerce-result-count,
body.tax-product_tag .woocommerce-result-count,
body.search.woocommerce .woocommerce-result-count{
  display: none !important;
}

/* ---------- Barra superior: contador izq + orden der (solo tienda) ---------- */
body.woocommerce-shop .woocommerce-before-shop-loop,
body.tax-product_cat .woocommerce-before-shop-loop,
body.tax-product_tag .woocommerce-before-shop-loop,
body.search.woocommerce .woocommerce-before-shop-loop{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin: 0 0 18px !important;
  width: 100% !important;
}

/* ---------- Ordenamiento bonito (solo tienda) ---------- */
body.woocommerce-shop .woocommerce-ordering,
body.tax-product_cat .woocommerce-ordering,
body.tax-product_tag .woocommerce-ordering,
body.search.woocommerce .woocommerce-ordering{
  margin: 0 !important;
  position: relative;
}

body.woocommerce-shop .woocommerce-ordering select,
body.tax-product_cat .woocommerce-ordering select,
body.tax-product_tag .woocommerce-ordering select,
body.search.woocommerce .woocommerce-ordering select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 12px 44px 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  background: #fff !important;

  font-weight: 800 !important;
  color: #111 !important;

  box-shadow: 0 12px 26px rgba(0,0,0,0.10) !important;
  cursor: pointer;
  outline: none;
}

body.woocommerce-shop .woocommerce-ordering::after,
body.tax-product_cat .woocommerce-ordering::after,
body.tax-product_tag .woocommerce-ordering::after,
body.search.woocommerce .woocommerce-ordering::after{
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.65;
  font-size: 14px;
}

/* =========================================================
   GRID: 4-5 productos por fila (auto-fill)
   SOLO TIENDA / CATEGORÍAS / TAGS / SEARCH
========================================================= */
body.woocommerce-shop ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products,
body.search.woocommerce ul.products{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;

  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  justify-content: stretch !important;
  align-items: stretch !important;
}

/* Forzar que Woo no meta "columns-x" con widths fijos (solo tienda) */
body.woocommerce-shop ul.products.columns-3 li.product,
body.woocommerce-shop ul.products.columns-4 li.product,
body.woocommerce-shop ul.products.columns-5 li.product,
body.woocommerce-shop ul.products.columns-6 li.product,
body.tax-product_cat ul.products.columns-3 li.product,
body.tax-product_cat ul.products.columns-4 li.product,
body.tax-product_cat ul.products.columns-5 li.product,
body.tax-product_cat ul.products.columns-6 li.product,
body.tax-product_tag ul.products.columns-3 li.product,
body.tax-product_tag ul.products.columns-4 li.product,
body.tax-product_tag ul.products.columns-5 li.product,
body.tax-product_tag ul.products.columns-6 li.product,
body.search.woocommerce ul.products.columns-3 li.product,
body.search.woocommerce ul.products.columns-4 li.product,
body.search.woocommerce ul.products.columns-5 li.product,
body.search.woocommerce ul.products.columns-6 li.product{
  width: auto !important;
}

/* Items sin float (solo tienda) */
body.woocommerce-shop ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product,
body.search.woocommerce ul.products li.product{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
  list-style: none !important;

  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10) !important;
  overflow: hidden !important;

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

  transition: transform .15s ease, box-shadow .15s ease;
}

body.woocommerce-shop ul.products li.product:hover,
body.tax-product_cat ul.products li.product:hover,
body.tax-product_tag ul.products li.product:hover,
body.search.woocommerce ul.products li.product:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.14) !important;
}

/* Link contenedor (solo tienda) */
body.woocommerce-shop ul.products li.product a.woocommerce-LoopProduct-link,
body.tax-product_cat ul.products li.product a.woocommerce-LoopProduct-link,
body.tax-product_tag ul.products li.product a.woocommerce-LoopProduct-link,
body.search.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Imagen compacta (solo tienda) */
body.woocommerce-shop ul.products li.product a img,
body.tax-product_cat ul.products li.product a img,
body.tax-product_tag ul.products li.product a img,
body.search.woocommerce ul.products li.product a img{
  width: 100% !important;
  height: 180px !important;
  object-fit: contain !important;
  background: #f7f7f8 !important;
  padding: 8px !important;
  margin: 0 !important;
}

/* Título (solo tienda) */
body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
body.tax-product_tag ul.products li.product .woocommerce-loop-product__title,
body.search.woocommerce ul.products li.product .woocommerce-loop-product__title{
  padding: 10px 10px 2px !important;
  margin: 0 !important;

  font-size: 14.5px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  color: #0A3A66 !important;
}

/* Precio (solo tienda) */
body.woocommerce-shop ul.products li.product .price,
body.tax-product_cat ul.products li.product .price,
body.tax-product_tag ul.products li.product .price,
body.search.woocommerce ul.products li.product .price{
  padding: 4px 10px 8px !important;
  margin: 0 !important;

  font-size: 15px !important;
  font-weight: 900 !important;
  color: #2f6b2f !important;
}

/* Botón estable (solo tienda) */
body.woocommerce-shop ul.products li.product .button,
body.woocommerce-shop ul.products li.product a.button,
body.tax-product_cat ul.products li.product .button,
body.tax-product_cat ul.products li.product a.button,
body.tax-product_tag ul.products li.product .button,
body.tax-product_tag ul.products li.product a.button,
body.search.woocommerce ul.products li.product .button,
body.search.woocommerce ul.products li.product a.button{
  margin: 8px 10px 10px !important;
  padding: 10px 10px !important;

  border-radius: 9px !important;
  background: #0A3A66 !important;
  color: #fff !important;

  font-size: 14px !important;
  font-weight: 900 !important;

  display: block !important;
  width: calc(100% - 20px) !important;
  text-align: center !important;

  border: 0 !important;
  box-shadow: 0 8px 18px rgba(10,58,102,0.22) !important;

  transform: none !important;
  transition: filter .15s ease;
}

body.woocommerce-shop ul.products li.product .button:hover,
body.tax-product_cat ul.products li.product .button:hover,
body.tax-product_tag ul.products li.product .button:hover,
body.search.woocommerce ul.products li.product .button:hover{
  filter: brightness(1.05);
  transform: none !important;
}

/* Responsive */
@media (max-width: 520px){
  body.woocommerce-shop .woocommerce-before-shop-loop,
  body.tax-product_cat .woocommerce-before-shop-loop,
  body.tax-product_tag .woocommerce-before-shop-loop,
  body.search.woocommerce .woocommerce-before-shop-loop{
    gap: 10px !important;
  }
}


/* Quitar franja/fondo del título SOLO en WooCommerce */
.woocommerce-page .entry-title,
.woocommerce-page h1.page-title,
.woocommerce-page .woocommerce-products-header__title{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
}

/* Si el azul viene de un contenedor alrededor del título */
.woocommerce-page .woocommerce-products-header{
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}


/* FIX: asegurar que carrito/checkout SI muestren contenido */
body.woocommerce-cart main,
body.woocommerce-checkout main,
body.woocommerce-cart #primary,
body.woocommerce-checkout #primary,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-cart .content-area,
body.woocommerce-checkout .content-area,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

/* Por si un grid/flex raro los rompe */
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content{
  position: relative !important;
  float: none !important;
}


/* Ocultar sidebar/widgets en WooCommerce, PERO NO en carrito/checkout */
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) #secondary,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) #sidebar,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) .sidebar,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) .secondary,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) .widget-area,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) .widget,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) [id*="sidebar"],
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) [class*="sidebar"],
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) [class*="widget-area"],
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) .wp-block-search,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) .wp-block-archives,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) .wp-block-categories{
  display: none !important;
}







/* =====================================================
SINGLE PRODUCT: SIMILARES + RECIÉN VISTOS (DISEÑO PRO)
(usa las clases exactas que imprime tu functions.php)
===================================================== */


/* Contenedor general (SOLO single product) */
.single-product .productos-similares-container,
.single-product .productos-recientes-container{
  background: #ffffff;
  width: 100%;
  max-width: 1300px;
  margin: 34px auto 50px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  box-sizing: border-box;
}

/* Título */
.single-product .productos-similares-container h2,
.single-product .productos-recientes-container h2{
  margin: 6px 10px 18px;
  font-size: 22px;
  font-weight: 800;
  color: #111;
}

/* Grid: usamos los UL que tú imprimiste en PHP */
.single-product ul.impoauto-similares-products,
.single-product ul.impoauto-recientes-products{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 14px !important;
}

/* Tarjeta */
.single-product ul.impoauto-similares-products li.product,
.single-product ul.impoauto-recientes-products li.product{
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10) !important;
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.single-product ul.impoauto-similares-products li.product:hover,
.single-product ul.impoauto-recientes-products li.product:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.14) !important;
}

/* Imagen */
.single-product ul.impoauto-similares-products li.product img,
.single-product ul.impoauto-recientes-products li.product img{
  width: 100% !important;
  height: 180px !important;
  object-fit: contain !important;
  background: #f7f7f8 !important;
  padding: 8px !important;
  margin: 0 0 10px !important;
  border-radius: 10px !important;
}

/* Título del producto */
.single-product ul.impoauto-similares-products li.product .woocommerce-loop-product__title,
.single-product ul.impoauto-recientes-products li.product .woocommerce-loop-product__title{
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  color: #0A3A66 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}

/* Precio */
.single-product ul.impoauto-similares-products li.product .price,
.single-product ul.impoauto-recientes-products li.product .price{
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #2f6b2f !important;
  margin: 0 0 10px !important;
}

/* Botón (centrado y “bonito”, sin offsets raros) */
.single-product ul.impoauto-similares-products li.product .button,
.single-product ul.impoauto-recientes-products li.product .button{
  margin-top: auto !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  background: #0A3A66 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  border: 0 !important;
  box-shadow: 0 10px 18px rgba(10,58,102,0.22) !important;
  transform: none !important; /* clave: no se mueve */
}
.single-product ul.impoauto-similares-products li.product .button:hover,
.single-product ul.impoauto-recientes-products li.product .button:hover{
  filter: brightness(1.06);
  transform: none !important;
}

/* Responsive */
@media (max-width: 768px){
  .single-product .productos-similares-container,
  .single-product .productos-recientes-container{
    margin: 26px 14px 38px;
    padding: 16px 14px;
    border-radius: 12px;
  }
}

/* =====================================================
FIX: SIMILARES + RECIÉN VISTOS (SINGLE) NO ANGOSTOS
(mata el float/width de .columns-4 y fuerza grid)
===================================================== */
/* Contenedor full ancho, centrado */
.single-product .productos-similares-container,
.single-product .productos-recientes-container{
  max-width: 1300px !important;
  margin: 34px auto 50px !important;
  box-sizing: border-box !important;
}

/* Fuerza GRID aunque Woo meta .products.columns-4 */
.single-product .productos-similares-container ul.products,
.single-product .productos-recientes-container ul.products{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Mata el layout por columnas de Woo (floats/widths) */
.single-product .productos-similares-container ul.products li.product,
.single-product .productos-recientes-container ul.products li.product{
  float: none !important;
  width: auto !important;
  clear: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Imagen consistente */
.single-product .productos-similares-container ul.products li.product img,
.single-product .productos-recientes-container ul.products li.product img{
  width: 100% !important;
  height: 180px !important;
  object-fit: contain !important;
}

/* Botón NO se mueva (sin offsets raros aquí) */
.single-product .productos-similares-container ul.products li.product .button,
.single-product .productos-recientes-container ul.products li.product .button{
  transform: none !important;
}
.single-product .productos-similares-container ul.products li.product .button:hover,
.single-product .productos-recientes-container ul.products li.product .button:hover{
  transform: none !important;
}

/* =====================================================
SINGLE: FORZAR ORDEN EN FILA (similares arriba, recientes abajo)
Evita que se vayan a la derecha de la descripción
===================================================== */
/* Las 3 secciones deben ser de ancho completo */
.single-product .product-simple-description,
.single-product .productos-similares-container,
.single-product .productos-recientes-container{
  display: block !important;
  width: 100% !important;
  max-width: 1300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* clave: rompe cualquier float o side layout */
  clear: both !important;
  float: none !important;
}

/* Si el contenedor padre está en flex/grid, esto fuerza a que cada bloque ocupe toda la fila */
.single-product .product-simple-description,
.single-product .productos-similares-container,
.single-product .productos-recientes-container{
  flex: 0 0 100% !important;
  grid-column: 1 / -1 !important;
}



/* =====================================================
ELIMINAR ESPACIO BLANCO ENTRE TEXTO Y BOTÓN (SIMILARES + RECIÉN VISTOS)
===================================================== */
/* Quitar márgenes innecesarios */
.single-product ul.impoauto-similares-products li.product *,
.single-product ul.impoauto-recientes-products li.product *{
  margin-bottom: 0 !important;
}

/* Título: margen controlado */
.single-product ul.impoauto-similares-products li.product .woocommerce-loop-product__title,
.single-product ul.impoauto-recientes-products li.product .woocommerce-loop-product__title{
  margin: 6px 0 4px !important;
}

/* Precio: sin hueco */
.single-product ul.impoauto-similares-products li.product .price,
.single-product ul.impoauto-recientes-products li.product .price{
  margin: 0 0 6px !important;
}

/* Botón pegado al contenido */
.single-product ul.impoauto-similares-products li.product .button,
.single-product ul.impoauto-recientes-products li.product .button{
  margin-top: 6px !important;
}

/* Tarjeta sin altura forzada */
.single-product ul.impoauto-similares-products li.product,
.single-product ul.impoauto-recientes-products li.product{
  min-height: unset !important;
}





/* =====================================================
   BOTÓN TARJETAS – ANIMACIÓN HOVER
===================================================== */
.single-product .productos-similares-container li.product .button,
.single-product .productos-recientes-container li.product .button{
  width: auto !important;
  min-width: 50px;
  max-width: 180px;

  margin-left: 0 !important;
  margin-right: auto !important;

  padding: 8px 16px !important;
  border-radius: 10px !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.single-product .productos-similares-container li.product .button:hover,
.single-product .productos-recientes-container li.product .button:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 22px rgba(10,58,102,0.35) !important;
}


/* =====================================================
   TARJETAS – BORDE + SOMBRA MÁS MARCADA
===================================================== */
.single-product ul.impoauto-similares-products li.product,
.single-product ul.impoauto-recientes-products li.product{
  border: 1.5px solid rgba(0,0,0,0.12) !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,0.12),
    0 0 0 1px rgba(0,0,0,0.04) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.single-product ul.impoauto-similares-products li.product:hover,
.single-product ul.impoauto-recientes-products li.product:hover{
  border-color: rgba(10,58,102,0.35) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,0.18),
    0 0 0 1px rgba(10,58,102,0.15) !important;

  transform: translateY(-3px);
}

    /* ===== TARJETAS: POSICIÓN FIJA + HOVER CORRECTO ===== */
.single-product .productos-similares-container li.product,
.single-product .productos-recientes-container li.product{
  --card-x: -160px; /* ← ajusta aquí si quieres moverlas */
  transform: translateX(var(--card-x));
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Hover: se eleva, NO se mueve lateralmente */
.single-product .productos-similares-container li.product:hover,
.single-product .productos-recientes-container li.product:hover{
  transform: translateX(var(--card-x)) translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}


    
    
/* =====================================================
   DESCRIPCIÓN: CONTROL REAL DE ANCHO (SINGLE PRODUCT)
   (PONER AL FINAL DEL CSS)
===================================================== */

:root{
  --desc-max: 980px;   /* ← cambia aquí el ancho */
}

/* Ancho controlado del contenedor descripción */
.single-product .product-simple-description{
  width: 100% !important;                 /* ocupa el espacio disponible */
  max-width: var(--desc-max) !important;  /* ← aquí manda */
  margin: 40px auto !important;           /* centrado */
  box-sizing: border-box !important;
  clear: both !important;
  float: none !important;
}

/* Por si algún padre es grid/flex y lo estira raro */
.single-product .product-simple-description{
  justify-self: center !important;
  align-self: start !important;
}

/* ===== FIX HOVER: SUBE Y SE PONE ENCIMA (SIN MOVERSE DE LADO) ===== */
.single-product .productos-similares-container li.product,
.single-product .productos-recientes-container li.product{
  --card-x: -225px;              /* tu desplazamiento a la izquierda */
  position: relative !important; /* necesario para z-index */
  z-index: 1 !important;
  transform: translateX(var(--card-x)) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
  will-change: transform;
}

.single-product .productos-similares-container li.product:hover,
.single-product .productos-recientes-container li.product:hover{
  z-index: 50 !important; /* clave: queda por encima de las otras */
  transform: translateX(var(--card-x)) translateY(-10px) !important;
}

/* Solo al link principal (imagen/título), NO al botón */
.single-product .productos-similares-container li.product a.woocommerce-LoopProduct-link,
.single-product .productos-recientes-container li.product a.woocommerce-LoopProduct-link{
  transform: none !important;
}


/* =====================================================
   BOTÓN SIMILARES + RECIÉN VISTOS – HOVER PRO
===================================================== */

.single-product .productos-similares-container li.product .button,
.single-product .productos-recientes-container li.product .button{
  box-shadow: none !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  will-change: transform;
}

.single-product .productos-similares-container li.product .button:hover,
.single-product .productos-recientes-container li.product .button:hover{
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 10px 22px rgba(10,58,102,0.35) !important;
  filter: brightness(1.12);
}







/* ==============================
   OVERRIDE FINAL HOVER BOTÓN
   (similares + recientes)
============================== */
.single-product .productos-similares-container ul.products li.product .button,
.single-product .productos-recientes-container ul.products li.product .button,
.single-product ul.impoauto-similares-products li.product .button,
.single-product ul.impoauto-recientes-products li.product .button,
.single-product .productos-similares-container ul.products li.product a.button,
.single-product .productos-recientes-container ul.products li.product a.button,
.single-product ul.impoauto-similares-products li.product a.button,
.single-product ul.impoauto-recientes-products li.product a.button{
  box-shadow: none !important;   /* sin sombra estático */
  transform: none !important;
  filter: none !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  will-change: transform;
}

.single-product .productos-similares-container ul.products li.product .button:hover,
.single-product .productos-recientes-container ul.products li.product .button:hover,
.single-product ul.impoauto-similares-products li.product .button:hover,
.single-product ul.impoauto-recientes-products li.product .button:hover,
.single-product .productos-similares-container ul.products li.product a.button:hover,
.single-product .productos-recientes-container ul.products li.product a.button:hover,
.single-product ul.impoauto-similares-products li.product a.button:hover,
.single-product ul.impoauto-recientes-products li.product a.button:hover{
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 12px 26px rgba(10,58,102,0.35) !important;
  filter: brightness(1.12) !important;
}


/* =====================================================
   FIX: BOTÓN CENTRADO Y CONSISTENTE (similares + recientes)
   (PONER AL FINAL)
===================================================== */

.single-product .productos-similares-container li.product .button,
.single-product .productos-recientes-container li.product .button,
.single-product .productos-similares-container li.product a.button,
.single-product .productos-recientes-container li.product a.button{
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;

  width: 100% !important;
  max-width: 210px !important;     /* ← ajusta ancho del botón */
  margin: 10px auto 0 !important;  /* ← centrado real */
  padding: 9px 16px !important;

  box-shadow: none !important;     /* sin sombra en reposo */
  transform: none !important;

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

/* Hover: se eleva e ilumina */
.single-product .productos-similares-container li.product .button:hover,
.single-product .productos-recientes-container li.product .button:hover,
.single-product .productos-similares-container li.product a.button:hover,
.single-product .productos-recientes-container li.product a.button:hover{
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 10px 22px rgba(10,58,102,0.35) !important;
  filter: brightness(1.10) !important;
}









/* =====================================================
   FIX NIVEL: todos los botones a la misma altura
   (similares + recién vistos) — PONER AL FINAL
===================================================== */

/* 1) La tarjeta debe empujar el contenido y reservar una zona fija para el botón */
.single-product .productos-similares-container li.product,
.single-product .productos-recientes-container li.product{
  display: flex !important;
  flex-direction: column !important;
}

/* 2) Reservamos una “zona” de botón con altura fija */
.single-product .productos-similares-container li.product .button,
.single-product .productos-recientes-container li.product .button,
.single-product .productos-similares-container li.product a.button,
.single-product .productos-recientes-container li.product a.button{
  /* se va al fondo siempre */
  margin-top: auto !important;

  /* mismo nivel y misma altura visual */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 35px !important;          /* ← iguala altura */
  line-height: 44px !important;     /* ← evita que uno “suba” */
  padding: 0 18px !important;       /* ← padding fijo */

  width: 100% !important;
  max-width: 160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 10px !important;   /* ← mismo aire abajo */

  box-shadow: none !important;      /* sin sombra base */
  transform: none !important;

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

/* Hover */
.single-product .productos-similares-container li.product .button:hover,
.single-product .productos-recientes-container li.product .button:hover,
.single-product .productos-similares-container li.product a.button:hover,
.single-product .productos-recientes-container li.product a.button:hover{
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 10px 22px rgba(10,58,102,0.35) !important;
  filter: brightness(1.10) !important;
}





/* =====================================================
   ANCHO DEL CONTENEDOR DE TARJETAS
   (similares + recién vistos)
===================================================== */

:root{
  --cards-max-width: 1000px;  /* ← AJUSTA AQUÍ: 900, 1000, 1100, etc */
}

.single-product .productos-similares-container,
.single-product .productos-recientes-container{
  width: 100% !important;
  max-width: var(--cards-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  box-sizing: border-box !important;
  clear: both !important;
  float: none !important;
}










/* =====================================================
   CARRUSEL HORIZONTAL (SIMILARES + RECIÉN VISTOS) - SINGLE
   (sin saltar a otra fila)
===================================================== */

/* El UL se vuelve carrusel */
.single-product .productos-similares-container ul.products,
.single-product .productos-recientes-container ul.products,
.single-product ul.impoauto-similares-products,
.single-product ul.impoauto-recientes-products{
  display: flex !important;              /* en vez de grid */
  flex-wrap: nowrap !important;          /* NO baja a otra fila */
  gap: 14px !important;

  overflow-x: auto !important;           /* scroll horizontal */
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;         /* “snap” tipo carrusel */
  scroll-padding: 14px;

  padding: 10px 6px 16px !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Cada tarjeta con ancho fijo para carrusel */
.single-product .productos-similares-container ul.products > li.product,
.single-product .productos-recientes-container ul.products > li.product,
.single-product ul.impoauto-similares-products > li.product,
.single-product ul.impoauto-recientes-products > li.product{
  flex: 0 0 280px !important;            /* ← ancho tarjeta (cambia aquí) */
  max-width: 280px !important;
  scroll-snap-align: start;
}

/* Ocultar scrollbar (se sigue pudiendo deslizar) */
.single-product .productos-similares-container ul.products::-webkit-scrollbar,
.single-product .productos-recientes-container ul.products::-webkit-scrollbar,
.single-product ul.impoauto-similares-products::-webkit-scrollbar,
.single-product ul.impoauto-recientes-products::-webkit-scrollbar{
  height: 0px;
}

/* Ajuste responsive */
@media (max-width: 768px){
  .single-product .productos-similares-container ul.products > li.product,
  .single-product .productos-recientes-container ul.products > li.product,
  .single-product ul.impoauto-similares-products > li.product,
  .single-product ul.impoauto-recientes-products > li.product{
    flex-basis: 240px !important;
    max-width: 240px !important;
  }
}







/* =====================================================
   CARRUSEL HORIZONTAL (SIMILARES + RECIÉN VISTOS) – SINGLE
   Estilo "Productos destacados"
===================================================== */

/* Contenedor: que no recorte sombras */
.single-product .productos-similares-container,
.single-product .productos-recientes-container{
  overflow: visible !important;
}

/* Lista: una sola fila y scroll horizontal */
.single-product .productos-similares-container ul.products,
.single-product .productos-recientes-container ul.products,
.single-product ul.impoauto-similares-products,
.single-product ul.impoauto-recientes-products{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;

  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;

  padding: 8px 16px 16px !important;
  margin: 0 !important;
  list-style: none !important;

  scroll-snap-type: x mandatory;
}

/* Ocultar scrollbar (opcional) */
.single-product .productos-similares-container ul.products::-webkit-scrollbar,
.single-product .productos-recientes-container ul.products::-webkit-scrollbar,
.single-product ul.impoauto-similares-products::-webkit-scrollbar,
.single-product ul.impoauto-recientes-products::-webkit-scrollbar{
  height: 0px;
}

/* Tarjeta: ancho fijo tipo carrusel */
.single-product .productos-similares-container li.product,
.single-product .productos-recientes-container li.product,
.single-product ul.impoauto-similares-products li.product,
.single-product ul.impoauto-recientes-products li.product{
  flex: 0 0 280px !important;   /* ← tamaño tarjeta (ajusta) */
  max-width: 280px !important;

  scroll-snap-align: start;
  margin: 0 !important;

  /* MUY IMPORTANTE: anula offsets viejos */
  left: auto !important;
  transform: none !important;
}

/* Hover tarjeta: solo subir */
.single-product .productos-similares-container li.product:hover,
.single-product .productos-recientes-container li.product:hover,
.single-product ul.impoauto-similares-products li.product:hover,
.single-product ul.impoauto-recientes-products li.product:hover{
  transform: translateY(-6px) !important;
  z-index: 5;
}

/* Responsive */
@media (max-width: 768px){
  .single-product .productos-similares-container li.product,
  .single-product .productos-recientes-container li.product,
  .single-product ul.impoauto-similares-products li.product,
  .single-product ul.impoauto-recientes-products li.product{
    flex-basis: 240px !important;
    max-width: 240px !important;
  }
}

/* Flechas tipo carrusel */
.single-product .productos-similares-container,
.single-product .productos-recientes-container{
  position: relative;
}

.single-product .impo-carousel-btn{
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  z-index: 30;
  background: rgba(13,60,123,0.92);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.single-product .impo-carousel-btn:hover{
  filter: brightness(1.08);
}

.single-product .impo-carousel-btn.prev{ left: 10px; }
.single-product .impo-carousel-btn.next{ right: 10px; }

/* (Opcional) degradado suave a los lados */
.single-product .productos-similares-container::before,
.single-product .productos-similares-container::after,
.single-product .productos-recientes-container::before,
.single-product .productos-recientes-container::after{
  content:"";
  position:absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 15;
  pointer-events:none;
}
.single-product .productos-similares-container::before,
.single-product .productos-recientes-container::before{
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,1));
}
.single-product .productos-similares-container::after,
.single-product .productos-recientes-container::after{
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,0.01), rgba(255,255,255,1));
}




/* ===== Flechas SIEMPRE arriba (las tarjetas no las tapan) ===== */
.single-product .productos-similares-container,
.single-product .productos-recientes-container{
  position: relative !important;
  overflow: visible !important;
}

/* Asegura que el carrusel quede por debajo de las flechas */
.single-product .productos-similares-container ul.products,
.single-product .productos-recientes-container ul.products,
.single-product ul.impoauto-similares-products,
.single-product ul.impoauto-recientes-products{
  position: relative !important;
  z-index: 1 !important;
}

/* Tarjetas: no deben superar las flechas */
.single-product .productos-similares-container li.product,
.single-product .productos-recientes-container li.product,
.single-product ul.impoauto-similares-products li.product,
.single-product ul.impoauto-recientes-products li.product{
  position: relative !important;
  z-index: 1 !important;
}

/* Hover tarjeta: sube pero sigue debajo de flechas */
.single-product .productos-similares-container li.product:hover,
.single-product .productos-recientes-container li.product:hover,
.single-product ul.impoauto-similares-products li.product:hover,
.single-product ul.impoauto-recientes-products li.product:hover{
  z-index: 2 !important;
}

/* Flechas */
.single-product .impo-carousel-btn{
  position: absolute !important;
  top: 55% !important;
  transform: translateY(-50%) !important;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  z-index: 999 !important; /* CLAVE */
  background: rgba(13,60,123,0.92);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.single-product .impo-carousel-btn.prev{ left: 10px; }
.single-product .impo-carousel-btn.next{ right: 10px; }

/* Estado deshabilitado */
.single-product .impo-carousel-btn.is-disabled{
  opacity: .35 !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: none !important;
  filter: grayscale(0.2);
}

.carousel-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}



/*.carousel-track{
  overflow-x: auto !important;
  overflow-y: visible !important;
  flex-wrap: nowrap !important;
  scroll-behavior: smooth;
}





/* Ocultar flechas cuando no aplican */
.carousel-btn.is-hidden{
  display: none !important;
}


/* =====================================================
   ESPACIO ENTRE HEADER Y CONTENIDO (SINGLE PRODUCT)
===================================================== */

/* Baja todo el bloque del producto */
.single-product .site-main,
.single-product main,
.single-product .content-area{
  padding-top: 40px !important; /* ajusta: 30px / 40px / 60px */
}






/* =========================================
   CONTENEDOR LIBRE: TÍTULO + DESC CORTA
   (editable: ancho, alto, posición)
========================================= */
:root{
  --box-w: 520px;      /* ancho */
  --box-min-h: 0px;    /* altura mínima (0 = no fuerza espacio) */
  --box-pad: 22px;     /* padding */
  --box-x: 0px;        /* mover izquierda(-) / derecha(+) */
  --box-y: 0px;        /* mover arriba(-) / abajo(+) */
}

/* el “contenedor libre” */
.single-product .summary.entry-summary .impo-free-box{
  width: var(--box-w);
  min-height: var(--box-min-h);
  padding: var(--box-pad);

  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  box-sizing: border-box;

  transform: translate(var(--box-x), var(--box-y));
}

/* adentro: que no meta fondos dobles */
.single-product .summary.entry-summary .impo-free-box .product_title,
.single-product .summary.entry-summary .impo-free-box .woocommerce-product-details__short-description{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* espacio entre título y descripción */
.single-product .summary.entry-summary .impo-free-box .product_title{
  margin-bottom: 12px !important;
  text-align: center;
}


/* Centrar texto dentro del contenedor blanco */
.single-product .impo-free-box{
  text-align: center;
}

/* Ajustes finos opcionales */
.single-product .impo-free-box .product_title{
  text-align: center;
}

.single-product .impo-free-box .woocommerce-product-details__short-description{
  text-align: center;
}








/* =========================
   FIX CARRUSEL HOME (Productos destacados)
   ========================= */
.destacados .carousel-wrapper{
  position: relative;
}

.destacados .carousel-viewport{
  overflow: hidden !important; /* clave: oculta el extra, no scroll */
}

.destacados .carousel-track{
  display: flex !important;
  gap: 30px !important;
  overflow: visible !important; /* NO scroll aquí */
  flex-wrap: nowrap !important;
  transition: transform 0.4s ease !important; /* flechas mueven con transform */
}

/* Flechas del carrusel home */
.destacados .carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
}

.destacados .carousel-btn.prev{ left: -22px; }
.destacados .carousel-btn.next{ right: -22px; }







@media (max-width: 1200px){
  .woocommerce ul.products li.product{
    flex-basis: calc((100% - (18px * 3)) / 4) !important;
    max-width: calc((100% - (18px * 3)) / 4) !important;
  }
}
@media (max-width: 900px){
  .woocommerce ul.products li.product{
    flex-basis: calc((100% - (18px * 2)) / 3) !important;
    max-width: calc((100% - (18px * 2)) / 3) !important;
  }
}
@media (max-width: 650px){
  .woocommerce ul.products li.product{
    flex-basis: calc((100% - 18px) / 2) !important;
    max-width: calc((100% - 18px) / 2) !important;
  }
}
@media (max-width: 420px){
  .woocommerce ul.products li.product{
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}


/*.woocommerce ul.products li.product{
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product .button{
  margin-top: auto;/
}/




/* Quitar floats/clears del tema */
.woocommerce ul.products li.product{
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 !important;
  min-width: 0 !important;
}





/* =========================================================
   TIENDA / CATEGORÍAS / TAGS / BÚSQUEDA
   5 columnas + bloque pegado a la derecha (espacio a la izquierda)
   (PONER AL FINAL DEL CSS)
========================================================= */

/* 1) Asegura que el contenedor de tienda tenga ancho real */
body.woocommerce-shop .woocommerce,
body.woocommerce-shop .site-main,
body.woocommerce-shop .content-area,
body.tax-product_cat .woocommerce,
body.tax-product_cat .site-main,
body.tax-product_cat .content-area,
body.tax-product_tag .woocommerce,
body.tax-product_tag .site-main,
body.tax-product_tag .content-area,
body.search.woocommerce .woocommerce,
body.search.woocommerce .site-main,
body.search.woocommerce .content-area{
  width: 100% !important;
  max-width: 100% !important;
}

/* 2) EL GRID (solo tienda/cats/tags/search) */
body.woocommerce-shop ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products,
body.search.woocommerce ul.products{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px !important;

  /* ancho total del bloque de tarjetas */
  max-width: 1500px !important;   /* ajusta si quieres más/menos ancho */
  width: 100% !important;

  /* 🔥 esto crea el espacio a la izquierda (bloque a la derecha) */
  margin-left: auto !important;
  margin-right: 0 !important;

  padding-right: 20px !important;
  padding-left: 0 !important;

  list-style: none !important;
  float: none !important;
  clear: both !important;
}

/* 3) Quitar floats/clear del tema (esto arregla filas que “se van” a la izquierda) */
body.woocommerce-shop ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product,
body.search.woocommerce ul.products li.product{
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 !important;
  min-width: 0 !important;

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

/* 4) Evitar que Woo meta widths por .columns-? */
body.woocommerce-shop ul.products.columns-3 li.product,
body.woocommerce-shop ul.products.columns-4 li.product,
body.woocommerce-shop ul.products.columns-5 li.product,
body.woocommerce-shop ul.products.columns-6 li.product,
body.tax-product_cat ul.products.columns-3 li.product,
body.tax-product_cat ul.products.columns-4 li.product,
body.tax-product_cat ul.products.columns-5 li.product,
body.tax-product_cat ul.products.columns-6 li.product,
body.tax-product_tag ul.products.columns-3 li.product,
body.tax-product_tag ul.products.columns-4 li.product,
body.tax-product_tag ul.products.columns-5 li.product,
body.tax-product_tag ul.products.columns-6 li.product,
body.search.woocommerce ul.products.columns-3 li.product,
body.search.woocommerce ul.products.columns-4 li.product,
body.search.woocommerce ul.products.columns-5 li.product,
body.search.woocommerce ul.products.columns-6 li.product{
  width: auto !important;
}

/* 5) Botón siempre al fondo (evita espacios raros) */
body.woocommerce-shop ul.products li.product .button,
body.tax-product_cat ul.products li.product .button,
body.tax-product_tag ul.products li.product .button,
body.search.woocommerce ul.products li.product .button{
  margin-top: auto !important;
}

/* 6) Responsive */
@media (max-width: 1200px){
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: 1300px !important;
  }
}

@media (max-width: 900px){
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 980px !important;
  }
}

@media (max-width: 650px){
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 700px !important;
  }
}

@media (max-width: 420px){
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: 1fr !important;
    max-width: 420px !important;
  }
}



/* =====================================================
   TIENDA – LAYOUT CONTROLADO (ÚNICO Y DEFINITIVO)
===================================================== */

/* Contenedor de la tienda */
.impo-shop-wrap{
  width: 100%;
  max-width: 1500px;     /* ancho del bloque de tarjetas */
  margin-left: auto;    /* empuja el bloque a la derecha */
  margin-right: 0;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Grid de productos */
.impo-shop-wrap ul.products{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px !important;

  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
  clear: both !important;
}

/* Tarjetas */
.impo-shop-wrap ul.products li.product{
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 !important;
  min-width: 0 !important;

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

/* Botón siempre abajo */
.impo-shop-wrap ul.products li.product .button{
  margin-top: auto !important;
}

/* =====================
   RESPONSIVE
===================== */
@media (max-width: 1200px){
  .impo-shop-wrap{
    max-width: 1300px;
  }
  .impo-shop-wrap ul.products{
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 900px){
  .impo-shop-wrap{
    max-width: 1000px;
  }
  .impo-shop-wrap ul.products{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 650px){
  .impo-shop-wrap{
    max-width: 720px;
  }
  .impo-shop-wrap ul.products{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 420px){
  .impo-shop-wrap{
    max-width: 100%;
    margin: 0 auto;
    padding: 0 12px;
  }
  .impo-shop-wrap ul.products{
    grid-template-columns: 1fr !important;
  }
}


/* =====================================================
   RESET TOTAL DE LA TIENDA WOOCOMMERCE
   (no afecta single, carrito ni checkout)
===================================================== */

/* 1️⃣ Mata TODO layout previo */
body.woocommerce-shop ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products,
body.search.woocommerce ul.products{
  all: unset !important;
  display: grid !important;
  box-sizing: border-box !important;
}

/* 2️⃣ Nuevo layout limpio */
body.woocommerce-shop ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products,
body.search.woocommerce ul.products{
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  gap: 18px !important;

  max-width: 1500px !important;
  margin-left: auto !important;   /* ← espacio a la izquierda */
  margin-right: 0 !important;

  padding-right: 20px !important;
  list-style: none !important;
}

/* 3️⃣ Reset total de las tarjetas */
body.woocommerce-shop ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product,
body.search.woocommerce ul.products li.product{
  all: unset !important;

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

  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.12) !important;
  padding: 12px !important;
}

/* 4️⃣ Imagen controlada */
body.woocommerce-shop ul.products li.product img,
body.tax-product_cat ul.products li.product img,
body.tax-product_tag ul.products li.product img,
body.search.woocommerce ul.products li.product img{
  width: 100% !important;
  height: 180px !important;
  object-fit: contain !important;
}

/* 5️⃣ Botón siempre abajo */
body.woocommerce-shop ul.products li.product .button,
body.tax-product_cat ul.products li.product .button,
body.tax-product_tag ul.products li.product .button,
body.search.woocommerce ul.products li.product .button{
  margin-top: auto !important;
}

/* =====================
   RESPONSIVE
===================== */
@media (max-width: 1200px){
  body.woocommerce-shop ul.products{
    grid-template-columns: repeat(4,1fr) !important;
  }
}
@media (max-width: 900px){
  body.woocommerce-shop ul.products{
    grid-template-columns: repeat(3,1fr) !important;
  }
}
@media (max-width: 650px){
  body.woocommerce-shop ul.products{
    grid-template-columns: repeat(2,1fr) !important;
  }
}
@media (max-width: 420px){
  body.woocommerce-shop ul.products{
    grid-template-columns: 1fr !important;
  }
}




/* =====================================================
   FIX FINAL TIENDA: 5 POR FILA + SIN BRINCOS + A LA DERECHA
   (Shop / Categorías / Tags / Búsqueda)
===================================================== */

body.woocommerce-shop .woocommerce-before-shop-loop,
body.tax-product_cat .woocommerce-before-shop-loop,
body.tax-product_tag .woocommerce-before-shop-loop,
body.search.woocommerce .woocommerce-before-shop-loop{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

/* El select a la derecha siempre */
body.woocommerce-shop .woocommerce-ordering,
body.tax-product_cat .woocommerce-ordering,
body.tax-product_tag .woocommerce-ordering,
body.search.woocommerce .woocommerce-ordering{
  margin-left: auto !important;
}

/* ✅ GRID real, 5 columnas, pegado a la derecha */
body.woocommerce-shop ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products,
body.search.woocommerce ul.products{
  /* por si antes quedó “reset raro” */
  display: grid !important;

  /* 5 tarjetas por fila (ajusta 240px si las quieres más grandes/pequeñas) */
  grid-template-columns: repeat(5, minmax(0, 240px)) !important;

  gap: 18px !important;

  /* CLAVE: alinear el bloque de columnas a la derecha */
  justify-content: end !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 20px 30px !important;

  list-style: none !important;
  float: none !important;
  clear: both !important;
}

/* Woo a veces inyecta pseudo-elementos para floats: los anulamos */
body.woocommerce-shop ul.products::before,
body.woocommerce-shop ul.products::after,
body.tax-product_cat ul.products::before,
body.tax-product_cat ul.products::after,
body.tax-product_tag ul.products::before,
body.tax-product_tag ul.products::after,
body.search.woocommerce ul.products::before,
body.search.woocommerce ul.products::after{
  content: none !important;
  display: none !important;
}

/* ✅ IMPORTANTE: mata el “clear” que rompe la segunda fila */
body.woocommerce-shop ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product,
body.search.woocommerce ul.products li.product{
  float: none !important;
  clear: none !important; /* <- ESTA es la razón del salto a la izquierda */
  width: auto !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

/* Botón siempre abajo */
body.woocommerce-shop ul.products li.product .button,
body.tax-product_cat ul.products li.product .button,
body.tax-product_tag ul.products li.product .button,
body.search.woocommerce ul.products li.product .button{
  margin-top: auto !important;
}

/* Responsive: baja columnas */
@media (max-width: 1400px){
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: repeat(4, minmax(0, 240px)) !important;
  }
}
@media (max-width: 1100px){
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: repeat(3, minmax(0, 240px)) !important;
  }
}
@media (max-width: 800px){
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 480px){
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: 1fr !important;
  }
}






/* =====================================================
   LAYOUT TIENDA CON SIDEBAR (izquierda) + GRID (derecha)
===================================================== */

.impo-shop-layout{
  max-width: 1500px;
  margin: 0 auto;
  padding: 10px 20px 40px;
  display: grid;
  grid-template-columns: 300px 1fr; /* sidebar | productos */
  gap: 22px;
  align-items: start;
}

/* Sidebar */
.impo-shop-sidebar{
  position: sticky;
  top: 18px;
}

.impo-filter-widget{
  background: #fff;
  border-radius: 14px;
  padding: 16px 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 14px;
}

.impo-filter-title{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
  color: #0A3A66;
}

/* Categorías (árbol) */
.impo-cat-tree ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.impo-cat-tree li{
  margin: 0;
  padding: 6px 0;
}

.impo-cat-tree li a{
  text-decoration: none;
  color: #1b1b1b;
  font-weight: 700;
  font-size: 14px;
}

.impo-cat-tree li a:hover{
  color: #0A3A66;
}

.impo-cat-tree .children{
  margin-top: 6px;
  padding-left: 14px;
  border-left: 2px solid rgba(10,58,102,0.10);
}

/* Precio */
.impo-price-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.impo-price-row input{
  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.16);
  outline: none;
  font-weight: 700;
}

.impo-price-btn{
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: #0A3A66;
  color: #fff;
  font-weight: 900;
}

/* Productos en la columna derecha */
.impo-shop-content{
  min-width: 0;
}

/* IMPORTANTE: tu grid de productos debe estar dentro de .impo-shop-content */
.impo-shop-content ul.products{
  justify-content: start !important;   /* ahora ya NO pegado a la derecha */
  padding: 0 !important;
}

/* Responsive */
@media (max-width: 1100px){
  .impo-shop-layout{
    grid-template-columns: 1fr;
  }
  .impo-shop-sidebar{
    position: relative;
    top: auto;
  }
}



.woocommerce-container{
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 18px;
  box-sizing: border-box;
}


body.woocommerce-shop ul.products{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }


/* =====================================================
   CONTROL FINO: "Orden por defecto" alineado con TIENDA
   ✅ Edita solo: --order-y
===================================================== */
:root{
  --order-y: -70px;   /* 👈 más negativo = sube | menos negativo = baja */
}

/* El contenedor que está antes del loop (donde vive el select) */
body.woocommerce-shop .woocommerce-before-shop-loop,
body.tax-product_cat .woocommerce-before-shop-loop,
body.tax-product_tag .woocommerce-before-shop-loop,
body.search.woocommerce .woocommerce-before-shop-loop{
  position: relative !important;
  display: block !important;
  overflow: visible !important;
}

/* El form del select */
body.woocommerce-shop .woocommerce-before-shop-loop form.woocommerce-ordering,
body.tax-product_cat .woocommerce-before-shop-loop form.woocommerce-ordering,
body.tax-product_tag .woocommerce-before-shop-loop form.woocommerce-ordering,
body.search.woocommerce .woocommerce-before-shop-loop form.woocommerce-ordering{
  position: absolute !important;
  top: var(--order-y) !important;   /* 👈 AQUÍ SE MUEVE */
  right: 20px !important;

  margin: 0 !important;
  float: none !important;
  clear: none !important;
  z-index: 9999 !important;
}

/* Por si el tema le pone margenes al select */
body.woocommerce-shop .woocommerce-before-shop-loop .woocommerce-ordering,
body.tax-product_cat .woocommerce-before-shop-loop .woocommerce-ordering,
body.tax-product_tag .woocommerce-before-shop-loop .woocommerce-ordering,
body.search.woocommerce .woocommerce-before-shop-loop .woocommerce-ordering{
  margin: 0 !important;
}

/* Seguridad: que el select no empuje nada raro */
body.woocommerce-shop .woocommerce-before-shop-loop .woocommerce-ordering select,
body.tax-product_cat .woocommerce-before-shop-loop .woocommerce-ordering select,
body.tax-product_tag .woocommerce-before-shop-loop .woocommerce-ordering select,
body.search.woocommerce .woocommerce-before-shop-loop .woocommerce-ordering select{
  max-width: 240px !important;
}



/* =====================================================
   OCULTAR "ORDEN POR DEFECTO" (Shop / Cat / Tag / Search)
===================================================== */
body.woocommerce-shop .woocommerce-ordering,
body.tax-product_cat .woocommerce-ordering,
body.tax-product_tag .woocommerce-ordering,
body.search.woocommerce .woocommerce-ordering{
  display: none !important;
}





/* =====================================================
   IMPAUTO – MISMAS TARJETAS EN TIENDA Y CATEGORÍAS
   ✅ 4 por fila en: Shop / Categorías / Tags / Búsqueda
   PONER AL FINAL DEL CSS
===================================================== */

/* (Opcional) Ocultar el "Orden por defecto" */
body.woocommerce-shop .woocommerce-ordering,
body.tax-product_cat .woocommerce-ordering,
body.tax-product_tag .woocommerce-ordering,
body.search.woocommerce .woocommerce-ordering{
  display: none !important;
}

/* Grid 4 columnas uniforme */
body.woocommerce-shop ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products,
body.search.woocommerce ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* ✅ 4 por fila */
  gap: 22px !important;

  /* mismo “bloque” centrado como tu primera imagen */
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 0 18px 30px !important;

  list-style: none !important;
}

/* Evita que Woo/tema meta floats/clears que rompen filas */
body.woocommerce-shop ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product,
body.search.woocommerce ul.products li.product{
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* Responsive */
@media (max-width: 1100px){
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 1000px !important;
  }
}
@media (max-width: 750px){
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 720px !important;
  }
}
@media (max-width: 420px){
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}




/* =====================================================
   CARRUSEL: SIMILARES + RECIÉN VISTOS (SINGLE)
===================================================== */

/* Contenedor bonito y que no “corte” sombras */
.single-product .productos-similares-container,
.single-product .productos-recientes-container{
  background: #fff;
  max-width: 1300px;
  margin: 34px auto 50px;
  padding: 22px 22px 10px;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  position: relative;
  overflow: visible !important;
}

/* El UL se vuelve carrusel (NO GRID) */
.single-product .productos-similares-container ul.products,
.single-product .productos-recientes-container ul.products{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;

  padding: 10px 6px 18px !important;
  margin: 0 !important;
  list-style: none !important;

  scroll-snap-type: x mandatory;
  scroll-padding: 14px;
}

/* Tarjetas con ancho fijo tipo carrusel */
.single-product .productos-similares-container ul.products > li.product,
.single-product .productos-recientes-container ul.products > li.product{
  flex: 0 0 280px !important;
  max-width: 280px !important;
  scroll-snap-align: start;

  /* anula offsets raros */
  float: none !important;
  width: auto !important;
  left: auto !important;
  transform: none !important;
}

/* Ocultar scrollbar (opcional) */
.single-product .productos-similares-container ul.products::-webkit-scrollbar,
.single-product .productos-recientes-container ul.products::-webkit-scrollbar{
  height: 0px;
}

/* Flechas */
.single-product .impo-carousel-btn{
  position: absolute !important;
  top: 55% !important;
  transform: translateY(-50%) !important;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  z-index: 999 !important;
  background: rgba(13,60,123,0.92);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}
.single-product .impo-carousel-btn.prev{ left: 10px; }
.single-product .impo-carousel-btn.next{ right: 10px; }

.single-product .impo-carousel-btn.is-disabled{
  opacity: .35 !important;
  pointer-events: none !important;
  cursor: default !important;
  box-shadow: none !important;
}

/* Degradado suave lateral (opcional, evita “raro” en esquinas) */
.single-product .productos-similares-container::before,
.single-product .productos-similares-container::after,
.single-product .productos-recientes-container::before,
.single-product .productos-recientes-container::after{
  content:"";
  position:absolute;
  top: 70px;              /* debajo del título */
  bottom: 18px;
  width: 40px;
  z-index: 15;
  pointer-events:none;
  border-radius: 18px;
}
.single-product .productos-similares-container::before,
.single-product .productos-recientes-container::before{
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.single-product .productos-similares-container::after,
.single-product .productos-recientes-container::after{
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* Responsive */
@media (max-width: 768px){
  .single-product .productos-similares-container ul.products > li.product,
  .single-product .productos-recientes-container ul.products > li.product{
    flex-basis: 240px !important;
    max-width: 240px !important;
  }
}


/* =====================================================
   TARJETAS WooCommerce: que la imagen ocupe más espacio
   (Shop / Categorías / Búsqueda / relacionados)
===================================================== */

/* Contenedor de la imagen */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link{
  display: block;
}

/* “Caja” donde va la imagen */
.woocommerce ul.products li.product a img{
  width: 100% !important;
  height: 230px !important;          /* sube/baja este valor */
  object-fit: cover !important;    /* NO corta la imagen (la agranda dentro) */
  object-position: center center;
  display: block;
  margin: 0 auto !important;
}

/* Quita el fondo gris/área gris alrededor (si viene de tu CSS) */
.woocommerce ul.products li.product .woocommerce-product-gallery__image,
.woocommerce ul.products li.product .woocommerce-product-gallery__wrapper,
.woocommerce ul.products li.product .woocommerce-product-gallery,
.woocommerce ul.products li.product .woocommerce-product-thumbnail,
.woocommerce ul.products li.product .wc-product-image,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail{
  background: transparent !important;
}

/* Si tu tema puso un “marco” gris en el link de la imagen */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link{
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}


/* ====== TARJETA COMPLETA (li.product) ====== */
.woocommerce ul.products li.product{
  background:#fff !important;
  border-radius:18px !important;
  overflow: visible !important; /* para que NO se corte al elevarse */
  border:2px solid transparent !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  position: relative !important;
}

/* Hover real sobre todo el contenedor */
.woocommerce ul.products li.product:hover{
  transform: translateY(-10px) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.16) !important;
  border-color: #0A3A66 !important;
  z-index: 99 !important;
}

/* Evita que el <a> “sea la tarjeta” */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link{
  display:block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow:none !important;
}

/* Imagen opcional (acompaña) */
.woocommerce ul.products li.product img{
  transition: transform .25s ease !important;
}
.woocommerce ul.products li.product:hover img{
  transform: scale(1.04) !important;
}






/* TARJETA BASE */
.woocommerce ul.products li.product{
  background:#fff !important;
  border-radius:18px !important;
  overflow: visible !important;
  border:2px solid transparent !important;

  /* ⬇ transición más elegante */
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s cubic-bezier(.22,.61,.36,1),
    border-color .35s ease !important;

  position: relative !important;
}

/* HOVER SUAVE */
.woocommerce ul.products li.product:hover{
  transform: translateY(-8px) !important; /* menos brusco */
  box-shadow: 0 22px 40px rgba(0,0,0,.14) !important;
  border-color: #0A3A66 !important;
  z-index: 99 !important;
}

/* IMAGEN – micro zoom elegante */
.woocommerce ul.products li.product img{
  transition: transform .45s cubic-bezier(.22,.61,.36,1) !important;
}

.woocommerce ul.products li.product:hover img{
  transform: scale(1.03) !important; /* muy sutil */
}



/* ============================
   MINI HOVER BOTÓN AÑADIR CARRITO
============================ */

/* Botón base */
.woocommerce ul.products li.product .button{
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1),
    background-color .25s ease,
    color .25s ease !important;
}

/* Hover elegante */
.woocommerce ul.products li.product .button:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.18) !important;
}

/* Click (feedback sutil) */
.woocommerce ul.products li.product .button:active{
  transform: translateY(0) scale(.98) !important;
  box-shadow: 0 6px 12px rgba(0,0,0,.15) !important;
}






/* =====================================================
   ✅ RESPONSIVE TELÉFONO (MÓVIL) – IMPAUTO (PEGAR COMPLETO)
   Pegar al FINAL del style.css
===================================================== */

/* -----------------------------------------
   1) REGLAS GENERALES MÓVIL
----------------------------------------- */
@media (max-width: 768px){

  body{
    overflow-x: hidden;
  }

  .container{
    max-width: 100%;
    padding: 0 16px;
  }

  /* Evita que se rompa el layout por algún elemento ancho */
  img, video, iframe{
    max-width: 100%;
    height: auto;
  }

  /* -----------------------------------------
     2) HEADER (logo + buscador + carrito)
     Ajusta selectores si tu header usa otros
  ----------------------------------------- */

  /* Si tu header tiene un contenedor tipo .header-top / .header-inner */
  .header-top,
  .header-inner,
  .site-header .container{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* Logo centrado */
  .site-logo,
  .logo,
  .header-logo{
    display: flex !important;
    justify-content: center !important;
  }
  .site-logo img,
  .logo img,
  .header-logo img{
    max-height: 34px !important;
    width: auto !important;
  }

  /* Buscador full width */
  .header-search,
  .search-bar,
  .woocommerce-product-search{
    width: 100% !important;
  }
  .header-search input,
  .search-bar input,
  .woocommerce-product-search .search-field{
    width: 100% !important;
    border-radius: 999px !important;
  }

  /* Teléfono + carrito: en una fila */
  .header-right,
  .header-actions,
  .header-icons{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* -----------------------------------------
     3) MENÚ (horizontal scroll suave)
  ----------------------------------------- */
  .header-bottom,
  nav,
  .menu-principal{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }

  .menu-principal ul{
    display: inline-flex !important;
    gap: 16px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
  }

  .menu-principal a{
    display: inline-block !important;
    padding: 10px 10px !important;
    border-radius: 10px !important;
  }

  /* -----------------------------------------
     4) FRONT PAGE HERO (columna)
  ----------------------------------------- */
  .home-hero{
    padding: 18px 0 !important;
  }

  .hero-layout{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Mega marcas ocupa todo arriba */
  .mega-marcas{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* En móvil, el flyout se comporta como “acordeón” debajo */
  .mega-marcas-wrap{
    flex-direction: column !important;
    gap: 10px !important;
  }

  .mega-marcas .marcas-lista{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .mega-marcas .marca-item a{
    padding: 12px 10px !important;
  }

  .mega-marcas .lineas-flyout{
    position: static !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    min-height: auto !important;
    margin-top: 8px !important;

    /* Por defecto oculto; se muestra cuando .is-open */
    display: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .mega-marcas.is-open .lineas-flyout{
    display: block !important;
  }

  .mega-marcas .lineas-panel ul{
    grid-template-columns: 1fr 1fr !important;
  }

  /* Hero derecha: imagen arriba + texto abajo (no absoluto) */
  .hero-right{
    position: relative !important;
  }

  .hero-image-wrap{
    border-radius: 16px !important;
  }
  .hero-image-wrap img{
    max-height: 320px !important;
    object-fit: cover !important;
  }

  .hero-text{
    position: static !important;
    max-width: 100% !important;
    text-align: left !important;
    align-items: flex-start !important;
    padding: 14px 2px 0 !important;
  }

  .hero-text h1{
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
  }
  .hero-text p{
    font-size: 15px !important;
    margin: 0 0 12px !important;
  }
  .btn-hero-shop{
    width: 100% !important;
    text-align: center !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  /* -----------------------------------------
     5) FRANJA LOGOS MARCAS (más compacta)
  ----------------------------------------- */
  .marcas-strip{
    padding: 22px 0 !important;
  }
  .marcas-strip-slide{
    gap: 38px !important;
  }
  .marcas-strip-slide img{
    height: 40px !important;
  }

  /* -----------------------------------------
     6) TIENDA (Shop + Categorías + Tag + Search)
     Sidebar arriba, productos abajo (orden limpio)
  ----------------------------------------- */
  .impo-shop-layout{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .impo-shop-sidebar{
    width: 100% !important;
    position: static !important;
    order: 1 !important;

    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08) !important;
    padding: 14px !important;
  }

  .impo-shop-content{
    width: 100% !important;
    order: 2 !important;
  }

  /* -----------------------------------------
     7) GRID DE PRODUCTOS (2 columnas móvil)
  ----------------------------------------- */
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 14px !important;
    margin: 0 !important;
  }

  /* 1 columna en pantallas muy pequeñas */
  @media (max-width: 420px){
    body.woocommerce-shop ul.products,
    body.tax-product_cat ul.products,
    body.tax-product_tag ul.products,
    body.search.woocommerce ul.products{
      grid-template-columns: 1fr !important;
    }
  }

  /* Tarjeta completa (hover ya lo tienes en desktop; aquí solo orden) */
  body.woocommerce-shop ul.products li.product,
  body.tax-product_cat ul.products li.product,
  body.tax-product_tag ul.products li.product,
  body.search.woocommerce ul.products li.product{
    margin: 0 !important;
    width: auto !important;
  }

  /* Imagen más grande pero sin deformar */
  body.woocommerce-shop ul.products li.product a img,
  body.tax-product_cat ul.products li.product a img,
  body.tax-product_tag ul.products li.product a img,
  body.search.woocommerce ul.products li.product a img{
    height: 170px !important;
    object-fit: contain !important;
    background: #f7f7f8 !important;
    padding: 10px !important; /* menos gris a los lados */
  }

  /* Botón del loop: ancho completo, bien alineado */
  body.woocommerce-shop ul.products li.product .button,
  body.tax-product_cat ul.products li.product .button,
  body.tax-product_tag ul.products li.product .button,
  body.search.woocommerce ul.products li.product .button{
    width: calc(100% - 20px) !important;
    margin: 10px auto 14px !important;
    display: block !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
  }

  /* Mini hover elegante para botones (en móvil se nota con touch/active) */
  body.woocommerce-shop ul.products li.product .button:hover,
  body.tax-product_cat ul.products li.product .button:hover,
  body.tax-product_tag ul.products li.product .button:hover,
  body.search.woocommerce ul.products li.product .button:hover{
    transform: translateY(-1px) scale(1.01) !important;
    transition: transform .22s ease, filter .22s ease !important;
    filter: brightness(1.02);
  }
  body.woocommerce-shop ul.products li.product .button:active,
  body.tax-product_cat ul.products li.product .button:active,
  body.tax-product_tag ul.products li.product .button:active,
  body.search.woocommerce ul.products li.product .button:active{
    transform: translateY(0) scale(0.99) !important;
  }

  /* -----------------------------------------
     8) SIMILARES + RECIÉN VISTOS EN MÓVIL
     → carrusel elegante con scroll horizontal (sin flechas)
  ----------------------------------------- */
  .productos-similares-container,
  .productos-recientes-container{
    padding: 16px 14px !important;
    margin: 22px auto !important;
    border-radius: 16px !important;
  }

  .productos-similares-container h2,
  .productos-recientes-container h2{
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }

  .productos-similares-container ul.products,
  .productos-recientes-container ul.products{
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 10px !important;

    /* evita que el flex “aplane” las tarjetas */
    align-items: stretch !important;
  }

  /* Ocultar scrollbar (Chrome/Safari) */
  .productos-similares-container ul.products::-webkit-scrollbar,
  .productos-recientes-container ul.products::-webkit-scrollbar{
    height: 0 !important;
  }

  .productos-similares-container ul.products li.product,
  .productos-recientes-container ul.products li.product{
    min-width: 240px !important;
    max-width: 240px !important;
    scroll-snap-align: start !important;
  }

  /* Imagen un poco más alta en carrusel */
  .productos-similares-container ul.products li.product a img,
  .productos-recientes-container ul.products li.product a img{
    height: 165px !important;
    padding: 10px !important;
    object-fit: contain !important;
  }

  /* Botón dentro del carrusel bien centrado */
  .productos-similares-container li.product .button,
  .productos-recientes-container li.product .button{
    width: calc(100% - 20px) !important;
    margin: 10px auto 14px !important;
    transform: none !important; /* ⚠️ quita offsets raros en móvil */
  }

  .productos-similares-container li.product .button:hover,
  .productos-recientes-container li.product .button:hover{
    transform: translateY(-1px) scale(1.01) !important;
  }

  /* -----------------------------------------
     9) “Mi cuenta” / páginas Woo (espaciado)
  ----------------------------------------- */
  .woocommerce-account .woocommerce{
    padding: 18px 0 !important;
  }

  .woocommerce-MyAccount-navigation{
    width: 100% !important;
    margin: 0 0 14px !important;
  }
  .woocommerce-MyAccount-content{
    width: 100% !important;
  }
}

/* -----------------------------------------------------
   10) MÓVIL PEQUEÑO EXTRA (<= 520px)
----------------------------------------------------- */
@media (max-width: 520px){

  .hero-text h1{
    font-size: 24px !important;
  }

  /* Botón hero aún más cómodo */
  .btn-hero-shop{
    padding: 12px 12px !important;
  }

  /* Ajuste extra para imágenes de producto */
  body.woocommerce-shop ul.products li.product a img,
  body.tax-product_cat ul.products li.product a img,
  body.tax-product_tag ul.products li.product a img,
  body.search.woocommerce ul.products li.product a img{
    height: 160px !important;
    padding: 10px !important;
  }
}






/* =====================================================
   📱 CARRUSELES COMPACTOS – MÓVIL
   Home + WooCommerce
===================================================== */

@media (max-width: 768px){

  /* ===============================
     CONTENEDOR DEL CARRUSEL
  =============================== */
  .carousel-viewport,
  .productos-similares-container ul.products,
  .productos-recientes-container ul.products{
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 10px !important;
  }

  /* Ocultar scrollbar */
  .carousel-viewport::-webkit-scrollbar,
  .productos-similares-container ul.products::-webkit-scrollbar,
  .productos-recientes-container ul.products::-webkit-scrollbar{
    display: none;
  }

  /* ===============================
     TARJETA (TAMAÑO COMPACTO)
  =============================== */
  .carousel-track .producto-card,
  .productos-similares-container ul.products li.product,
  .productos-recientes-container ul.products li.product{
    min-width: 200px !important;   /* 👈 MÁS PEQUEÑO */
    max-width: 200px !important;
    scroll-snap-align: start !important;

    border-radius: 14px !important;
    padding: 10px !important;
  }

  /* ===============================
     IMAGEN MÁS COMPACTA
  =============================== */
  .carousel-track .producto-card img,
  .productos-similares-container ul.products li.product a img,
  .productos-recientes-container ul.products li.product a img{
    height: 140px !important;      /* 👈 reduce altura */
    object-fit: contain !important;
    padding: 6px !important;
    background: #f6f6f7 !important;
    border-radius: 10px !important;
  }

  /* ===============================
     TEXTO MÁS LIMPIO
  =============================== */
  .carousel-track .producto-card h3,
  .productos-similares-container ul.products li.product h2,
  .productos-recientes-container ul.products li.product h2{
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin: 8px 0 4px !important;
  }

  .carousel-track .producto-card p,
  .productos-similares-container ul.products li.product .price,
  .productos-recientes-container ul.products li.product .price{
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  /* ===============================
     BOTÓN MÁS PEQUEÑO Y ELEGANTE
  =============================== */
  .carousel-track .producto-card .btn-principal,
  .productos-similares-container ul.products li.product .button,
  .productos-recientes-container ul.products li.product .button{
    width: 100% !important;
    padding: 9px 10px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    margin-top: 6px !important;
  }
}

/* 📱 Extra compacto (iPhone mini, SE, etc.) */
@media (max-width: 420px){

  .carousel-track .producto-card,
  .productos-similares-container ul.products li.product,
  .productos-recientes-container ul.products li.product{
    min-width: 185px !important;
    max-width: 185px !important;
  }

  .carousel-track .producto-card img,
  .productos-similares-container ul.products li.product a img,
  .productos-recientes-container ul.products li.product a img{
    height: 130px !important;
  }
}





/* =====================================================
   📱 HOME HERO (MÓVIL)
   - Quitar bordes redondos a la imagen
   - Mover texto + botón SOBRE la imagen (lado derecho)
===================================================== */
@media (max-width: 768px){

  /* Asegura que el bloque derecho sea “contenedor” del overlay */
  .home-hero .hero-right{
    position: relative !important;
  }

  /* Imagen sin bordes redondos */
  .home-hero .hero-image-wrap img{
    border-radius: 0 !important;
  }

  /* Que la imagen tenga un alto estable para poder poner overlay bien */
  .home-hero .hero-image-wrap{
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    height: 320px !important;       /* ajusta si quieres más/menos */
  }
  .home-hero .hero-image-wrap img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* TEXTO + BOTÓN ENCIMA de la imagen (zona derecha, como marcaste) */
  .home-hero .hero-text{
    position: absolute !important;
    top: 18px !important;
    right: 14px !important;
    left: auto !important;

    width: min(48%, 230px) !important; /* compacto tipo “badge” */
    z-index: 5 !important;

    background: rgba(0,0,0,0.42) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    padding: 12px 12px !important;
    border-radius: 14px !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.25) !important;
  }

  .home-hero .hero-text h1{
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
    color: #fff !important;
  }

  .home-hero .hero-text p{
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    margin: 0 0 10px !important;
    opacity: 0.95 !important;
    color: #fff !important;
  }

  .home-hero .btn-hero-shop{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
}

/* 📱 Extra: pantallas muy pequeñas */
@media (max-width: 420px){
  .home-hero .hero-image-wrap{ height: 300px !important; }
  .home-hero .hero-text{ width: min(56%, 220px) !important; }
  .home-hero .hero-text h1{ font-size: 17px !important; }
}


@media (max-width: 768px){

  /* SUBIR un poco el bloque de texto + botón */
  .home-hero .hero-text{
    top: 6px !important;   /* antes estaba en 18px */
  }

}



/* =========================================
   HERO RASTREO ENVÍO - MOBILE FIX
========================================= */

@media (max-width: 768px) {

  /* Contenedor principal del bloque */
  .rastreo-envio,
  .tracking-section,
  .rastrea-envio {
    position: relative;
    background: #000; /* negro sólido */
    padding: 60px 20px 70px;
    text-align: center;
    overflow: hidden;
  }

  /* Quitar imagen partida o fondo raro */
  .rastreo-envio img,
  .tracking-section img {
    display: none !important;
  }

  /* Título */
  .rastreo-envio h2,
  .tracking-section h2 {
    font-size: 28px;
    line-height: 1.25;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 20px;
  }

  /* Texto descriptivo */
  .rastreo-envio p,
  .tracking-section p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    max-width: 320px;
    margin: 0 auto 28px;
  }

  /* Botón */
  .rastreo-envio a,
  .tracking-section a,
  .rastreo-envio button {
    display: inline-block;
    background: linear-gradient(135deg, #ff9800, #ff6f00);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  }

  /* Hover suave */
  .rastreo-envio a:hover,
  .tracking-section a:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.45);
  }

}






/* =========================================
   TRACKING HERO (AUTO TARGET) - MOBILE
========================================= */
@media (max-width: 768px){

  .impo-tracking-hero{
    background:#000 !important;
    padding:64px 20px 76px !important;
    text-align:center !important;
    border-radius:0 !important;
    overflow:hidden !important;
    position:relative !important;
  }

  /* ocultar imágenes “partidas” dentro de la sección */
  .impo-tracking-hero img{
    display:none !important;
  }

  .impo-tracking-hero h1,
  .impo-tracking-hero h2,
  .impo-tracking-hero h3{
    color:#fff !important;
    font-size:30px !important;
    line-height:1.2 !important;
    margin:0 0 18px !important;
    font-weight:800 !important;
  }

  .impo-tracking-hero p{
    color:rgba(255,255,255,.85) !important;
    font-size:16px !important;
    line-height:1.6 !important;
    max-width:340px !important;
    margin:0 auto 26px !important;
  }

  /* Botones/enlaces dentro */
  .impo-tracking-hero a,
  .impo-tracking-hero button,
  .impo-tracking-hero input[type="submit"]{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:min(340px, 100%) !important;
    padding:14px 22px !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,#ff9800,#ff6f00) !important;
    color:#fff !important;
    font-weight:700 !important;
    text-decoration:none !important;
    border:none !important;
    box-shadow:0 14px 30px rgba(0,0,0,.45) !important;
    transition:transform .28s ease, box-shadow .28s ease !important;
  }

  .impo-tracking-hero a:active,
  .impo-tracking-hero button:active{
    transform:translateY(1px) !important;
    box-shadow:0 10px 22px rgba(0,0,0,.35) !important;
  }
}


/* =========================================
   BLOQUE RASTREO ENVÍO – FIX MOBILE
========================================= */
@media (max-width: 768px) {

  .rastreo-envio,
  .tracking-section,
  .cargo-expreso-section {
    position: relative !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 20px 70px !important;
    min-height: auto !important;
    background: #000 !important;
    text-align: center;
    overflow: hidden;
  }

  .rastreo-envio h2,
  .tracking-section h2 {
    font-size: 26px;
    line-height: 1.25;
    margin-bottom: 16px;
    color: #fff;
  }

  .rastreo-envio p,
  .tracking-section p {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
    max-width: 320px;
    margin-bottom: 26px;
  }

  .rastreo-envio .btn,
  .tracking-section .btn,
  .rastreo-envio a,
  .tracking-section a {
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
  }
}




/* =========================================
   FOOTER – CENTRADO Y LIMPIO EN MOBILE
========================================= */
@media (max-width: 768px) {

  footer,
  .site-footer {
    text-align: center;
  }

  footer .footer-inner,
  .site-footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  footer h3 {
    margin-bottom: 10px;
    font-size: 18px;
  }

  footer p,
  footer a {
    font-size: 15px;
    line-height: 1.6;
  }

  footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  footer ul li {
    margin-bottom: 6px;
  }

  footer img {
    margin: 0 auto;
    display: block;
  }
}



/* =====================================================
   OCULTAR BLOQUE RASTREO (SOLO MOBILE)
===================================================== */
@media (max-width: 768px) {
  .rastreo-cargo,
  .cargo-rastreo,
  .rastreo-envio,
  .tracking-section,
  section[class*="rastreo"],
  section[class*="cargo"] {
    display: none !important;
  }
}



/* =========================
   FOOTER: mover SOLO el contenido (no logo / no copyright)
========================= */

:root{
  --footer_text_offset: 45px; /* prueba 10px, 20px, 40px */
}

/* SOLO mueve el bloque que envuelve las columnas */
.footer-text-move{
  transform: translateX(var(--footer_text_offset)) !important;
  will-change: transform;
}

@media (max-width: 768px){

  /* Asegurar centrado general del contenido */
  .site-footer .footer-container{
    text-align: center !important;
  }

  .site-footer .footer-container p,
  .site-footer .footer-container ul{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-footer .footer-container ul{
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }

  /* Mantener logo y copyright sin moverse */
  .site-footer .footer-logo-wrap,
  .site-footer .footer-bottom{
    transform: none !important;
    text-align: center !important;
  }
}

/* Ocultar rastreo-cargo SOLO en teléfono */
@media (max-width: 768px){
  .rastreo-cargo{ display:none !important; }
}









/* =========================================
   FIX GLOBAL: evitar “espacio a la derecha”
========================================= */

/* Evita overflow horizontal general */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* iOS/Safari: mejor manejo de transform/scroll */
body{
  position: relative;
}

/* Cualquier imagen o video no debe empujar ancho */
img, video, iframe{
  max-width: 100%;
  height: auto;
}

/* Si usas .container con padding grande, en móvil se ajusta */
@media (max-width: 768px){
  .container{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* IMPORTANTE: tu mega-marcas y flyout pueden empujar ancho si quedan “abiertos” */
.mega-marcas,
.mega-marcas *{
  max-width: 100%;
}

/* Track del carrusel HOME: que no empuje el body */
.carousel-viewport{
  overflow: hidden !important;
  max-width: 100%;
}
.carousel-track{
  max-width: 100%;
  will-change: transform;
}

/* Woo: listas de productos no deben crear overflow */
.woocommerce ul.products,
.woocommerce-page ul.products{
  max-width: 100%;
  overflow: hidden;
}









/* =====================================================
   HEADER MOBILE: MOVER LOGO / BUSCADOR / CUENTA / CARRITO
===================================================== */
@media (max-width: 768px){

  :root{
    /* LOGO */
    --logo-top: -8px;
    --logo-left: 44px;
    --logo-scale: 2.35;

    /* BUSCADOR */
    --search-top: 55px;
    --search-left: 50%;
    --search-width: 92vw;

    /* CUENTA */
    --account-top: 14px;
    --account-left: 300px;

    /* CARRITO */
    --cart-top: 2px;
    --cart-right: 12px;

    /* Ocultar monto carrito en móvil */
    --hide-cart-total: 1;
  }

  /* Asegura “lienzo” */
  .site-header{
    position: relative !important;
  }

  .header-top{
    position: relative !important;
    min-height: 140px !important;
    padding-bottom: 10px !important;
  }

  /* LOGO */
  .impo-m-logo{
    position: absolute !important;
    top: var(--logo-top) !important;
    left: var(--logo-left) !important;
    transform: scale(var(--logo-scale)) !important;
    transform-origin: top left !important;
    z-index: 10 !important;
  }

  .impo-m-logo img{
    max-width: 165px !important;
    height: auto !important;
  }

  /* BUSCADOR (centrado debajo) */
  .impo-m-search{
    position: absolute !important;
    top: var(--search-top) !important;
    left: var(--search-left) !important;
    transform: translateX(-50%) !important;
    width: var(--search-width) !important;
    z-index: 8 !important;
  }

  /* Evita zoom en iPhone y ajusta input */
  .impo-m-search input{
    font-size: 16px !important;
  }

  /* CUENTA (esquina izquierda arriba) */
  .impo-m-account{
    position: absolute !important;
    top: var(--account-top) !important;
    left: var(--account-left) !important;
    z-index: 11 !important;
  }

  /* CARRITO (esquina derecha arriba) */
  .impo-m-cart{
    position: absolute !important;
    top: var(--cart-top) !important;
    right: var(--cart-right) !important;
    z-index: 11 !important;
  }

  /* Ocultar el total en móvil */
  .impo-cart-total{
    display: none !important;
  }
}


/* =========================================
   OCULTAR TELÉFONO EN HEADER (SOLO MÓVIL)
========================================= */
@media (max-width: 768px){
  .header-phone{
    display: none !important;
  }
}


/* Contenedor del icono */
.header-account{
  color: #ffffff;           /* 🔹 COLOR del icono (ej: blanco) */
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px){
  .header-account svg{
    width: 34px;
    height: 34px;
  }
}






/* =====================================================
   CARRITO MOBILE – ICONO PERSONALIZADO + TAMAÑO
===================================================== */
@media (max-width: 768px){

  :root{
    --cart-size: 34px;
    --cart-hitbox: 46px;
    --cart-color: #ffffff; /* 👈 COLOR DEL CARRITO */
  }

  .impo-m-cart a{
    width: var(--cart-hitbox);
    height: var(--cart-hitbox);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .impo-cart-icon{
    width: var(--cart-size);
    height: var(--cart-size);
    background: var(--cart-color);
    mask: url("/wp-content/themes/impoauto/images/cart.svg") no-repeat center;
    -webkit-mask: url("/wp-content/themes/impoauto/images/cart.svg") no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
  }
}










/* =====================================================
   SINGLE PRODUCT (TELÉFONO) - layout limpio tipo desktop pero compacto
===================================================== */
@media (max-width: 768px){

  /* Evita el “espacio a la derecha” por algún elemento ancho */
  html, body{
    width: 100%;
    overflow-x: hidden;
  }

  /* Contenedor principal del producto */
  .single-product div.product{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  /* Forzar 1 columna: imagen arriba / resumen abajo */
  .single-product .woocommerce div.product,
  .single-product div.product{
    display: block !important;
  }

  /* IMAGEN / GALERÍA */
  .single-product .woocommerce-product-gallery,
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .images{
    float: none !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto 14px !important;
  }

  /* Asegurar que la imagen ocupe bien */
  .single-product .woocommerce-product-gallery__wrapper,
  .single-product div.product .woocommerce-product-gallery__wrapper{
    width: 100% !important;
  }

  .single-product .woocommerce-product-gallery img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 14px !important;
  }

  /* RESUMEN (texto, precio, botón) */
  .single-product div.product .summary{
    float: none !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }

  /* Tu “tarjeta” blanca del título/descripcion (si la estás usando) */
  .single-product .summary .impo-free-box,
  .single-product .product_title{
    max-width: 520px !important;
  }

  .single-product .summary .impo-free-box{
    background: #fff !important;
    border-radius: 14px !important;
    padding: 16px 16px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
    margin: 0 auto 12px !important;
  }

  /* Título compacto */
  .single-product .product_title{
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 0 0 10px !important;
    text-align: center !important;
  }

  /* Descripción corta */
  .single-product .woocommerce-product-details__short-description{
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  /* Precio + stock alineados y compactos */
  .single-product p.price{
    font-size: 20px !important;
    margin: 10px 0 10px !important;
    text-align: left !important;
  }

  /* FORM ADD TO CART: qty + botón */
  .single-product form.cart{
    display: flex !important;
    align-items: stretch !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    margin: 10px 0 0 !important;
  }

  /* Cantidad */
  .single-product form.cart .quantity{
    flex: 0 0 92px !important;
    margin: 0 !important;
  }

  .single-product form.cart .quantity input.qty{
    width: 92px !important;
    height: 48px !important;
    border-radius: 10px !important;
  }

  /* Botón */
  .single-product form.cart button.single_add_to_cart_button{
    flex: 1 1 auto !important;
    height: 48px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }

  /* Si en pantallas MUY chicas se rompe, lo apilamos */
  @media (max-width: 380px){
    .single-product form.cart{
      flex-wrap: wrap !important;
    }
    .single-product form.cart .quantity{
      flex: 1 1 100% !important;
    }
    .single-product form.cart button.single_add_to_cart_button{
      flex: 1 1 100% !important;
    }
  }
}






/* =====================================================
   SINGLE PRODUCT (MÓVIL) - caja de título más angosta + CTA centrado
===================================================== */
@media (max-width: 768px){

  /* Ancho “elegante” para el bloque de texto (título + descripción) */
  :root{
    --single-box-max: 380px;   /* ajusta: 340 / 360 / 400 */
    --single-cta-max: 420px;   /* ancho del bloque de precio+botones */
  }

  /* Tu contenedor blanco del título + short desc */
  .single-product .summary .impo-free-box{
    width: 100% !important;
    max-width: var(--single-box-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* Título + descripción centrados y compactos */
  .single-product .product_title{
    max-width: var(--single-box-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .single-product .woocommerce-product-details__short-description{
    max-width: var(--single-box-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* Precio + badge (stock) centrados */
  .single-product .summary p.price{
    width: 100% !important;
    max-width: var(--single-cta-max) !important;
    margin: 14px auto 10px !important;
    text-align: center !important;
  }

  /* Badge de stock: que se vea bonito al centro */
  .single-product .summary .impoauto-stock-badge{
    display: inline-flex !important;
    vertical-align: middle !important;
    margin-left: 10px !important;
    margin-top: 2px !important;
  }

  /* Bloque add to cart centrado y sin estirarse a todo el ancho */
  .single-product form.cart{
    width: 100% !important;
    max-width: var(--single-cta-max) !important;
    margin: 0 auto !important;
    justify-content: center !important;  /* centra el grupo */
  }

  /* Centrar el input de cantidad */
  .single-product form.cart .quantity{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .single-product form.cart .quantity input.qty{
    text-align: center !important;
  }

  /* Botón centrado (y que no se estire full) */
  .single-product form.cart button.single_add_to_cart_button{
    flex: 0 0 auto !important;     /* NO crecer */
    min-width: 210px !important;   /* ajusta a gusto */
  }

  /* Si el tema fuerza floats raros, los anulamos */
  .single-product form.cart::after,
  .single-product form.cart::before{
    content: none !important;
  }

  /* En pantallas muy angostas: apilar pero centrado */
  @media (max-width: 380px){
    .single-product form.cart{
      flex-wrap: wrap !important;
      gap: 10px !important;
    }
    .single-product form.cart .quantity,
    .single-product form.cart button.single_add_to_cart_button{
      width: 100% !important;
      justify-content: center !important;
    }
    .single-product form.cart button.single_add_to_cart_button{
      min-width: 0 !important;
    }
  }
}












/* =====================================================
   SINGLE PRODUCT (MOBILE) - CONTROL PX: ancho + mover a la derecha
   Afecta el bloque donde van TÍTULO + DESCRIPCIÓN CORTA (.impo-free-box)
===================================================== */
@media (max-width: 768px){

  :root{
    --impo_pd_width: 500px;   /* <-- ancho del contenedor (px) */
    --impo_pd_shift: 0px;     /* <-- muévelo a la derecha: 10px, 20px, 30px... */
  }

  /* 1) El contenedor real donde están título + desc (por tu JS) */
  .single-product .impo-free-box{
    width: var(--impo_pd_width) !important;
    max-width: var(--impo_pd_width) !important;
    box-sizing: border-box !important;

    /* centrado + control de desplazamiento */
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translateX(var(--impo_pd_shift)) !important;

    /* opcional para que se vea “tarjeta” limpia */
    padding: 16px 16px !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  /* 2) Asegurar que el texto no quede raro */
  .single-product .impo-free-box .product_title,
  .single-product .impo-free-box .woocommerce-product-details__short-description{
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3) Por si en algún producto aún NO se movió al .impo-free-box (fallback) */
  .single-product .summary.entry-summary .product_title,
  .single-product .summary.entry-summary .woocommerce-product-details__short-description{
    max-width: var(--impo_pd_width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translateX(var(--impo_pd_shift)) !important;
    text-align: center !important;
  }
}



@media (max-width: 768px){
  body.single-product .impo-free-box{
    width: var(--impo_pd_width) !important;
    max-width: var(--impo_pd_width) !important;
    transform: translateX(var(--impo_pd_shift)) !important;
  }
}








/* =====================================================
   SINGLE PRODUCT (MÓVIL) - CONTROL REAL EN PX (SIN PELEARSE)
   Pegar AL FINAL del style.css
===================================================== */
@media (max-width: 768px){

  :root{
    --impo_box_width: 320px;   /* ancho del contenedor título+desc */
    --impo_box_shift: 80px;     /* mover a la derecha: 10px,20px,30px */
    --impo_cta_width: 420px;   /* ancho del bloque precio + qty + botón */
    --impo_cta_shift: 40px;     /* mover a la derecha: 10px,20px... */
  }

  /* 1) No encierres el summary: quita max-width/paddings que lo rompen */
  body.single-product .summary.entry-summary{
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
  }

  /* 2) TÍTULO + DESCRIPCIÓN (tu caja creada por JS) */
  body.single-product .summary.entry-summary .impo-free-box{
    width: var(--impo_box_width) !important;
    max-width: var(--impo_box_width) !important;
    margin: 0 auto 12px !important;
    transform: translateX(var(--impo_box_shift)) !important;
    box-sizing: border-box !important;

    background: #fff !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
  }

  body.single-product .summary.entry-summary .impo-free-box .product_title,
  body.single-product .summary.entry-summary .impo-free-box .woocommerce-product-details__short-description{
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  /* 3) PRECIO + BADGE (que no se esconda) */
  body.single-product .summary.entry-summary p.price{
    width: var(--impo_cta_width) !important;
    max-width: var(--impo_cta_width) !important;
    margin: 10px auto 10px !important;
    transform: translateX(var(--impo_cta_shift)) !important;
    text-align: center !important;
  }

  body.single-product .summary.entry-summary .impoauto-stock-badge{
    display: inline-flex !important;
    margin-left: 10px !important;
    vertical-align: middle !important;
  }

  /* 4) QTY + BOTÓN centrados y con el mismo ancho controlable */
  body.single-product .summary.entry-summary form.cart{
    width: var(--impo_cta_width) !important;
    max-width: var(--impo_cta_width) !important;
    margin: 0 auto !important;
    transform: translateX(var(--impo_cta_shift)) !important;

    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: stretch !important;
  }

  body.single-product .summary.entry-summary form.cart .quantity{
    margin: 0 !important;
  }

  body.single-product .summary.entry-summary form.cart .quantity input.qty{
    width: 92px !important;
    height: 48px !important;
    text-align: center !important;
    border-radius: 10px !important;
  }

  body.single-product .summary.entry-summary form.cart button.single_add_to_cart_button{
    height: 48px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 0 16px !important;
    min-width: 220px !important;
  }

  /* 5) En pantallas muy pequeñas, apilar */
  @media (max-width: 380px){
    body.single-product .summary.entry-summary form.cart{
      flex-wrap: wrap !important;
    }
    body.single-product .summary.entry-summary form.cart .quantity,
    body.single-product .summary.entry-summary form.cart button.single_add_to_cart_button{
      width: 100% !important;
    }
    body.single-product .summary.entry-summary form.cart button.single_add_to_cart_button{
      min-width: 0 !important;
    }
  }
}











/* =====================================================
   PRECIO + BADGE: SEPARADOS (MÓVIL) + MISMO SHIFT
   PEGAR AL FINAL
===================================================== */
@media (max-width: 768px){

  :root{
    --price-badge-shift: -80px; /* tu ajuste */
    --price-badge-gap: 10px;    /* espacio entre precio y badge */
  }

  /* PRECIO: bloque separado */
  body.single-product .summary.entry-summary p.price{
    display: block !important;
    margin: 5px 0 var(--price-badge-gap) !important;
    position: relative !important;
    left: var(--price-badge-shift) !important;
    text-align: left !important;
  }

  /* BADGE: se pone ABAJO como bloque */
  body.single-product .summary.entry-summary .impoauto-stock-badge,
  body.single-product .summary.entry-summary .stock,
  body.single-product .summary.entry-summary .in-stock{
    display: inline-block !important;
    position: relative !important;
    left: var(--price-badge-shift) !important;
    margin: 0 !important;
    transform: none !important;
  }
}



/* =====================================================
   FIX DEFINITIVO: MOSTRAR + SEPARAR PRECIO Y BADGE (MÓVIL)
   Pegar AL FINAL del style.css
===================================================== */
@media (max-width: 768px){

  /* 1) Que el summary NO oculte nada */
  body.single-product .summary,
  body.single-product .summary.entry-summary{
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 2) FORZAR QUE EL PRECIO SE VEA */
  body.single-product .summary.entry-summary p.price,
  body.single-product .summary.entry-summary span.price,
  body.single-product .summary.entry-summary .price{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    clip: auto !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 5 !important;
  }

  /* 3) FORZAR QUE EL BADGE SE VEA */
  body.single-product .summary.entry-summary .impoauto-stock-badge,
  body.single-product .summary.entry-summary .stock,
  body.single-product .summary.entry-summary .in-stock,
  body.single-product .summary.entry-summary .out-of-stock{
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    position: relative !important;
    z-index: 6 !important;
  }

  /* 4) SEPARACIÓN (badge debajo del precio) */
  body.single-product .summary.entry-summary p.price{
    margin: 5px 0 5px !important;
    text-align: left !important;
  }

  body.single-product .summary.entry-summary .impoauto-stock-badge,
  body.single-product .summary.entry-summary .stock{
    margin-top: 0 !important;
  }

  /* 5) (Opcional) si quieres mover ambos con un solo número */
  :root{
    --price-badge-shift: 90px; /* ajusta: -60, -40, 0, 20... */
  }

  body.single-product .summary.entry-summary p.price{
    left: var(--price-badge-shift) !important;
  }

  body.single-product .summary.entry-summary .impoauto-stock-badge,
  body.single-product .summary.entry-summary .stock{
    left: var(--price-badge-shift) !important;
  }
}




/* =====================================================
   MOVER SOLO EL BADGE "EN STOCK" (MÓVIL)
   Control total en PX
===================================================== */
@media (max-width: 768px){

  :root{
    --badge-move-x: -200px;   /* 👉 mueve a la derecha (+) o izquierda (-) */
    --badge-move-y: 0px;   /* 👉 mueve arriba (-) o abajo (+) */
  }

  /* Badge de stock */
  body.single-product .impoauto-stock-badge,
  body.single-product .summary .stock,
  body.single-product .summary .in-stock,
  body.single-product .summary .out-of-stock{
    position: relative !important;
    transform: translate(
      var(--badge-move-x),
      var(--badge-move-y)
    ) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
  }
}






/* =====================================================
   OVERRIDE FINAL: PRECIO + BADGE PEGADOS (MÓVIL)
   (Pegar AL FINAL del style.css)
===================================================== */
@media (max-width: 768px){

  /* Anula cualquier variable que lo esté moviendo */
  :root{
    --price-badge-shift: 0px !important;
  }

  /* PRECIO (contenedor) */
  body.single-product .woocommerce div.product .summary.entry-summary p.price,
  body.single-product .summary.entry-summary p.price{
    position: relative !important;
    left: 0 !important;
    transform: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;         /* 👈 separación precio ↔ badge */

    width: auto !important;
    max-width: none !important;

    margin: 10px 0 12px 14px !important; /* 👈 empuja todo un poco a la derecha */
    text-align: left !important;
    z-index: 5 !important;
  }

  /* BADGE (cualquier variante) */
  body.single-product .summary.entry-summary .impoauto-stock-badge,
  body.single-product .summary.entry-summary .stock,
  body.single-product .summary.entry-summary .in-stock{
    position: relative !important;
    left: 0 !important;
    transform: none !important;

    margin: 0 !important;
    margin-left: 0 !important;

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




/* =========================
   HAMBURGUESA + MENÚ MÓVIL
========================= */
.impo-burger,
.impo-mobile-menu,
.impo-menu-overlay{
  display: none;
}

@media (max-width: 768px){

  /* Hamburguesa visible solo en móvil */
  .impo-burger{
    display: inline-flex !important;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: absolute;
    left: 12px;
    top: 10px;
    z-index: 2001; /* encima del header */
  }
  .impo-burger span{
    display:block;
    width: 22px;
    height: 2px;
    background: #fff;
    margin: 3px 0;
    border-radius: 2px;
  }

  /* Overlay */
  .impo-menu-overlay{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 999998; /* ALTÍSIMO */
  }

  /* Panel */
  .impo-mobile-menu{
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: min(88vw, 360px);
    height: 100vh;
    background: #0A3A66;
    transform: translateX(-105%);
    transition: transform .28s ease;
    z-index: 999999; /* MÁS ALTO QUE TODO */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 18px 0 40px rgba(0,0,0,.35);
  }

  /* Cuando abre */
  body.impo-menu-open .impo-menu-overlay{
    opacity: 1;
    pointer-events: auto;
  }
  body.impo-menu-open .impo-mobile-menu{
    transform: translateX(0);
  }
  body.impo-menu-open{
    overflow: hidden;
    height: 100vh;
  }

  /* Header desktop menu oculto en móvil (solo el menu horizontal) */
  #impoDesktopMenu{
    display: none !important;
  }

  /* Header no desaparece */
  .site-header{
    position: relative !important;
    z-index: 2000 !important;
  }

  /* Cabecera del panel */
  .impo-mobile-menu-head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,.15);
  }
  .impo-mobile-menu-title{
    color:#fff;
    font-size: 18px;
    font-weight: 800;
  }
  .impo-menu-close{
    border:0;
    background: rgba(255,255,255,.12);
    color:#fff;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor:pointer;
  }

  /* Lista del menú */
  .impo-mobile-menu-body{
    padding: 10px 10px 18px;
  }
  .impo-mobile-menu-list{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .impo-mobile-menu-list li{
    margin: 6px 0;
  }
  .impo-mobile-menu-list a{
    display:block;
    padding: 12px 12px;
    border-radius: 12px;
    color:#fff;
    text-decoration:none;
    background: rgba(255,255,255,.10);
  }
  .impo-mobile-menu-list a:active{
    transform: scale(.99);
  }
}






/* =====================================================
   MENÚ HAMBURGUESA (MÓVIL) - LISTA VERTICAL
===================================================== */
@media (max-width: 768px){

  /* El <ul> que clonamos dentro del panel */
  .impo-mobile-menu-list,
  .impo-mobile-menu-list ul{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;

    overflow: visible !important;
    white-space: normal !important;
  }

  /* Cada item ocupa todo el ancho */
  .impo-mobile-menu-list li{
    width: 100% !important;
    margin: 0 !important;
  }

  /* Links estilo “botón” full width */
  .impo-mobile-menu-list a{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 14px 14px !important;
    border-radius: 14px !important;

    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.14) !important;

    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
  }

  /* Quitar estilos “pills / tabs” que te lo ponen en horizontal */
  .impo-mobile-menu-list{
    white-space: normal !important;
  }
  .impo-mobile-menu-list a{
    white-space: normal !important;
  }
}



@media (max-width: 768px){

  .impo-mobile-cats{
    margin-top: 18px;
  }

  .impo-mobile-title{
    color:#fff;
    font-size:18px;
    font-weight:800;
    margin: 0 0 12px;
  }

  .impo-mobile-catlist,
  .impo-mobile-catlist ul{
    list-style:none !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  .impo-mobile-catlist li{
    margin:0 !important;
    width:100% !important;
  }

  /* link principal */
  .impo-mobile-catlist > li > a{
    display:flex !important;
    width:100% !important;
    padding:14px 14px !important;
    border-radius:14px !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color:#fff !important;
    text-decoration:none !important;
    font-weight:700 !important;
  }

  /* subcategorías */
  .impo-mobile-catlist li ul{
    margin-top:8px !important;
    padding-left:14px !important;  /* sangría */
    gap:8px !important;
  }

  .impo-mobile-catlist li ul li a{
    display:flex !important;
    width:100% !important;
    padding:12px 14px !important;
    border-radius:12px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color:#fff !important;
    text-decoration:none !important;
    font-weight:600 !important;
    font-size:14px !important;
  }
}


/* ===== Menú categorías móvil (acordeón) ===== */
.impo-mobile-cats-title{
  margin: 12px 0 10px;
  font-size: 16px;
  font-weight: 800;
}

.impo-mobile-catlist{
  list-style: none;
  padding: 0;
  margin: 0;
}

.impo-cat-item{
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 10px 0;
  position: relative;
}

.impo-cat-link{
  display: block;
  padding: 8px 40px 8px 2px;
  text-decoration: none;
  font-weight: 700;
}

.impo-cat-item.has-children .impo-cat-toggle{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.impo-cat-item.has-children .impo-cat-toggle::before{
  content: "▾";
  font-size: 18px;
  display: block;
  line-height: 34px;
  text-align: center;
  opacity: .85;
  transition: transform .25s ease;
}

.impo-cat-item.is-open .impo-cat-toggle::before{
  transform: rotate(180deg);
}

.impo-subcat-list{
  list-style: none;
  padding: 8px 0 10px 12px;
  margin: 0;
}

.impo-subcat-item a{
  display: block;
  padding: 8px 8px;
  text-decoration: none;
  font-weight: 600;
  opacity: .95;
  border-radius: 10px;
}

.impo-subcat-item a:hover{
  background: rgba(0,0,0,.05);
}



/* ====== ACORDEÓN CATEGORÍAS (MENÚ MÓVIL) ====== */
.impo-cat-item{ position: relative; }

/* Flecha */
.impo-cat-toggle{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.impo-cat-toggle::before{
  content: "▾";
  font-size: 18px;
  line-height: 34px;
  display: block;
  text-align: center;
  opacity: .9;
  transition: transform .25s ease;
}

.impo-cat-item.is-open .impo-cat-toggle::before{
  transform: rotate(180deg);
}

/* Subcategorías ocultas por defecto (acordeón) */
.impo-subcat-list{
  margin: 0;
  padding: 0 0 0 10px;
  list-style: none;

  max-height: 0;            /* 👈 cerrado */
  overflow: hidden;
  opacity: 0;
  transition: max-height .28s ease, opacity .22s ease;
}

/* Abierto */
.impo-cat-item.is-open .impo-subcat-list{
  max-height: 520px;        /* 👈 suficiente para varias subcats */
  opacity: 1;
}

/* Estilo subcat */
.impo-subcat-item a{
  display: block;
  padding: 10px 12px;
  margin: 8px 10px 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  text-decoration: none;
  font-weight: 600;
}




/* ===== Ajustar ancho subcategorías (menú móvil acordeón) ===== */

/* Opción A: reducir ancho con margin-right */
.impo-subcat-item a{
  margin-right: 26px !important; /* 👈 recorta desde la derecha */
}

/* ───────── O si prefieres algo más controlado ───────── */

/* Opción B: ancho fijo centrado */
.impo-subcat-item a{
  max-width: calc(100% - 32px) !important; /* recorte total */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Opción C (extra fina): solo padding interno */
.impo-subcat-item a{
  padding-right: 10px !important; /* reduce “aire” interno */
}




/* =========================================
   MENÚ MÓVIL – mover MARCAS al final
========================================= */
@media (max-width: 768px){

  /* El body del menú móvil */
  .impo-mobile-menu-body{
    display: flex !important;
    flex-direction: column !important;
  }

  /* Bloque navegación normal */
  .impo-mobile-menu-body .impo-main-menu{
    order: 1 !important;
  }

  /* Bloque categorías (Marcas) */
  .impo-mobile-menu-body .impo-categories{
    order: 2 !important;
    margin-top: 20px !important; /* separación visual */
  }
}










/* =========================================
   MENÚ MÓVIL – poner CATEGORÍAS (Marcas) hasta abajo
========================================= */
@media (max-width: 768px){

  /* el contenedor del panel */
  #impoMobileMenuBody{
    display: flex !important;
    flex-direction: column !important;
  }

  /* el menú clonado (normalmente queda como ul.menu / ul.menu-principal) */
  #impoMobileMenuBody > ul,
  #impoMobileMenuBody .menu,
  #impoMobileMenuBody .menu-principal{
    order: 1 !important;
  }

  /* tu bloque de categorías */
  #impoMobileMenuBody .impo-mobile-cats{
    order: 99 !important;
    margin-top: 18px !important;
  }
}




/* =========================================
   OCULTAR SECCIÓN "MARCAS" SOLO EN HOME + MÓVIL
========================================= */
@media (max-width: 768px){

  body.home .mega-marcas,
  body.home .marcas-strip,
  body.home .marcas-section,
  body.home .home-marcas{
    display: none !important;
  }

}




/* =========================================
   PEGAR HERO AL HEADER (SOLO MÓVIL)
========================================= */
@media (max-width: 768px){

  /* Quitar espacios entre header y hero */
  body.home .home-hero,
  body.home .hero-layout,
  body.home .hero-right{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Asegura que el header no deje hueco abajo */
  .site-header{
    margin-bottom: 0 !important;
  }

}




/* =========================================
   BOTÓN HAMBURGUESA – FIX VISUAL
========================================= */
.impo-burger{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: -4px !important;

  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Las 3 líneas */
.impo-burger span{
  display: block;
  width: 26px;
  height: 3px;
  background: #ffffff; /* color del icono */
  border-radius: 3px;
}

/* =====================================================
   BLOQUEAR SCROLL DEL BODY (cuando menú móvil está abierto)
===================================================== */
body.impo-menu-open{
  position: fixed !important;
  left: 0; right: 0;
  width: 100% !important;
  overflow: hidden !important;
}

/* Scroll SOLO en el menú */
.impo-mobile-menu{
  overflow: hidden !important;
}
.impo-mobile-menu .impo-mobile-menu-body{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: calc(100vh - 70px) !important; /* ajusta si tu header del menú mide diferente */
}



/* =====================================================
   📱 HOME - Productos destacados: swipe (sin flechas)
===================================================== */
@media (max-width: 768px){

  /* Oculta flechas solo en móvil */
  .destacados .carousel-btn{
    display: none !important;
  }

  /* El viewport se vuelve “scrollable” */
  .destacados .carousel-viewport{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 8px !important;
  }

  /* Oculta scrollbar (Chrome/Safari) */
  .destacados .carousel-viewport::-webkit-scrollbar{
    height: 0 !important;
  }

  /* Track en fila y SIN transform (para que el scroll funcione) */
  .destacados .carousel-track{
    display: flex !important;
    gap: 12px !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* Cada tarjeta “ancla” al hacer swipe */
  .destacados .producto-card{
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    min-width: 200px !important;  /* ajusta a gusto */
    max-width: 200px !important;
  }
}









/* =====================================================
   📱 SECCIÓN ENVÍOS – CENTRADO CORRECTO EN MÓVIL
===================================================== */
@media (max-width: 768px){

  /* Contenedor general de la sección */
  .envios,
  .envios-section,
  .shipping-section{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Grid de tarjetas → 1 columna */
  .envios-grid,
  .shipping-grid{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }

  /* Cada tarjeta */
  .envio-card,
  .shipping-card{
    width: 100% !important;
    max-width: 420px !important;   /* 👈 controla el ancho */
    margin: 0 auto !important;
    transform: none !important;    /* 👈 quita desplazamientos */
  }

  /* Contenido interno centrado */
  .envio-card h3,
  .shipping-card h3{
    text-align: center !important;
  }

  .envio-card p,
  .shipping-card p,
  .envio-card ul{
    text-align: left !important; /* texto cómodo de leer */
  }
}




/* =====================================================
   📱 CONTROL MANUAL – SECCIÓN ENVÍOS (MÓVIL)
   Mueve todo el bloque a la IZQUIERDA en PX
===================================================== */
@media (max-width: 768px){

  :root{
    --envios-shift-x: -40px; /* 👈 CAMBIA ESTE VALOR */
    /* ejemplos:
       -10px  = poquito
       -20px
       -40px  = recomendado
       -60px  = más fuerte
    */
  }

  /* Contenedor principal de la sección */
  .envios,
  .envios-section,
  .shipping-section{
    position: relative !important;
    transform: translateX(var(--envios-shift-x)) !important;
  }

  /* Por seguridad, que las tarjetas no empujen */
  .envios-grid,
  .shipping-grid{
    transform: none !important;
  }

  .envio-card,
  .shipping-card{
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}





@media (max-width: 768px){
  body.page-id-53 .entry-content{
    transform: translateX(-90px) !important;
  }
}





@media (max-width: 768px){
  :root{ --envio-move-x: -30px; } /* cambia este valor */

  body.page-id-53 .site-main{
    position: relative !important;
    left: var(--envio-move-x) !important;
    transform: none !important;
  }
}



@media (max-width: 768px){

  /* SOLO en páginas WooCommerce de cuenta */
  body.woocommerce-account .header-top{
    min-height: auto !important;
    padding-bottom: 12px !important;
  }

  /* Quita el absolute del buscador para que no “caiga” */
  body.woocommerce-account .impo-m-search{
    position: static !important;
    transform: none !important;
    width: 92vw !important;
    margin: 10px auto 0 !important;
  }

  /* Evita que se aplaste por otros absolutes */
  body.woocommerce-account .impo-m-logo,
  body.woocommerce-account .impo-m-account,
  body.woocommerce-account .impo-m-cart{
    position: absolute !important; /* estos sí pueden quedar absolute */
  }
}




/* =====================================================
   🎨 DISEÑO VIVO – LOGIN / REGISTRO / MI CUENTA
===================================================== */

/* CONTENEDOR GENERAL */
.woocommerce-account .woocommerce,
.woocommerce form.login,
.woocommerce form.register{
  background: #ffffff;
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
}

/* TÍTULOS */
.woocommerce-account h2,
.woocommerce form.login h2,
.woocommerce form.register h2{
  font-size: 26px;
  font-weight: 800;
  color: #0A3A66;
  margin-bottom: 18px;
}

/* LABELS */
.woocommerce form label{
  font-weight: 700;
  color: #0A3A66;
  margin-bottom: 6px;
  display: block;
}

/* INPUTS */
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"]{
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 2px solid #dbe6f2;
  padding: 0 14px;
  font-size: 15px;
  transition: all .25s ease;
  background: #f9fbff;
}

/* FOCUS INPUT */
.woocommerce form input:focus{
  outline: none;
  border-color: #ff9800;
  box-shadow: 0 0 0 3px rgba(255,152,0,.25);
  background: #ffffff;
}

/* TEXTO DE AYUDA */
.woocommerce form .description,
.woocommerce form .woocommerce-password-hint{
  font-size: 13px;
  color: #555;
  margin-top: 6px;
}

/* BOTONES PRINCIPALES */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button{
  background: linear-gradient(135deg, #ff9800, #ff6f00);
  color: #ffffff;
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 16px;
  font-weight: 800;
  border: none;
  box-shadow: 0 10px 24px rgba(255,111,0,.45);
  transition: all .25s ease;
}

/* HOVER BOTÓN */
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255,111,0,.55);
  filter: brightness(1.05);
}

/* CHECKBOX */
.woocommerce form .woocommerce-form__label{
  font-weight: 600;
  color: #333;
}

/* LINKS */
.woocommerce a{
  color: #ff6f00;
  font-weight: 700;
  text-decoration: none;
}
.woocommerce a:hover{
  text-decoration: underline;
}

/* MENÚ MI CUENTA */
.woocommerce-MyAccount-navigation{
  background: #0A3A66;
  border-radius: 18px;
  padding: 16px;
}

.woocommerce-MyAccount-navigation ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-MyAccount-navigation ul li a{
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 6px;
  background: rgba(255,255,255,.12);
  transition: all .2s ease;
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a{
  background: linear-gradient(135deg, #ff9800, #ff6f00);
  color: #fff;
}

/* CONTENIDO MI CUENTA */
.woocommerce-MyAccount-content{
  background: #ffffff;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 12px 36px rgba(0,0,0,.10);
}

/* MENSAJES (ERROR / OK) */
.woocommerce-message{
  border-left: 6px solid #4CAF50;
  background: #e9f7ef;
  color: #1e7f43;
  border-radius: 14px;
}

.woocommerce-error{
  border-left: 6px solid #e53935;
  background: #fdeaea;
  color: #b42318;
  border-radius: 14px;
}















/* =====================================================
   FIX SOLO "MI CUENTA" (WOOCOMMERCE ACCOUNT)
   - Header no se deforma en móvil
   - Quita el fondo blanco largo detrás (deja fondo gris)
===================================================== */

/* 1) Fondo gris en toda la página de Mi cuenta */
body.woocommerce-account{
  background: #f2f3f5 !important;
}

/* 2) Quitar ese contenedor blanco grande del contenido (wrapper) */
body.woocommerce-account .site-main,
body.woocommerce-account .content-area,
body.woocommerce-account .site-content,
body.woocommerce-account .entry-content,
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce-account{
  background: transparent !important;
  box-shadow: none !important;
}

/* (por si tu tema usa algún "card" general) */
body.woocommerce-account .container,
body.woocommerce-account .woocommerce .container{
  background: transparent !important;
}

/* 3) Mantener SOLO las cajas de login/register como tarjetas blancas */
body.woocommerce-account .woocommerce form.woocommerce-form-login,
body.woocommerce-account .woocommerce form.woocommerce-form-register{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;
}

/* 4) FIX HEADER SOLO en Mi cuenta (móvil) */
@media (max-width: 768px){

  body.woocommerce-account .site-header{
    background: #0A3A66 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
  }

  /* Asegura que el header tenga su “lienzo” normal */
  body.woocommerce-account .header-top{
    background: #0A3A66 !important;
    min-height: 140px !important;
    overflow: visible !important;
  }

  /* Evita que algún estilo de WooCommerce le meta fondos raros */
  body.woocommerce-account .header-top,
  body.woocommerce-account .header-top *{
    box-shadow: none !important;
  }

  /* El buscador: que NO quede metido en una “caja blanca gigante” */
  body.woocommerce-account .impo-m-search{
    background: transparent !important;
  }
  body.woocommerce-account .impo-m-search .dgwt-wcas-search-wrapp,
  body.woocommerce-account .impo-m-search form,
  body.woocommerce-account .impo-m-search input{
    background: #f0f1f3 !important;
  }
}







/* =====================================================
   FIX HEADER SOLO EN "MI CUENTA" (MÓVIL)
   - Quita caja blanca grande detrás del buscador
   - Reduce el alto del header (menos azul vacío)
===================================================== */
@media (max-width: 768px){

  /* 1) Header más compacto SOLO en Mi cuenta */
  body.woocommerce-account .header-top{
    min-height: 96px !important;     /* antes 140px → menos azul */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* 2) Mover el buscador un poco más arriba para que no “flote” */
  body.woocommerce-account{
    --search-top: 46px !important;   /* antes 55px */
  }

  /* 3) El contenedor externo del buscador NO debe ser blanco ni gigante */
  body.woocommerce-account .impo-m-search{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
  }

  /* 4) Esto es lo que normalmente crea la “caja blanca” (wrappers del plugin) */
  body.woocommerce-account .impo-m-search .dgwt-wcas-search-wrapp,
  body.woocommerce-account .impo-m-search .dgwt-wcas-sf-wrapp,
  body.woocommerce-account .impo-m-search form{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
  }

  /* 5) SOLO el input debe verse como píldora (no una caja grande atrás) */
  body.woocommerce-account .impo-m-search input[type="search"],
  body.woocommerce-account .impo-m-search .search-field,
  body.woocommerce-account .impo-m-search input{
    background: #f0f1f3 !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    height: 46px !important;
  }

  /* 6) Si el plugin mete un DIV extra tipo “panel” blanco */
  body.woocommerce-account .impo-m-search .dgwt-wcas-search-wrapp::before,
  body.woocommerce-account .impo-m-search .dgwt-wcas-search-wrapp::after{
    content: none !important;
  }
}







/* =====================================================
   FIX LUPA DEL BUSCADOR – SOLO MI CUENTA (MÓVIL)
   Colocar icono dentro del input
===================================================== */
@media (max-width: 768px){

  /* El wrapper del buscador debe ser referencia */
  body.woocommerce-account .impo-m-search{
    position: relative !important;
  }

  /* Input: deja espacio a la izquierda para la lupa */
  body.woocommerce-account .impo-m-search input[type="search"],
  body.woocommerce-account .impo-m-search .search-field,
  body.woocommerce-account .impo-m-search input{
    padding-left: 44px !important; /* espacio para la lupa */
  }

  /* Icono lupa (FiboSearch / Woo search) */
  body.woocommerce-account .impo-m-search .dgwt-wcas-search-icon,
  body.woocommerce-account .impo-m-search button[type="submit"],
  body.woocommerce-account .impo-m-search .search-submit{
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 20px !important;
    height: 20px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important; /* no bloquea el input */
  }

  /* SVG / icono interno */
  body.woocommerce-account .impo-m-search svg,
  body.woocommerce-account .impo-m-search img{
    width: 18px !important;
    height: 18px !important;
    opacity: .65 !important;
  }
}







/* =====================================================
   🎯 CONTROL MANUAL – BUSCADOR HEADER
   SOLO MI CUENTA + SOLO MÓVIL
===================================================== */
@media (max-width: 768px){

  :root{
    /* 👉 AJUSTA AQUÍ 👇 */
    --account-search-shift-x: -170px; 
    /* ejemplos:
       -40px  = más a la izquierda
       -20px  = un poco a la izquierda
       0px    = centrado
       20px   = a la derecha
       40px   = más a la derecha
    */
  }

  /* Contenedor del buscador */
  body.woocommerce-account .impo-m-search{
    position: relative !important;
    transform: translateX(var(--account-search-shift-x)) !important;
    max-width: 100% !important;
  }

  /* Input completo (evita que se corte) */
  body.woocommerce-account .impo-m-search input,
  body.woocommerce-account .impo-m-search .search-field{
    width: 100% !important;
    box-sizing: border-box !important;
  }
}





/* =====================================================
   FIX: NARANJA SOLO EN "MI CUENTA"
   (restaura colores normales en TIENDA y categorías)
===================================================== */

/* 1) En TIENDA (y categorías/tags/busqueda Woo) quitar naranja del header/menú */
body.woocommerce-shop .site-header a,
body.post-type-archive-product .site-header a,
body.tax-product_cat .site-header a,
body.tax-product_tag .site-header a,
body.search.woocommerce .site-header a{
  color: #ffffff !important;
}

/* Menú principal (links) */
body.woocommerce-shop .site-header .menu-principal a,
body.post-type-archive-product .site-header .menu-principal a,
body.tax-product_cat .site-header .menu-principal a,
body.tax-product_tag .site-header .menu-principal a,
body.search.woocommerce .site-header .menu-principal a{
  color: #ffffff !important;
}

/* Estado activo/actual (evita que se pinte naranja) */
body.woocommerce-shop .site-header .menu-principal .current-menu-item > a,
body.post-type-archive-product .site-header .menu-principal .current-menu-item > a,
body.tax-product_cat .site-header .menu-principal .current-menu-item > a,
body.tax-product_tag .site-header .menu-principal .current-menu-item > a,
body.search.woocommerce .site-header .menu-principal .current-menu-item > a{
  color: #ffffff !important;
}

/* Iconos del header (cuenta / carrito / total) */
body.woocommerce-shop .site-header .header-account,
body.post-type-archive-product .site-header .header-account,
body.tax-product_cat .site-header .header-account,
body.tax-product_tag .site-header .header-account,
body.search.woocommerce .site-header .header-account{
  color: #ffffff !important;
}

body.woocommerce-shop .site-header .impo-cart-total,
body.post-type-archive-product .site-header .impo-cart-total,
body.tax-product_cat .site-header .impo-cart-total,
body.tax-product_tag .site-header .impo-cart-total,
body.search.woocommerce .site-header .impo-cart-total{
  color: #ffffff !important;
}

/* 2) Y aquí SI permitimos el toque naranja SOLO en MI CUENTA */
body.woocommerce-account .site-header .menu-principal .current-menu-item > a,
body.woocommerce-account .site-header .menu-principal a:hover{
  color: #ff7a00 !important;
}




/* =====================================================
   ANTI-NARANJA GLOBAL (restaura estilos normales)
   Deja el naranja SOLO para "Mi cuenta"
===================================================== */

/* ---------- 1) Footer: quitar naranja en links/títulos ---------- */
.site-footer,
.site-footer a,
.site-footer a:visited,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.site-footer .widget-title{
  color: #111 !important; /* ajusta si tu footer usa blanco */
}

/* Si tu footer es oscuro, usa blanco en vez de #111 */
.site-footer.dark,
.site-footer.dark a{
  color: #fff !important;
}

/* ---------- 2) Mi cuenta (icono) en header: que NO sea naranja ---------- */
.site-header .header-account,
.site-header .header-account svg{
  color: #ffffff !important; /* en tu header azul se ve blanco */
}

/* ---------- 3) Botón Añadir al carrito (SINGLE) NO naranja ---------- */
.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button{
  background: #6f42c1 !important;   /* tu morado */
  border-color: #6f42c1 !important;
  color: #fff !important;
}

/* Botón Añadir al carrito (LISTADO/SHOP) si también se tiñe */
.woocommerce ul.products li.product .button{
  background: #6f42c1 !important;
  border-color: #6f42c1 !important;
  color: #fff !important;
}

/* ---------- 4) Links generales que se tiñen naranja por hover ---------- */
a:hover{
  color: inherit; /* evita que un hover global los pinte naranja */
}

/* =====================================================
   NARANJA SOLO EN "MI CUENTA"
===================================================== */

/* Solo en MI CUENTA permitimos el acento naranja */
body.woocommerce-account a:hover,
body.woocommerce-account .woocommerce a:hover{
  color: #ff7a00 !important;
}

body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce a.button,
body.woocommerce-account .woocommerce input.button{
  background: #ff7a00 !important;
  border-color: #ff7a00 !important;
  color: #fff !important;
}








/* =====================================================
   1) FOOTER: mantenerlo BLANCO (si tu footer es oscuro)
   (esto revierte el negro que te apareció)
===================================================== */
.site-footer,
.site-footer a,
.site-footer a:visited,
.site-footer p,
.site-footer li,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.site-footer .widget-title{
  color: #fff !important;
}

/* Hover del footer: sutil (sin naranja) */
.site-footer a:hover{
  color: rgba(255,255,255,.85) !important;
}

/* =====================================================
   2) QUITAR “LUMINOSIDAD” NARANJA (focus/hover) EN BOTONES
   - add to cart, botones Woo, etc.
===================================================== */

/* Quita outline/box-shadow naranja típico de focus */
.woocommerce button:focus,
.woocommerce a.button:focus,
.woocommerce input.button:focus,
.woocommerce button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce input.button:focus-visible,
.single-product button.single_add_to_cart_button:focus,
.single-product button.single_add_to_cart_button:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Por si el glow aparece en hover también */
.single-product button.single_add_to_cart_button:hover,
.single-product button.single_add_to_cart_button:active{
  box-shadow: none !important;
}

/* Safari/iOS a veces mete un highlight raro */
*{
  -webkit-tap-highlight-color: transparent;
}





/* =====================================================
   ✅ OVERRIDE FINAL: quitar efectos raros (naranja/negro) fuera de "Mi cuenta"
   Pegar AL FINAL del style.css
===================================================== */

/* ---------- 1) FOOTER: solo títulos en negrita ---------- */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title{
  font-weight: 800 !important; /* títulos arriba */
}

.site-footer p,
.site-footer li,
.site-footer a,
.site-footer span,
.site-footer strong,
.site-footer b{
  font-weight: 400 !important; /* todo lo demás SIN negrita */
}

/* ---------- 2) HEADER + MENÚ: evitar que quede naranja/negro ---------- */
.site-header a{
  color: inherit; /* evita herencias raras */
}

/* Links del menú (desktop) */
.site-header .header-bottom .menu-principal a,
.site-header .header-bottom .menu a{
  color: #fff !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Estado activo / current NO naranja */
.site-header .header-bottom .menu-principal li.current-menu-item > a,
.site-header .header-bottom .menu li.current-menu-item > a,
.site-header .header-bottom .menu-principal li.current_page_item > a,
.site-header .header-bottom .menu li.current_page_item > a{
  color: #fff !important;
}

/* Total del carrito (Q...) */
.site-header .impo-cart-total{
  color: #fff !important;
  font-weight: 700 !important;
}

/* ---------- 3) QUITAR “GLOW” NARANJA (focus) EN BOTONES Woo ---------- */
.woocommerce button:focus,
.woocommerce button:active,
.woocommerce a.button:focus,
.woocommerce a.button:active,
.woocommerce button.button:focus,
.woocommerce button.button:active,
.woocommerce button.single_add_to_cart_button:focus,
.woocommerce button.single_add_to_cart_button:active{
  outline: none !important;
  box-shadow: none !important; /* 👈 quita luminosidad */
}

/* También para focus-visible (Chrome/Edge) */
.woocommerce button:focus-visible,
.woocommerce a.button:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ---------- 4) IMPORTANTE: si tenías estilos de "Mi cuenta", que SOLO vivan ahí ---------- */
/* (esto evita que tienda/carrito se contaminen) */
body:not(.woocommerce-account) .woocommerce a,
body:not(.woocommerce-account) .woocommerce a:hover{
  color: inherit !important; /* evita naranja global */
}



/* =====================================================
   🔥 FIX DEFINITIVO: QUITAR HALO / SOMBRA NARANJA
   BOTÓN "AÑADIR AL CARRITO" (single product)
===================================================== */

/* Estado normal */
.woocommerce button.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button{
  box-shadow: none !important;
  filter: none !important;
  background-image: none !important;
}

/* Hover */
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{
  box-shadow: none !important;
  filter: none !important;
}

/* Active / Focus */
.woocommerce button.single_add_to_cart_button:active,
.woocommerce button.single_add_to_cart_button:focus,
.woocommerce button.single_add_to_cart_button:focus-visible,
.woocommerce a.button:active,
.woocommerce a.button:focus,
.woocommerce a.button:focus-visible{
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

/* Por si quedó un ::before o ::after raro */
.woocommerce button.single_add_to_cart_button::before,
.woocommerce button.single_add_to_cart_button::after{
  display: none !important;
  content: none !important;
}





/* =====================================================
   ✅ TIENDA MÓVIL: 2 PRODUCTOS POR FILA (FORZADO)
   Shop + categorías + tags + búsqueda
   Pegar AL FINAL del style.css
===================================================== */
@media (max-width: 768px){

  /* 1) Forzar GRID en la lista */
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2) MUY IMPORTANTE: quitar floats/ancho fijo del tema */
  body.woocommerce-shop ul.products li.product,
  body.tax-product_cat ul.products li.product,
  body.tax-product_tag ul.products li.product,
  body.search.woocommerce ul.products li.product{
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* 3) Tarjeta compacta */
  body.woocommerce ul.products li.product{
    padding: 10px !important;
    border-radius: 14px !important;
  }

  /* 4) Imagen más chica para que se vea “mini card” */
  body.woocommerce ul.products li.product a img{
    height: 130px !important;
    object-fit: contain !important;
    padding: 8px !important;
    background: #f7f7f8 !important;
    border-radius: 12px !important;
  }

  /* 5) Texto compacto */
  body.woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 8px 0 6px !important;
  }

  body.woocommerce ul.products li.product .price{
    font-size: 14px !important;
    margin: 0 0 8px !important;
  }

  /* 6) Botón compacto */
  body.woocommerce ul.products li.product .button{
    width: 100% !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }

  /* 7) Si tu tema mete <br> o separadores raros, esto ayuda */
  body.woocommerce ul.products::before,
  body.woocommerce ul.products::after{
    content: none !important;
    display: none !important;
  }
}

/* Extra: pantallas MUY pequeñas -> 1 por fila */
@media (max-width: 380px){
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: 1fr !important;
  }
}






/* =====================================================
   AJUSTE FINO – TARJETAS TIENDA MÓVIL
   Más anchas + menos altas (2 por fila)
===================================================== */
@media (max-width: 768px){

  /* Más aire horizontal entre tarjetas */
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.search.woocommerce ul.products{
    gap: 14px !important;
  }

  /* Tarjeta un poco más ancha visualmente */
  body.woocommerce ul.products li.product{
    padding: 12px !important;
    border-radius: 16px !important;
  }

  /* 🔑 CLAVE: bajar altura de la imagen */
  body.woocommerce ul.products li.product a img{
    height: 110px !important;   /* antes 130px */
    padding: 6px !important;    /* menos aire */
  }

  /* Título más compacto */
  body.woocommerce ul.products li.product
  .woocommerce-loop-product__title{
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 6px 0 4px !important;
  }

  /* Precio más pegado */
  body.woocommerce ul.products li.product .price{
    font-size: 14px !important;
    margin: 0 0 6px !important;
  }

  /* Botón menos alto */
  body.woocommerce ul.products li.product .button{
    padding: 9px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
}

/* iPhone muy pequeño: imagen todavía más baja */
@media (max-width: 390px){
  body.woocommerce ul.products li.product a img{
    height: 100px !important;
  }
}



/* =====================================================
   CARRITO (PC + MÓVIL) - ICONO SVG (sin emoji)
===================================================== */

/* Tamaños base (PC) */
:root{
  --cart-size-desktop: 28px;
  --cart-hitbox-desktop: 35px;
  --cart-color-desktop: #ffffff;
}

/* El link del carrito */
.header-cart a,
.impo-m-cart a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}

/* Quitar cualquier texto/emoji que se haya colado */
.header-cart a::before,
.header-cart a::after{
  content: none !important;
}

/* Tu span del ícono */
.impo-cart-icon{
  display: inline-block !important;
  width: var(--cart-size-desktop) !important;
  height: var(--cart-size-desktop) !important;

  background: var(--cart-color-desktop) !important;

  mask: url("/wp-content/themes/impoauto/images/cart.svg") no-repeat center !important;
  -webkit-mask: url("/wp-content/themes/impoauto/images/cart.svg") no-repeat center !important;

  mask-size: contain !important;
  -webkit-mask-size: contain !important;
}

/* Área “clickeable” */
.header-cart a{
  min-width: var(--cart-hitbox-desktop) !important;
  min-height: var(--cart-hitbox-desktop) !important;
  justify-content: center !important;
}


/* =========================================
   HEADER DESKTOP – ocultar teléfono
========================================= */
@media (min-width: 769px){
  .header-phone{
    display: none !important;
  }
}




/* =====================================================
   HEADER DESKTOP – CONTROL TOTAL ICONO "MI CUENTA"
   Mover libremente en X / Y
===================================================== */
@media (min-width: 769px){

  :root{
    /* 👉 AJUSTA SOLO ESTOS VALORES */
    --account-move-x: 1120px;  /* izquierda (-) | derecha (+) */
    --account-move-y: 0px;    /* arriba (-) | abajo (+) */
    --account-size: 26px;     /* tamaño del icono */
  }

  .header-account{
    position: relative !important;
    transform: translate(
      var(--account-move-x),
      var(--account-move-y)
    ) !important;

    width: 40px;
    height: 40px;

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

    color: #ffffff !important;
    z-index: 50 !important;
  }

  .header-account svg{
    width: var(--account-size) !important;
    height: var(--account-size) !important;
  }
}





/* =====================================================
   OCULTAR HAMBURGUESA EN COMPUTADORA
===================================================== */
@media (min-width: 769px){
  .impo-burger{
    display: none !important;
  }
}




.header-account img{
  width: 22px;
  height: 22px;
  display: block;
}



/* =========================================================
   ✅ HEADER PC: mover Logo / Buscador(FiboSearch) / Cuenta / Carrito
   + Degradado vertical estilo tu imagen (NO circular)
   Pegar al FINAL del style.css
========================================================= */

@media (min-width: 769px){

  /* ========= 1) CONTROLES (AJUSTA AQUÍ) ========= */
  :root{
    /* POSICIONES (px) */
    --desk-logo-x: -220px;
    --desk-logo-y: -2px;

    --desk-search-x: -320px;
    --desk-search-y: 0px;
    --desk-search-w: 720px;  /* ancho del buscador */

    --desk-account-x: 780px;
    --desk-account-y: 0px;

    --desk-cart-x: -90px;
    --desk-cart-y: -2px;

    /* ESPACIADO entre iconos (si los tienes juntos) */
    --desk-icons-gap: 18px;

    /* ========= 2) COLORES (ajusta si quieres) ========= */
    --impo-blue-top:   #0b4f98;  /* azul más vivo (arriba) */
    --impo-blue-bottom:#062e63;  /* azul más oscuro (abajo) */
    --impo-blue-menu:  #062654;  /* barra menú inferior */
  }

  /* ========= 3) FONDO HEADER (degradado vertical) ========= */
  .site-header{
    background: linear-gradient(180deg, var(--impo-blue-top) 0%, var(--impo-blue-bottom) 100%) !important;
  }

  /* Si tu “header-top” es la franja azul donde están logo/buscador/iconos */
  .site-header .header-top{
    background: transparent !important; /* hereda el degradado del .site-header */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 18px 28px !important;
  }

  /* Barra del menú (la de abajo) */
  .site-header .header-bottom{
    background: var(--impo-blue-menu) !important;
  }

  /* ========= 4) MOVER ELEMENTOS SIN ROMPER FLEX =========
     (solo mueve visualmente con translate, tú ajustas variables)
  ======================================================= */

  /* LOGO */
  .site-header .header-logo{
    transform: translate(var(--desk-logo-x), var(--desk-logo-y)) !important;
    will-change: transform;
  }

  /* BUSCADOR (FiboSearch) */
  .site-header .header-search-big,
  .site-header .impo-m-search{
    width: var(--desk-search-w) !important;
    max-width: var(--desk-search-w) !important;
    transform: translate(var(--desk-search-x), var(--desk-search-y)) !important;
    will-change: transform;
  }

  /* Por si FiboSearch mete wrappers raros */
  .site-header .header-search-big form,
  .site-header .impo-m-search form{
    width: 100% !important;
  }

  /* CONTENEDOR DERECHA (cuenta + carrito) si existen como elementos sueltos */
  .site-header .header-account{
    transform: translate(var(--desk-account-x), var(--desk-account-y)) !important;
    will-change: transform;
  }

  .site-header .header-cart,
  .site-header .impo-m-cart{
    transform: translate(var(--desk-cart-x), var(--desk-cart-y)) !important;
    will-change: transform;
  }

  /* Si los quieres “pegados” uno al lado del otro más bonito */
  .site-header .header-cart a,
  .site-header .header-account{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Ajusta el tamaño del icono de MI CUENTA si usas <img> */
  .site-header .header-account img{
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* ========= 5) FOOTER (degradado vertical igual) ========= */
  footer,
  .site-footer{
    background: linear-gradient(180deg, var(--impo-blue-top) 0%, var(--impo-blue-bottom) 100%) !important;
  }

  /* Links/textos del footer (para que se lean) */
  footer, footer a,
  .site-footer, .site-footer a{
    color: #ffffff !important;
  }

  /* Si tu footer tiene una franja inferior distinta, opcional */
  .site-footer .footer-bottom{
    background: rgba(0,0,0,0.12) !important;
  }
}



:root{
  /* Ajusta estos 3 colores hasta que se parezca a tu imagen */
  --impo-blue-top: #0a2f78;
  --impo-blue-mid: #0a3a66;
  --impo-blue-bot: #061c3f;
}

/* HEADER */
.site-header{
  background: linear-gradient(to bottom, var(--impo-blue-top) 0%, var(--impo-blue-mid) 55%, var(--impo-blue-bot) 100%) !important;
}

/* FOOTER (ajusta selector si tu footer usa otro) */
.site-footer,
footer{
  background: linear-gradient(to bottom, var(--impo-blue-top) 0%, var(--impo-blue-mid) 55%, var(--impo-blue-bot) 100%) !important;
}




/* Solo desktop (si lo quieres en móvil también, quita esto) */
@media (max-width: 768px){
  .impo-branch{ display: none !important; }
}

/* Layout */
.impo-branch{ display: inline-block; }

/* Botón estilo como tu ejemplo */
.impo-branch-btn{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;

  align-items: center;
  text-align: left;

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

  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  color: #fff;

  cursor: pointer;
  user-select: none;
}

.impo-branch-top{
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.1;
}

.impo-branch-bottom{
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  font-weight: 600;
  font-size: 12px;
  opacity: .92;
}

.impo-branch-caret{
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  font-size: 14px;
  opacity: .9;
  transition: transform .2s ease;
}

/* Panel (cortina) */
.impo-branch-panel{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;

  width: 320px;
  max-width: 90vw;

  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);

  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 999999;
}

.impo-branch-panel-inner{
  padding: 14px;
  color: #111;
}

.impo-branch-title{
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 6px;
}

.impo-branch-phone,
.impo-branch-address{
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 10px;
  font-weight: 400;
}

.impo-branch-maps{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0a3a66;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}

/* Abierto */
.impo-branch.is-open .impo-branch-panel{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.impo-branch.is-open .impo-branch-caret{
  transform: rotate(180deg);
}

/* WhatsApp icon estilo (para que combine con tus iconos blancos) */
.impo-wa{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  text-decoration: none;
}



:root{
  /* Desktop: mueve cada pieza en PX */
  --hdr-logo-x: -100px;   --hdr-logo-y: 0px;
  --hdr-search-x: 0px; --hdr-search-y: 0px;
  --hdr-branch-x: 800px; --hdr-branch-y: 0px;
  --hdr-account-x: 0px;--hdr-account-y: 0px;
  --hdr-wa-x: 800px;     --hdr-wa-y: 0px;
  --hdr-cart-x: 0px;   --hdr-cart-y: 0px;
}

/* Asegura contexto */
.site-header .header-top{ position: relative; }

/* Logo */
.header-logo{
  position: relative;
  transform: translate(var(--hdr-logo-x), var(--hdr-logo-y));
}

/* Buscador FiboSearch (tu wrapper) */
.header-search-big,
.impo-m-search{
  position: relative;
  transform: translate(var(--hdr-search-x), var(--hdr-search-y));
}

/* Botón sucursal */
.impo-branch{
  position: relative;
  transform: translate(var(--hdr-branch-x), var(--hdr-branch-y));
}

/* Mi cuenta */
.header-account{
  position: relative;
  transform: translate(var(--hdr-account-x), var(--hdr-account-y));
}

/* WhatsApp */
.impo-wa{
  position: relative;
  transform: translate(var(--hdr-wa-x), var(--hdr-wa-y));
}

/* Carrito */
.header-cart{
  position: relative;
  transform: translate(var(--hdr-cart-x), var(--hdr-cart-y));
}





.header-whatsapp{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;

  cursor: pointer;
}



.header-whatsapp img{
  display: block;
  width: 26px;          /* tamaño del icono */
  height: 26px;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


:root{
  --whatsapp-x: 792px;   /* + derecha | - izquierda */
  --whatsapp-y: 0px;   /* + abajo   | - arriba */
}

.header-whatsapp{
  transform: translate(
    var(--whatsapp-x),
    var(--whatsapp-y)
  );
}

.header-whatsapp img{ filter: brightness(0) invert(1); }




/* ===== FIX PANEL SUCURSAL: que se sobreponga ===== */

/* Contenedor principal del botón */
.impo-branch{
  position: relative !important;
  z-index: 5000 !important;
}

/* Panel desplegable */
.impo-branch-panel{
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;

  z-index: 9999 !important; /* 👈 MUY ALTO */
}

/* Asegurar que nada del header lo tape */
.site-header{
  position: relative !important;
  z-index: 4000 !important;
}

/* Evitar que el hero o imágenes lo cubran */
.home-hero,
.hero-layout,
.hero-image-wrap{
  position: relative !important;
  z-index: 1 !important;
}


.impo-branch-maps{
  color: #ffffff !important;
}



/* =========================================
   QUITAR FRANJA AZUL SOBRANTE DEL MENÚ (DESKTOP)
========================================= */
@media (min-width: 769px){

  /* Contenedor del menú */
  .header-bottom{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background: transparent !important; /* elimina la franja */
  }

  /* UL del menú */
  .header-bottom .menu-principal,
  .header-bottom .menu-principal ul{
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* NAV si existe */
  .header-bottom nav{
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
}


/* =========================================
   AJUSTE FINO: espacio inferior del menú (DESKTOP)
========================================= */
@media (min-width: 769px){

  .header-bottom{
    padding-bottom: 10px !important; /* ajusta: 6px, 8px, 12px si quieres */
  }

}




/* =====================================
   ANCHO PÁGINA TIENDA - DESKTOP
===================================== */
@media (min-width: 1024px) {
  body.woocommerce-shop .site-main,
  body.woocommerce.archive .site-main {
    max-width: 450px;   /* ← CAMBIA ESTE VALOR */
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
  }
}








/* =====================================================
   HEADER DESKTOP (seguro) + CONTROL FIBOSEARCH
   (PONER AL FINAL DEL CSS)
===================================================== */
@media (min-width: 769px){

  :root{
    /* ✅ CAMBIA AQUÍ EL ANCHO DEL BUSCADOR */
    --fs-maxw-global: 450px;      /* ancho general */
    --fs-maxw-shop:   488px;      /* ancho en TIENDA */
    --fs-maxw-account:488px;      /* ancho en MI CUENTA */
  }

  /* Evita que el header se “envuelva” y se desacomode */
  .site-header .header-top{
    flex-wrap: nowrap !important;
  }

  /* Logo y bloque derecho no se estiran */
  .site-header .header-logo,
  .site-header .impo-branch,
  .site-header .header-whatsapp,
  .site-header .header-account,
  .site-header .header-cart{
    flex: 0 0 auto !important;
  }

  /* El buscador ocupa el centro y NO empuja raro */
  .site-header .impo-m-search{
    flex: 1 1 auto !important;
    max-width: var(--fs-maxw-global) !important;
    width: 100% !important;
    margin: 0 auto !important;
    min-width: 280px !important;
  }

  /* Por página (desktop) */
  body.woocommerce-shop .site-header .impo-m-search{
    max-width: var(--fs-maxw-shop) !important;
  }
  body.woocommerce-account .site-header .impo-m-search{
    max-width: var(--fs-maxw-account) !important;
  }

  /* ====== FiboSearch: asegura que el wrapper use 100% ====== */
  .site-header .impo-m-search .dgwt-wcas-search-wrapp,
  .site-header .impo-m-search .dgwt-wcas-sf-wrapp,
  .site-header .impo-m-search form{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Input tipo “píldora” */
  .site-header .impo-m-search input.dgwt-wcas-search-input{
    width: 100% !important;
    height: 44px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    padding-left: 44px !important; /* espacio para lupa */
  }

  /* Lupa dentro a la izquierda */
  .site-header .impo-m-search .dgwt-wcas-search-icon{
    left: 16px !important;
  }
}


/* =====================================================
   FIX: HEADER "MI CUENTA" (DESKTOP) - quitar altura extra
   Solo afecta /my-account/
===================================================== */
@media (min-width: 769px){

  /* 1) La fila de arriba NO debe tener altura/min-height raro */
  body.woocommerce-account .site-header .header-top{
    min-height: 0 !important;
    height: auto !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;

    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }

  /* 2) Evita que algún wrapper del buscador “infle” la fila */
  body.woocommerce-account .site-header .header-search-big,
  body.woocommerce-account .site-header .impo-m-search,
  body.woocommerce-account .site-header .dgwt-wcas-search-wrapp,
  body.woocommerce-account .site-header .dgwt-wcas-sf-wrapp,
  body.woocommerce-account .site-header .dgwt-wcas-search-form{
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 3) Menú de abajo: solo un poco de espacio para que no se vea “apretado” */
  body.woocommerce-account #impoDesktopMenu{
    margin-top: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}










/* =====================================================
   MI CUENTA (DESKTOP) – POSICIONES + VOLVER A MOSTRAR CARRITO
===================================================== */
@media (min-width: 769px){

  /* Solo en My Account */
  body.woocommerce-account .site-header .header-top{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
  }

  /* Asegurar que cada bloque se vea (por si algo lo ocultó) */
  body.woocommerce-account .site-header .header-logo,
  body.woocommerce-account .site-header .header-search-big,
  body.woocommerce-account .site-header .impo-branch,
  body.woocommerce-account .site-header .header-whatsapp,
  body.woocommerce-account .site-header .header-account,
  body.woocommerce-account .site-header .header-cart{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Logo */
  body.woocommerce-account .site-header .header-logo{
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* Buscador (FiboSearch) - ocupa el centro */
  body.woocommerce-account .site-header .header-search-big{
    flex: 1 1 488px !important;      /* ancho base */
    max-width: 488px !important;     /* limite */
    margin: 0 12px !important;
  }

  /* Grupo derecha (sucursal + whatsapp + cuenta + carrito) */
  body.woocommerce-account .site-header .impo-branch{ flex: 0 0 auto !important; }
  body.woocommerce-account .site-header .header-whatsapp{ flex: 0 0 auto !important; margin-left: 10px !important; }
  body.woocommerce-account .site-header .header-account{ flex: 0 0 auto !important; margin-left: 10px !important; }

  /* CARRITO: forzar que aparezca y quede al final */
  body.woocommerce-account .site-header .header-cart{
    flex: 0 0 auto !important;
    margin-left: 14px !important;
  }
  body.woocommerce-account .site-header .header-cart a{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* ========= CONTROLES MANUALES (mueve lo que quieras) ========= */
  :root{
    --acc-shift-x: 700px;   /* mover icono cuenta izq(-) der(+) */
    --acc-shift-y: 0px;   /* mover arriba(-) abajo(+) */

    --cart-shift-x: -100px;  /* mover carrito izq(-) der(+) */
    --cart-shift-y: -2px;  /* mover arriba(-) abajo(+) */
  }

  body.woocommerce-account .site-header .header-account{
    transform: translate(var(--acc-shift-x), var(--acc-shift-y)) !important;
  }
  body.woocommerce-account .site-header .header-cart{
    transform: translate(var(--cart-shift-x), var(--cart-shift-y)) !important;
  }
}




/* =====================================================
   MI CUENTA (DESKTOP)
   CONTROLES MANUALES DE POSICIÓN – SIN REORDENAR
===================================================== */
@media (min-width: 769px){
  body.woocommerce-account{

    /* =========================
       AJUSTA SOLO ESTOS VALORES
    ========================== */

    /* LOGO */
    --logo-x: -325px;     /* izquierda (-) / derecha (+) */
    --logo-y: 0px;     /* arriba (-) / abajo (+) */

    /* BUSCADOR (FiboSearch) */
    --search-x: -370px;
    --search-y: 0px;
    --search-width: 600px; /* ancho del buscador */

    /* BOTÓN SUCURSAL */
    --branch-x: 790px;
    --branch-y: 0px;

    /* WHATSAPP */
    --wa-x: 750px;
    --wa-y: 0px;

    /* CARRITO */
    --cart-x: 0px;
    --cart-y: 0px;

    /* MI CUENTA */
    --account-x: -140px;
    --account-y: 0px;
  }

  /* LOGO */
  body.woocommerce-account .header-logo{
    transform: translate(var(--logo-x), var(--logo-y)) !important;
  }

  /* BUSCADOR */
  body.woocommerce-account .header-search-big{
    max-width: var(--search-width) !important;
    transform: translate(var(--search-x), var(--search-y)) !important;
  }

  /* SUCURSAL */
  body.woocommerce-account .impo-branch{
    transform: translate(var(--branch-x), var(--branch-y)) !important;
  }

  /* WHATSAPP */
  body.woocommerce-account .header-whatsapp{
    transform: translate(var(--wa-x), var(--wa-y)) !important;
  }

  /* CARRITO */
  body.woocommerce-account .header-cart{
    transform: translate(var(--cart-x), var(--cart-y)) !important;
  }

  /* MI CUENTA */
  body.woocommerce-account .header-account{
    transform: translate(var(--account-x), var(--account-y)) !important;
  }
}





/* =====================================================
   MEGA MARCAS: panel de submarcas AL LADO (no encima)
   Pegar al FINAL
===================================================== */

/* El contenedor se divide en 2 columnas: lista + panel */
.mega-marcas-wrap{
  display: flex !important;
  align-items: stretch !important;
  gap: 16px !important;          /* separación entre columnas */
}

/* Columna izquierda (lista marcas) */
.mega-marcas .marcas-lista{
  flex: 0 0 240px !important;    /* ancho de la columna de marcas (ajusta) */
  margin: 0 !important;
}

/* Columna derecha (panel submarcas) */
.mega-marcas .lineas-flyout{
  position: relative !important; /* ✅ ya no absoluto */
  top: auto !important;
  left: auto !important;
  right: auto !important;

  flex: 1 1 auto !important;     /* ocupa el resto */
  width: auto !important;
  height: auto !important;
  min-height: 360px !important;  /* conserva “ese tamaño” */
  z-index: 1 !important;
  transform: none !important;
}

/* El contenido del panel puede scrollear sin mover nada */
.mega-marcas .lineas-panel{
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Importante: elimina el “puente” invisible si lo tenías */
.mega-marcas .lineas-flyout::before{
  content: none !important;
}




/* =====================================================
   MEGA MARCAS – PANEL SOBRE IMAGEN + TEXTO BLANCO
===================================================== */

/* El wrapper sigue siendo 2 columnas */
.mega-marcas-wrap{
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 16px !important;
  z-index: 5 !important;
}

/* Columna marcas (izquierda) */
.mega-marcas .marcas-lista{
  flex: 0 0 240px !important;
  position: relative !important;
  z-index: 6 !important;
}

/* PANEL DE SUBMARCAS (SOBRE TODO) */
.mega-marcas .lineas-flyout{
  position: absolute !important;     /* 🔑 se sobrepone */
  top: 0 !important;
  left: calc(240px + 16px) !important; /* justo a la derecha */
  
  width: 420px !important;           /* ajusta si quieres */
  min-height: 360px !important;

  background: #0b1a3a !important;    /* azul oscuro */
  border-radius: 16px !important;

  z-index: 999 !important;           /* 🔑 sobre imágenes */
  box-shadow: 0 20px 50px rgba(0,0,0,.45) !important;

  pointer-events: auto !important;
}

/* Panel interno */
.mega-marcas .lineas-panel{
  display: none !important;
  padding: 18px 20px !important;
}

/* Mostrar SOLO el panel activo */
.mega-marcas .lineas-panel.is-active{
  display: block !important;
}

/* ===============================
   TEXTO BLANCO (FIX DE LEGIBILIDAD)
=============================== */

/* Título */
.mega-marcas .lineas-panel h4{
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  margin-bottom: 14px !important;
}

/* Lista */
.mega-marcas .lineas-panel ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Links */
.mega-marcas .lineas-panel ul li a{
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;

  color: #ffffff !important;         /* 🔑 BLANCO */
  font-weight: 600 !important;
  text-decoration: none !important;

  transition: background .2s ease, transform .15s ease;
}

/* Hover elegante */
.mega-marcas .lineas-panel ul li a:hover{
  background: rgba(255,255,255,.12) !important;
  transform: translateX(4px);
}










/* =====================================================
   MENÚ HAMBURGUESA (MÓVIL) – CATEGORÍAS MÁS JUNTAS + SUBCATS DEBAJO
===================================================== */
@media (max-width: 768px){

  /* Menos padding general del panel */
  #impoMobileMenuBody{
    padding: 8px 10px 14px !important;
  }

  /* Título "Categorías" más pegado */
  .impo-mobile-cats-title{
    margin: 8px 0 8px !important;
    font-size: 15px !important;
  }

  /* Lista de categorías: menos separación */
  .impo-mobile-catlist{
    gap: 6px !important;          /* antes 10px */
  }

  /* Cada item: menos padding vertical */
  .impo-cat-item{
    padding: 6px 0 !important;    /* antes 10px */
    border-bottom: 0 !important;  /* opcional: quita la línea */
  }

  /* Botón/Link principal: más compacto */
  .impo-mobile-catlist > li > a.impo-cat-link{
    padding: 10px 12px !important;   /* antes 14px */
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  /* Flecha más centrada y compacta */
  .impo-cat-toggle{
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
  }
  .impo-cat-toggle::before{
    line-height: 30px !important;
    font-size: 16px !important;
  }

  /* SUBCATEGORÍAS: debajo y compactas */
  .impo-subcat-list{
    padding: 0 0 0 10px !important;
    margin-top: 6px !important;
  }

  .impo-subcat-item a{
    margin: 6px 10px 0 10px !important;   /* menos separación */
    padding: 9px 12px !important;         /* menos alto */
    border-radius: 12px !important;
    font-size: 14px !important;
  }
}





/* =====================================================
   FIX: MENÚ MÓVIL SIN LÍMITE DE SCROLL (no se corta)
   Pegar al FINAL del style.css
===================================================== */
@media (max-width: 768px){

  /* El panel completo ocupa toda la pantalla */
  .impo-mobile-menu{
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* evita scroll doble */
  }

  /* Cabecera fija arriba */
  .impo-mobile-menu-head{
    flex: 0 0 auto !important;
  }

  /* El “body” del menú es el que hace scroll */
  #impoMobileMenuBody,
  .impo-mobile-menu-body{
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    /* MUY IMPORTANTE: elimina el límite que lo corta */
    max-height: none !important;
    height: auto !important;
  }

  /* Por si algún estilo anterior le puso overflow hidden */
  #impoMobileMenuBody *{
    max-height: none;
  }
}



.producto-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #222;
}

.producto-precio {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #2E7D32; /* tu azul principal */
  margin-bottom: 12px;
}




/* Hacer que todas las tarjetas tengan misma estructura */
.producto-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Contenedor interno ordenado */
.producto-card img {
  margin-bottom: 10px;
}

/* Forzar misma altura mínima para el título */
.producto-card h3 {
  min-height: 48px; /* ajusta si quieres más espacio */
}

/* Precio */
.producto-precio {
  margin-bottom: 15px;
}

/* Empujar botón hacia abajo */
.producto-card .btn-principal {
  margin-top: auto;
}


/* ===============================
   ALINEACIÓN PERFECTA TIENDA WC
=================================*/

.woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  height: auto;
}

/* Enlace interno ocupa todo el espacio */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Título con altura controlada */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  min-height: 55px;
}

/* Precio separación limpia */
.woocommerce ul.products li.product .price {
  margin-bottom: 15px;
}

/* BOTÓN siempre abajo */
.woocommerce ul.products li.product .button {
  margin-top: auto;
}







/* MI CUENTA (WooCommerce): texto SIEMPRE blanco en hover/active */
.woocommerce-MyAccount-navigation ul li a,
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li a:focus,
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.is-active a:hover {
  color: #fff !important;
}





/* ==========================
   MI CUENTA – TEXTO BLANCO SIEMPRE
========================== */

.woocommerce-account .woocommerce-MyAccount-navigation a {
  color: #fff !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation a:focus,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  color: #fff !important;
}



.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: #ffffff !important;
}








/* ===============================
   MI CUENTA - DIRECCIONES
=================================*/

.woocommerce-account .woocommerce-Addresses {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.woocommerce-account .woocommerce-Address {
  flex: 1;
  min-width: 300px;
  background: #ffffff;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Título */
.woocommerce-account .woocommerce-Address-title h3 {
  font-size: 20px;
  font-weight: 700;
  color: #0A3A66; /* tu azul principal */
  margin-bottom: 12px;
}

/* Texto */
.woocommerce-account .woocommerce-Address address {
  font-style: normal;
  color: #555;
  margin-top: 10px;
}

/* Botón agregar dirección */
.woocommerce-account .woocommerce-Address-title .edit {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  background: #0A3A66;
  color: #fff !important;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s ease;
}

.woocommerce-account .woocommerce-Address-title .edit:hover {
  background: #072a4c;
  color: #fff !important;
}



/* Quitar fondo azul feo de direcciones */
.woocommerce-account .woocommerce-Address,
.woocommerce-account .woocommerce-Address-title,
.woocommerce-account .woocommerce-Address-title h3 {
  background: transparent !important;
}

/* Resetear cualquier fondo aplicado al contenedor */
.woocommerce-account .woocommerce-Addresses {
  background: transparent !important;
}








/* ===============================
   FIX: Sucursal en MI CUENTA (sin doble borde)
=================================*/

/* El contenedor externo lleva el estilo */
body.woocommerce-account .site-header .impo-branch{
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12) !important;
  padding: 6px !important;
}

/* El botón NO debe verse como otro contenedor */
body.woocommerce-account .site-header .impo-branch-btn{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  padding: 10px 12px !important;
  width: 100%;
  text-align: left;
}

/* Textos y caret blancos */
body.woocommerce-account .site-header .impo-branch-top,
body.woocommerce-account .site-header .impo-branch-bottom,
body.woocommerce-account .site-header .impo-branch-caret{
  color: #fff !important;
}

body.woocommerce-account .site-header .impo-branch-top{
  font-weight: 700;
}

body.woocommerce-account .site-header .impo-branch-bottom{
  font-weight: 600;
  opacity: 0.95;
}

body.woocommerce-account .site-header .impo-branch-caret{
  align-self: center;
  justify-self: end;
}




/* ===============================
   MÓVIL: mover ícono MI CUENTA
=================================*/
@media (max-width: 768px){

  /* El header-top sirve como referencia */
  .site-header .header-top{
    position: relative;
  }

  /* Ícono cuenta: anclado y movible */
  .site-header .header-account{
    position: absolute;
    top: 15px;     /* 👈 ajusta esto */
    right: 64px;   /* 👈 ajusta esto (para no chocar con carrito) */
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}




/* =========================================
   MI CUENTA (MÓVIL) - AJUSTE REAL DE HEADER + BUSCADOR
   Edita SOLO los números de abajo
========================================= */
@media (max-width: 768px){

  /* 🔧 AJUSTES A TU GUSTO */
  body.woocommerce-account{
    --impo_header_pad_top: 8px;     /* padding arriba del header */
    --impo_header_pad_bottom: 6px;  /* padding abajo del header */
    --impo_search_margin_top: -70px;  /* separación arriba del buscador */
    --impo_search_margin_bottom: 0px; /* separación abajo del buscador */
  }

  /* 1) Quita el “hueco” del header (real) */
  body.woocommerce-account .site-header .header-top{
    padding-top: var(--impo_header_pad_top) !important;
    padding-bottom: var(--impo_header_pad_bottom) !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
  }

  /* 2) Sube el buscador (real, sin mover iconos/logo) */
  body.woocommerce-account .site-header .header-search-big,
  body.woocommerce-account .site-header .impo-m-search{
    margin-top: var(--impo_search_margin_top) !important;
    margin-bottom: var(--impo_search_margin_bottom) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    clear: none !important;
  }

  /* 3) Si hay “gap” de flex/grid empujando filas hacia abajo */
  body.woocommerce-account .site-header .header-top{
    gap: 0 !important;
    row-gap: 0 !important;
  }
}







/* ===============================
   MENÚ MÓVIL - IGUALAR ALTURA MARCAS
=================================*/

/* Enlaces principales */
.impo-mobile-menu-list li a {
  display: block;
  padding: 16px 20px;
  border-radius: 14px;
}

/* Categorías (Marcas y otros padres) */
.impo-mobile-catlist .impo-cat-link {
  display: block;
  padding: 16px 20px !important;
  border-radius: 14px;
  min-height: 56px;
  display: flex;
  align-items: center;
}