/* ==========================================================================
   1. ESTRUCTURA PRINCIPAL (LAYOUT)
   ========================================================================== */

.gc-catalog-layout,
.gc-catalog-layout * {
  box-sizing: border-box;
}

.gc-catalog-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-top: 20px;

  /* Ancho 1300px (Amplio y centrado) */
  width: 100%;
  max-width: 1300px;

  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
}

/* Sidebar (Filtros) */
.gc-filter-sidebar {
  flex: 0 0 300px;
  width: 300px;
  background: #fdfdfd;
  padding: 25px;
  border: 1px solid #eee;
  border-radius: 12px;
  position: sticky;
  top: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.gc-filter-group {
  margin-bottom: 20px;
}

.gc-filter-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 0.9em;
  color: #333;
}

.gc-filter-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9em;
}

/* Columna de Resultados */
.gc-results-column {
  flex: 1;
  flex-grow: 1;
  min-width: 0;
  width: 100%;
}

.gc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 25px;
  width: 100%;
}

/* ==========================================================================
   2. TARJETAS (CARDS)
   ========================================================================== */

.gc-card {
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
  display: flex;
  flex-direction: column;
}

.gc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.gc-img {
  height: 180px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #f0f0f0;
}

.gc-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.gc-body h3 {
  margin: 0 0 10px 0 !important;
  font-size: 1.25em !important;
  line-height: 1.3 !important;
  color: #1a202c !important;
  font-weight: 700 !important;
  text-transform: none !important;
  padding: 0 !important;
}

.gc-meta {
  font-size: 0.85em;
  color: #666;
  margin-bottom: 20px;
}

.gc-btn {
  display: block;
  background: #bbbbbb;
  color: #333 !important;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none !important;
  font-weight: bold;
  transition: 0.3s;
  margin-top: auto;
  border: none !important;
}

.gc-btn:hover {
  background: #d4d4d4;
  color: #000 !important;
}

.gc-clean-btn {
  width: 100%;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #666;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9em;
  transition: all 0.2s ease;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.gc-clean-btn:hover {
  background-color: #f9f9f9;
  border-color: #999;
  color: #333;
}

/* ==========================================================================
   3. BARRA SUPERIOR (ORDEN Y PAGINACIÓN)
   ========================================================================== */

.gc-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 15px 20px;
  border-radius: 12px 12px 0 0;
  border: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
  width: 100%;
}

.gc-sort-wrap {
  display: flex;
  align-items: center;
}

.gc-sort-select {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 12px;
  color: #555;
  background: #fff;
  cursor: pointer;
  font-size: 0.95em;
  outline: none;
  min-width: 200px;
  font-weight: 500;
  height: auto !important;
}

/* Paginación Horizontal */
.gc-pagination-top,
.gc-pagination-bottom {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
}

.gc-pagination-top .page-numbers,
.gc-pagination-bottom .page-numbers {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  color: #666;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.9em;
  transition: 0.2s;
  border: 1px solid transparent;
  padding: 0;
  margin: 0 2px;
}

.gc-pagination-top .page-numbers.current,
.gc-pagination-bottom .page-numbers.current {
  background: #333;
  color: #fff;
  border-color: #333;
}

.gc-pagination-top .page-numbers:hover:not(.current),
.gc-pagination-bottom .page-numbers:hover:not(.current) {
  background: #f0f0f0;
  color: #000;
}

.gc-pagination-bottom {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 30px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  margin-bottom: 25px;
}

/* ==========================================================================
   4. DETALLE DEL PRODUCTO (SINGLE)
   ========================================================================== */

.gc-single-container {
  max-width: 1100px;
  margin: 0 auto;
  font-family: inherit;
  clear: both;
}

.gc-top-section {
  display: flex;
  gap: 40px;
  margin-bottom: 50px;
}

.gc-gallery-col {
  flex: 1;
  min-width: 300px;
}

.gc-main-image-wrapper {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
}

.gc-main-image-wrapper img {
  width: 100% !important;
  height: 400px !important;
  object-fit: cover !important;
  display: block;
  transition: 0.3s;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.gc-main-image-wrapper:hover img {
  transform: scale(1.02);
}

.gc-zoom-icon {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.9);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.3s;
  z-index: 10;
}

.gc-main-image-wrapper:hover .gc-zoom-icon {
  opacity: 1;
  transform: translateY(0);
}

