@charset "UTF-8";
/* ============================================================================
   EDICLÁS · DISEÑO PERSONALIZADO DE ECWID
   BORDES Y RELIEVE PARA LAS IMÁGENES DE LOS LIBROS
   ============================================================================

   Versión: 1.0 · 11/10/2026
   Tema de Ecwid: EDICLÁS - BORDES PORTADAS

   QUÉ HACE ESTE ARCHIVO
   ---------------------
   1. CATÁLOGO: borde gris de 1 píxel y relieve suave en las tarjetas de libros.
   2. MINIATURAS: contorno interior gris en las imágenes pequeñas de las fichas.
   3. FICHAS: borde gris y relieve algo más marcado en la imagen grande.

   CÓMO SE UTILIZA
   ----------------
   Ecwid > Diseño > Editar tema > EDICLÁS - BORDES PORTADAS.
   Se puede sustituir todo el CSS anterior por este contenido y pulsar Guardar.
   El tema debe permanecer activo.

   PARA MODIFICARLO MÁS ADELANTE
   -----------------------------
   - Color gris del borde: buscar #9A9A9A (aparece en los tres apartados).
   - Grosor del borde: buscar "1px solid" o "inset 0 0 0 1px".
   - Intensidad del relieve: ajustar las opacidades rgba(..., 0.xx).
   - Para deshacer cambios: conservar una copia de este archivo y restaurarla.

   PRECAUCIONES
   ------------
   - El CSS NO modifica los ficheros originales de las portadas.
   - El borde del catálogo sigue el espacio de imagen reservado por Ecwid;
     en productos de otras proporciones puede incluir espacio en blanco.
   - El estilo se aplica a todos los productos, incluida la tarjeta regalo.
   - Los bordes que se añadieron antes con Polarr siguen dentro de esas fotos.
   - La línea negra de la miniatura seleccionada pertenece a Ecwid.
   - La ampliación al pasar el ratón es una opción de Ecwid y no se modifica aquí.

   ============================================================================ */
/* ============================================================================
   1 · CATÁLOGO Y PRODUCTOS DESTACADOS
   ============================================================================
   Sombra exterior: separa visualmente cada libro del fondo de la página.
   Se conserva el borde gris y se añade un bisel interior muy suave.
   ============================================================================ */
/* Sombra exterior de la tarjeta de imagen. */
.ec-size .ec-store .grid-product__image-wrap {
  box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.18);
}

/* Borde y luces/sombras interiores de la misma tarjeta. */
.ec-size .ec-store .grid-product__image-wrap::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border: 1px solid #9A9A9A;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.85), inset -2px -2px 3px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 5;
}

/* ============================================================================
   2 · MINIATURAS DE LAS FICHAS INDIVIDUALES
   ============================================================================
   Contorno gris fino en la portada y contraportada pequeñas.
   No se modifica el indicador negro de la miniatura seleccionada.
   ============================================================================ */
.ec-size .ec-store .details-gallery__thumb .details-gallery__thumb-img {
  box-shadow: inset 0 0 0 1px #9A9A9A !important;
}

/* ============================================================================
   3 · IMAGEN GRANDE DE CADA FICHA DE PRODUCTO
   ============================================================================
   Sombra exterior del contenedor y borde con relieve reforzado.
   El relieve final incluye el ajuste que probamos después de la primera sombra.
   ============================================================================ */
/* Sombra exterior. */
.ec-size .ec-store .details-gallery__image-wrapper-inner {
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.14);
}

/* Borde gris, iluminación interior y relieve reforzado. */
.ec-size .ec-store .details-gallery__image-wrapper-inner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #9A9A9A;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.9), inset -3px -3px 6px rgba(0, 0, 0, 0.16), 3px 4px 9px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 10;
}

/* ===================== FIN DEL TEMA CSS EDICLÁS ============================ */