/* =========================================================================
   «Otras opciones» — relacionados por compras reales

   La tarjeta imita a la del tema: marca, título, precio, entrega estimada y
   botón. El PRECIO no se estila aquí a propósito —se emite con la clase
   .price de WooCommerce— para que se vea igual que en el resto de la tienda.
   Si se le diera color aquí, habría dos precios distintos en la misma página.
   ========================================================================= */

.gcc-rel {
  --gcc-rel-borde: #e6e2ec;
  --gcc-rel-texto: #2d2a32;
  --gcc-rel-flojo: #8b8595;
  --gcc-rel-morado: #6a3f99;
  --gcc-rel-morado-osc: #55307c;

  margin: 32px 0;
}

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

.gcc-rel__titulo {
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.3;
  color: var(--gcc-rel-texto);
}

/*
 * Las columnas se fijan, no se dejan a auto-fit.
 *
 * Con auto-fit el navegador metía las que cupieran, y con 6 productos salían
 * 4 arriba y 2 abajo dejando dos huecos. El número de columnas lo decide el
 * PHP en --gcc-rel-cols, escogiendo el que divide bien la cantidad que se
 * vaya a pintar: con 6 pone 3 y quedan dos filas de tres.
 *
 * De ahí para abajo se va reduciendo por tamaño de pantalla.
 */
.gcc-rel__lista {
  display: grid;
  grid-template-columns: repeat( var( --gcc-rel-cols, 4 ), minmax( 0, 1fr ) );
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1100px) {
  .gcc-rel__lista { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
}

@media (max-width: 820px) {
  .gcc-rel__lista { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media (max-width: 520px) {
  .gcc-rel__lista { grid-template-columns: 1fr; }
}

.gcc-rel__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--gcc-rel-borde);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.gcc-rel__item:hover {
  border-color: var(--gcc-rel-morado);
  box-shadow: 0 4px 14px rgba(45, 42, 50, .1);
}

.gcc-rel a { text-decoration: none; }

.gcc-rel a:focus-visible {
  outline: 2px solid var(--gcc-rel-morado);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Relación fija para que las tarjetas no bailen mientras cargan las fotos:
   sin esto la rejilla se recoloca a mitad de carga y el cliente pulsa donde
   ya no está lo que quería. */
.gcc-rel__foto {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: #f7f5fa;
  margin-bottom: 4px;
}

.gcc-rel__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gcc-rel__marca {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gcc-rel-flojo);
  line-height: 1.2;
}

.gcc-rel__nombre {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--gcc-rel-texto);
  /* Los nombres del catálogo son largos y desiguales; a tres líneas las
     tarjetas quedan parejas sin cortar de más. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gcc-rel__nombre:hover { color: var(--gcc-rel-morado); }

/* Solo posición: el aspecto lo pone el CSS de la tienda. */
.gcc-rel__item .price {
  margin: 2px 0 0;
  padding: 0;
}

/* La entrega estimada trae su propio estilo del módulo; aquí solo se le da
   sitio. */
.gcc-rel__item .gcc-entrega {
  margin: 4px 0 0;
  font-size: 13px;
}

/*
 * El botón, SIEMPRE abajo del todo.
 *
 * El margin-top:auto es lo que lo empuja al fondo aunque la tarjeta tenga
 * menos contenido —por ejemplo, un producto sin marca—. La versión anterior
 * lo estropeaba con una regla posterior que le ponía un margen fijo de 10 px
 * para separarlo de la entrega: ese valor ganaba al auto y el botón se subía.
 * La separación se consigue con el padding, sin tocar el margen.
 */
.gcc-rel__boton {
  display: block;
  margin-top: auto;
  padding: 11px 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff !important;   /* el CSS del tema pinta los enlaces en gris */
  background: var(--gcc-rel-morado);
  border-radius: 8px;
  transition: background-color .15s ease;
}

/* El aire sobre el botón va aquí, en el elemento de encima, para no volver a
   pisar el margin-top:auto. */
.gcc-rel__item .price,
.gcc-rel__item .gcc-entrega { margin-bottom: 4px; }

.gcc-rel__boton:hover { background: var(--gcc-rel-morado-osc); }

@media (prefers-reduced-motion: reduce) {
  .gcc-rel__item,
  .gcc-rel__boton { transition: none; }
}