.gc-thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  overflow-x: auto;
}

.gc-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.6;
  transition: 0.3s;
  border: 2px solid transparent;
}

.gc-thumb:hover,
.gc-thumb.active {
  opacity: 1;
  border-color: #333;
}

.gc-info-col {
  flex: 1;
  padding-top: 10px;
}

.gc-title {
  font-size: 2.2em !important;
  margin-bottom: 10px !important;
  color: #111 !important;
  line-height: 1.2 !important;
  margin-top: 0 !important;
  font-family: inherit;
}

.gc-meta-row {
  font-size: 1.1em;
  color: #555;
  margin-bottom: 25px;
  margin-top: 20px;
}

.gc-price {
  font-size: 1.4em;
  font-weight: bold;
  color: #000;
}

.gc-short-desc {
  font-size: 1em;
  line-height: 1.6;
  color: #666;
  margin-bottom: 30px;
  border-left: 3px solid #eee;
  padding-left: 15px;
}

.gc-action-box {
  display: flex;
  gap: 15px;
  align-items: flex-end;
}

.gc-qty-box {
  display: flex;
  flex-direction: column;
}

.gc-qty-box label {
  font-size: 0.8em;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.gc-qty-box input {
  width: 70px;
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1.1em;
}

.gc-whatsapp-btn {
  background-color: #25D366;
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none !important;
  font-weight: bold;
  font-size: 0.95em;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: 0.2s;
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
  border: none;
}

.gc-whatsapp-btn:hover {
  background-color: #20bd5a;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(37, 211, 102, 0.4);
  color: #fff !important;
}

.gc-tabs-container {
  margin-top: 50px;
}

.gc-tabs-nav {
  border-bottom: 2px solid #eee;
  margin-bottom: 20px;
  display: flex;
  gap: 30px;
}

.gc-tab-link {
  background: none;
  border: none;
  font-size: 1.1em;
  font-weight: bold;
  color: #888;
  padding: 10px;
  cursor: pointer;
  position: relative;
  transition: 0.3s;
}

.gc-tab-link.active {
  color: #000;
}

.gc-tab-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #000;
}

.gc-tab-content {
  display: none;
  animation: fadeIn 0.5s;
  line-height: 1.8;
  color: #444;
}

.gc-tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.gc-navigation-wrapper {
  margin-top: 60px;
  padding-bottom: 40px;
}

.gc-nav-divider {
  border: 0;
  border-top: 1px solid #eee;
  margin-bottom: 30px;
}

