/* patterns/image-carousel-overlay.php — täysleveä kuva ja sen alareunan päälle
   limittyvä tuotekaruselli. Karusellin juurielementti on .my-product-carousel
   (cosmetsky-blocks-pluginin cosmetsky/product-carousel-lohko ei kutsu
   get_block_wrapper_attributes():a, joten sillä ei ole wp-block-*-kääreluokkaa
   käytettävissä). Tuotekortit (li.wc-block-product, product-card-native.css)
   saavat jo valkoisen taustan ja varjon, joten ne erottuvat kuvan päällä
   ilman lisämuutoksia. */
.image-carousel-overlay {
	overflow: visible;
}

.image-carousel-overlay .my-product-carousel {
	position: relative;
	z-index: 10;
	margin-top: -70px;
}

@media (max-width: 600px) {
	.image-carousel-overlay .my-product-carousel {
		margin-top: -40px;
	}

	/* Cover-lohkon min-height tulee inline style="min-height:440px" -attribuuttina
	   (patterns/image-carousel-overlay.php), joten tarvitaan !important sen
	   ylikirjoittamiseen mobiilissa. */
	.image-carousel-overlay .wp-block-cover {
		min-height: 260px !important;
	}
}

/* Karuselli on tässä mallissa kapeampi (keskitetty sisältöleveys kuvan päällä,
   ei align:wide/full), jolloin carousel.css:n prosenttipohjainen korttileveys
   (calc(100% / 2.6…6.2)) kutistaa kortit niin kapeiksi ettei hinta+Osta-painike
   mahdu enää samalle riville. Korvataan tässä yhteydessä kiinteällä leveydellä,
   jotta kortti pysyy normaalin kokoisena riippumatta karusellin säiliöstä —
   itse karusellin leveyttä ei muuteta, vieritettäviä kortteja näkyy vain
   vähemmän kerralla. Spesifisyys (3 luokkaa) voittaa carousel.css:n
   vastaavat säännöt riippumatta breakpointista. */
.image-carousel-overlay .my-product-carousel li.wc-block-product {
	flex: 0 0 180px;
}

@media (min-width: 480px) {
	.image-carousel-overlay .my-product-carousel li.wc-block-product {
		flex-basis: 180px;
	}
}

@media (min-width: 1024px) {
	.image-carousel-overlay .my-product-carousel li.wc-block-product {
		flex-basis: 235px;
	}
}