.item a{
	position:relative;
	height:auto;
	display:block;
}

/* -------------------------------- */
/* ---- CONTENIDOR PRINCIPAL ------ */
/* -------------------------------- */

.contenidor-producte {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* -------------------------------- */
/* ------ GALERIA PRINCIPAL ------- */
/* -------------------------------- */

.imagenes {
    flex: 1 1 400px;
    min-width: 300px;
}

.swiper-principal {
	width: 100% !important;
    aspect-ratio: 1 / 1;
    border: 1px solid #eee;
    border-radius: 8px;
    position: relative;
    overflow: hidden; /* mostra una sola imatge */
}

.swiper-principal, .swiper-principal * { /* evita color blau de selecció */
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.swiper-principal .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-zoom-container {
    touch-action: pan-y; /*none; /* Prevé el desplaçament del navegador durant el zoom/pan */
    cursor: zoom-in;
}

.swiper-slide-zoomed .swiper-zoom-container {
    cursor: grab; /* Muestra la mano abierta para indicar que se puede arrastrar */
}

.swiper-slide-zoomed .swiper-zoom-container:active {
    cursor: grabbing; /* Muestra la mano cerrada mientras se arrastra */
}


/* --------------------------------------------------------- */
/* --- ESTILOS PARA LOS BOTONES DE NAVEGACIÓN (CÍRCULOS) --- */
/* --------------------------------------------------------- */
.swiper-button-next,
.swiper-button-prev {
	  width: 30px;
	  height: 30px;
	  background-color: rgba(0,0,0,0.25); /* color de fondo inicial (gris semitransparente) */
	  border-radius: 50%; /* Para que sea un círculo */
	  box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
	  cursor: pointer;
	  z-index: 10; /* Asegura que estén por encima de las imágenes */
	  
	  display: flex; /* Habilita Flexbox */
	  justify-content: center; /* Centra horizontalmente el icono */
	  align-items: center; /* Centra verticalmente el icono */
	  
	  /* Posicionamiento y transformaciones ya gestionadas por Swiper, pero las dejamos explícitas */
	  position: absolute;
	  margin-top: 0 !important;
	  top: 50% !important;
	  transform: translateY(-50%);
	  opacity: 1;
	  
	  transition: background-color 0.3s ease; /* Transición para el efecto hover del fondo */
	  
	  color: white; /* Color del icono de la flecha */
	  font-weight: bold; /* Hacer la flecha un poco más gruesa si es necesario */
	  transition: background-color 0.3s ease, transform 0.1s ease; /* Transición también para la animación de la flecha */
}
.swiper-principal .swiper-button-prev {left: 15px;}

.swiper-principal .swiper-button-next {right: 15px;}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: rgba(0,0,0,0.5); /* Color de fondo más oscuro al pasar el ratón */
}

.swiper-button-next svg,
.swiper-button-prev svg {
    height: 60% !important;
    width: auto !important;     /* evita que se deforme */
    max-height: 60% !important; /* fija límite en iPhone */
    max-width: 60% !important;  /* evita que el SVG se expanda dentro del círculo */
    flex-shrink: 0;             /* evita que el flexbox lo estire */
}

/* ---------------------------------------------------------------------- */
/* --- ANIMACIÓN AL PULSAR (La flecha se desplaza dentro del círculo) --- */
/* ---------------------------------------------------------------------- */
.swiper-button-next:active {
  transform: translateY(-50%) translateX(5px); /* Mueve el botón ligeramente a la derecha */
}
.swiper-button-prev:active {
  transform: translateY(-50%) translateX(-5px); /* Mueve el botón ligeramente a la izquierda */
}

/* -------------------------------- */
/* ---------- MINIATURES ---------- */
/* -------------------------------- */

.swiper-miniatures {
	padding:0;
    margin-top: 10px;
    box-sizing: border-box;
}

.swiper-miniatures .swiper-slide {
    opacity: 0.5;
    cursor: pointer;
	transition: opacity 0.2s ease;
    height: 80px !important;   /* tamaño miniatura */
    width: 80px !important;
}

.swiper-miniatures .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid #0a7c3a;
	border-radius: 6px;
    box-sizing: border-box;
}

.swiper-miniatures .swiper-slide img {
	display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
	pointer-events: none;
}

/* Evitar que les miniatures es puguin seleccionar (evita el blau) */
.swiper-miniatures, .swiper-miniatures * {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* -------------------------------- */
/* ---------- INFORMACIÓ ---------- */
/* -------------------------------- */

.info-producte {
    flex: 1 1 400px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.info-producte h1 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.preu {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.boto {
    background-color: black;
    color: white;
    padding: 0.8rem 1.5rem;
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.boto:hover {
    background-color: #333;
}

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

ul li {
    margin: 0.4rem 0;
}


/* -------------------------------- */
/* ---------- RESPONSIVE ---------- */
/* -------------------------------- */

@media (max-width: 768px) {
    .contenidor-producte {
        flex-direction: column;
        padding: 1rem;
    }
    .swiper-principal {
		width: 100%;
        aspect-ratio: auto; /* elimina aspect ratio */
        height: 300px; /* altura mòbil */
    }
	.imagenes {
    	width: 100%;
    	flex: none;
    	min-width: 0;
  	}
    .swiper-principal .swiper-slide img {
         object-position: bottom; /* La imagen se alinea por abajo */
    }

	.imagenes, .info-producte {
        flex: 1 1 100%; /* ocupa tota l'amplada disponible */
        min-width: 0;    /* elimina limitació mínima */
    }
}

@media (max-width: 480px) {
	.swiper-principal {
        height: 300px; /* ajusta segons la imatge */
        aspect-ratio: auto;
    }
    .swiper-principal .swiper-slide img {
         object-position: bottom;  /* La imagen se alinea por abajo */
    }
	
}