.gc-post-navigation {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.gc-nav-link {
  flex: 1;
}

.gc-nav-link a {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  padding: 15px;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.gc-prev a {
  align-items: flex-start;
}

.gc-next a {
  align-items: flex-end;
  text-align: right;
}

.gc-nav-link a:hover {
  background-color: #f9f9f9;
  border-color: #e0e0e0;
  transform: translateY(-2px);
}

.gc-nav-label {
  font-size: 0.8em;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.gc-nav-title {
  font-size: 1em;
  font-weight: 600;
  color: #333;
}

/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .gc-catalog-layout {
    flex-direction: column;
  }

  .gc-filter-sidebar {
    width: 100%;
    top: 0;
    margin-bottom: 20px;
    flex: auto;
  }

  .gc-results-column {
    width: 100%;
    flex: auto;
  }

  .gc-top-bar {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
  }

  .gc-sort-wrap,
  .gc-sort-select,
  .gc-pagination-top {
    width: 100%;
    justify-content: center;
    text-align-last: center;
  }

  .gc-top-section,
  .gc-action-box {
    flex-direction: column;
    align-items: stretch;
  }

  .gc-whatsapp-btn {
    justify-content: center;
  }

  .gc-single-container {
    margin: 0 10px;
  }
}

/* ==========================================================================
   6. ESTILOS DE LA PLANTILLA INDIVIDUAL (SINGLE CANVAS)
   ========================================================================== */

.gc-single-canvas {
  /* Mismas reglas que el catálogo */
  width: 100%;
  max-width: 1300px;
  /* El ancho amplio que querías */
  margin: 0 auto;
  /* Centrado perfecto */
  padding: 20px 15px;
  box-sizing: border-box;

  /* Seguridad para el menú */
  display: block;
  min-height: 60vh;
  /* Evita que el footer suba si hay poco contenido */
  background: #fff;
  /* O el color de fondo de tu web si es distinto */
}

/* Ajuste Responsive para móviles */
@media (max-width: 768px) {
  .gc-single-canvas {
    padding: 20px 10px;
    width: 100%;
  }
}


/* ... [MANTÉN TODO TU CSS DE DISEÑO DE TARJETAS, BOTONES, ETC.] ... */


/* ==========================================================================
   BLINDAJE DE COMPATIBILIDAD (UNIVERSAL)
   ========================================================================== */

/* 1. Definir nuestro lienzo para que ocupe lo que pediste (1300px) */
.gc-single-canvas {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  background: #fff;
  padding: 20px 0;
  /* Espacio vertical limpio */
}

/* 2. Reglas CSS estándar para ocultar elementos del tema (Funciona en el 90% de temas) */
body.single-catalogo_item .entry-title:not(.gc-title),
body.single-catalogo_item .post-title:not(.gc-title),
body.single-catalogo_item h1:not(.gc-title),
body.single-catalogo_item .post-thumbnail,
body.single-catalogo_item .wp-block-post-featured-image,
body.single-catalogo_item .entry-meta,
body.single-catalogo_item .post-meta,
body.single-catalogo_item .byline {
  display: none !important;
}

/* 3. Forzar a los contenedores modernos (Gutenberg) a dejarnos espacio */
body.single-catalogo_item .entry-content>.wp-block-group,
body.single-catalogo_item .is-layout-constrained>.alignwide {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 4. Resetear márgenes superiores del tema */
body.single-catalogo_item .site-content,
body.single-catalogo_item .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ==========================================================================
   CORRECCIÓN PARA TEMA TWENTY TWENTY-FIVE (OCULTAR ELEMENTOS DEL TEMA)
   ========================================================================== */

/* 1. Oculta el Título gigante que pone el tema */
body.single-catalogo_item h1.wp-block-post-title {
  display: none !important;
}

/* 2. Oculta la Imagen Destacada que pone el tema (ya que tu plugin pone la suya) */
body.single-catalogo_item figure.wp-block-post-featured-image {
  display: none !important;
}

/* 3. Oculta la sección de meta-datos ("Written by", "in", Fecha) */
/* La Imagen 1 muestra que estos datos están en un div justo después de la imagen */
body.single-catalogo_item figure.wp-block-post-featured-image+div {
  display: none !important;
}

/* 4. REFUERZO: Si la imagen destacada no existiera, ocultamos el div después del título */
body.single-catalogo_item h1.wp-block-post-title+div {
  display: none !important;
}

/* 5. Ajuste de espaciado para que tu catálogo suba un poco */
body.single-catalogo_item main.wp-block-group {
  margin-top: 0 !important;
  padding-top: 20px !important;
}

/* ==========================================================================
   LIMPIEZA DE ESPACIOS EN BLANCO (ELIMINAR CONTENEDORES)
   ========================================================================== */

/* 1. Ocultar la CAJA que contiene la navegación */
/* La clave es el símbolo '>'. Dice: "Oculta el grupo SOLO si la navegación es su hijo directo" */
body.single-catalogo_item .wp-block-group:has(> nav[aria-label="Post navigation"]) {
  display: none !important;
}

/* 2. Ocultar la CAJA que contiene "More Posts" y "Hello World" */
/* Dice: "Oculta el grupo SOLO si la lista de posts es su hijo directo" */
body.single-catalogo_item .wp-block-group:has(> .wp-block-query) {
  display: none !important;
}

/* 3. REDUCIR EL ESPACIO AL FINAL DE TU PRODUCTO */
/* Tu ficha de producto tiene un relleno (padding) grande abajo por defecto. Aquí lo reducimos. */
/* Buscamos el grupo que contiene tu descripción (.entry-content) y le quitamos aire abajo */
body.single-catalogo_item .wp-block-group:has(.entry-content) {
  padding-bottom: 20px !important;
  /* Ajusta este número si quieres más o menos espacio */
  margin-bottom: 0 !important;
}

/* 4. Asegurar que el contenedor principal de la página no empuje hacia abajo */
body.single-catalogo_item main {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   CORRECCIÓN PARA ASTRA (Ocultar navegación Anterior/Siguiente)
   ========================================================================== */

/* Apuntamos a la clase exacta que se ve en tu captura de pantalla */
body.single-catalogo_item .navigation.post-navigation {
  display: none !important;
}

/* REFUERZO: Por si Astra usa su clase nativa en otra versión */
body.single-catalogo_item .ast-post-navigation {
  display: none !important;
}


/* ==========================================================================
   CORRECCIÓN FINAL PARA TWENTY TWENTY-FOUR
   ========================================================================== */

/* 1. Ocultar los enlaces específicos de "Anterior / Siguiente" */
/* Apuntamos a las clases exactas que aparecen en tu inspector */
body.single-catalogo_item .post-navigation-link-previous,
body.single-catalogo_item .post-navigation-link-next,
body.single-catalogo_item .wp-block-post-navigation-link {
  display: none !important;
}

/* 2. Ocultar el contenedor de navegación completo */
/* Esto asegura que se vaya también el espacio que ocupa */
body.single-catalogo_item nav[aria-label="Post navigation"] {
  display: none !important;
}

/* 3. Ocultar la línea separadora y el espaciador vertical */
/* El tema pone una línea (<hr>) y un espacio antes de la navegación. Los borramos. */
body.single-catalogo_item hr.wp-block-separator,
body.single-catalogo_item .wp-block-spacer {
  display: none !important;
}

/* 4. REFUERZO: Limpiar el contenedor padre si queda vacío */
body.single-catalogo_item .wp-block-group:has(> nav[aria-label="Post navigation"]) {
  display: none !important;
}

/* ==========================================================================
   CORRECCIÓN PARA TEMA NEVE
   ========================================================================== */

/* 1. Ocultar el encabezado completo (Título, "by admin", Fecha) */
/* En tu captura se ve que todo está dentro de la clase .entry-header */
body.single-catalogo_item .entry-header {
  display: none !important;
}

/* 2. Ocultar la imagen destacada automática (si apareciera) */
body.single-catalogo_item .nv-post-thumbnail-wrap {
  display: none !important;
}

/* 3. Ocultar la navegación al final (Anterior / Siguiente) */
/* Neve suele poner esto abajo, lo ocultamos preventivamente */
body.single-catalogo_item .nv-post-navigation,
body.single-catalogo_item .nav-links {
  display: none !important;
}

/* 4. Ajuste de espaciado para que no quede pegado al menú */
body.single-catalogo_item .nv-single-post-wrap {
  padding-top: 20px !important;
}

/* ==========================================================================
   CORRECCIÓN PARA TEMA OCEANWP
   ========================================================================== */

/* 1. Ocultar la Imagen Destacada duplicada */
/* En tu captura se ve que OceanWP usa la clase '.thumbnail' para esto */
body.single-catalogo_item .thumbnail {
  display: none !important;
}

/* 2. Forzar el ancho al 100% (Solucionar el problema de espacio) */
/* OceanWP limita el ancho al 72% cuando hay sidebar. Aquí lo forzamos al 100%. */
body.single-catalogo_item #primary.content-area {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. Ocultar la Barra Lateral (Sidebar) */
/* Si no la ocultamos, se caería debajo del contenido al poner el ancho al 100% */
body.single-catalogo_item #right-sidebar,
body.single-catalogo_item #left-sidebar,
body.single-catalogo_item #sidebar {
  display: none !important;
}

/* 4. Ocultar el Título y Meta del tema (Preventivo) */
/* Por si acaso OceanWP muestra también el título "Asiento 11" encima de tu ficha */
body.single-catalogo_item header.entry-header {
  display: none !important;
}

/* ==========================================================================
   CORRECCIÓN OCEANWP: LISTADO DE CATÁLOGO (ANCHO COMPLETO)
   ========================================================================== */

/* 1. Forzar el contenedor principal al 100% de ancho */
/* Detectamos si el cuerpo de la web contiene la clase .gc-catalog-layout (tu shortcode) */
body:has(.gc-catalog-layout) #primary.content-area {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Ocultar cualquier barra lateral (Sidebar) que esté estorbando */
body:has(.gc-catalog-layout) #right-sidebar,
body:has(.gc-catalog-layout) #left-sidebar,
body:has(.gc-catalog-layout) .widget-area {
  display: none !important;
}

/* 3. Asegurar que tu layout interno se centre y respire bien */
body:has(.gc-catalog-layout) .gc-catalog-layout {
  width: 100%;
  max-width: 1300px;
  /* Tu ancho máximo preferido */
  margin: 0 auto;
}