/* ============================================================
   MVCKO — widget strony sklepu (.mvsh)
   Poprawki nakładane na widget HTML z Elementora.
   assets/mvsh-shop.css
   ============================================================ */

/* ============================================================
   MOBILE: KOLEKCJE JAKO KARUZELA
   Karta zajmuje 60% szerokości, więc następna wystaje
   dokładnie 40% z prawej strony — podgląd zachęca do przesunięcia.
   ============================================================ */
@media (max-width:600px){

	.mvsh .mvsh__collections{
		display:flex !important;
		grid-template-columns:none !important;
		gap:14px;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		-ms-overflow-style:none;

		/* full-bleed: karuzela dochodzi do krawędzi ekranu */
		margin-left:-16px;
		margin-right:-16px;
		padding:0 16px 6px;
	}
	.mvsh .mvsh__collections::-webkit-scrollbar{display:none}

	.mvsh .mvsh__col{
		flex:0 0 60%;            /* 60% karty → 40% podglądu następnej */
		max-width:60%;
		scroll-snap-align:start;
		aspect-ratio:4/5;        /* pionowy kadr czyta się lepiej na telefonie */
	}

	/* karta nie podnosi się przy dotyku — na mobile to tylko drga */
	.mvsh .mvsh__col:hover{transform:none}
	.mvsh .mvsh__col:hover img{transform:none}

	/* opis kolekcji ciaśniej, żeby zmieścił się w węższej karcie */
	.mvsh .mvsh__col-body{padding:16px}
	.mvsh .mvsh__col-name{font-size:16px}
	.mvsh .mvsh__col-meta{font-size:11px}
}

@media (max-width:400px){
	.mvsh .mvsh__col{flex:0 0 66%;max-width:66%}
}

@media (prefers-reduced-motion:reduce){
	.mvsh .mvsh__collections{scroll-behavior:auto}
}