/* Natiivin WooCommerce-lohkopohjaisen tuotekortin tyylit — käytössä kauppa-,
   brändi- ja hakutulosarkistoilla (product-collection-lohko). Osta-painike
   perii jo teeman globaalin tyylin automaattisesti (.wp-element-button).

   Järjestys ylhäältä alas: kuva (neliö, padding) → tuotemerkki → nimi →
   lyhyt kuvaus → hinta ja Osta-painike samalla rivillä. */

/* Sarakemäärä: 2 mobiilissa, 3 tabletissa, 4 desktopissa — samat rajat kuin
   muualla teemassa (689px/999px). Käytössä kauppa-/brändi-/hakuarkistolla
   (columns-3) ja tuotesivun "muut brändituotteet" -ruudukolla (columns-4).
   Lohkon oma "shrinkColumns"-JS on kytketty pois templateissa, jotta pysytään
   täysin tämän staattisen CSS:n varassa. Lohkon oma leveyssääntö
   (.columns-N>li) pitää ohittaa samalla spesifisyydellä (kaksinkertainen
   .is-flex-container-luokka on WooCommercen oma temppu, ja [class*="columns-"]
   nostaa spesifisyyden samalle tasolle riippumatta sarakemäärästä), jotta ei
   tarvita !important-sääntöjä. */
.wc-block-product-template.is-flex-container.is-flex-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.wc-block-product-template.is-flex-container.is-flex-container[class*="columns-"] > li {
	width: auto;
}

@media (min-width: 690px) {
	.wc-block-product-template.is-flex-container.is-flex-container {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1000px) {
	.wc-block-product-template.is-flex-container.is-flex-container {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* li:llä on aina WooCommercen oma "product"-luokka natiivissa kortissakin,
   joten li.wc-block-product tarvitaan tässä täsmällisyydessä (element+luokka)
   ohittamaan product-card.css:n (klassinen kortti) li.product-reunussääntö,
   joka muuten vuotaisi tänne saman "product"-luokan kautta. */
/* Kevyt korttivarjostus erottaa tuotekortit toisistaan ilman näkyvää
   reunaviivaa — tausta pitää olla vaalea (base), koska varjo ei muuten näy
   sivun omaa taustaväriä vasten. Hover nostaa varjoa hieman, jotta kortti
   tuntuu interaktiiviselta. */
/* margin-block-start:0 nollaa WordPressin automaattisen blockGap-säännön
   (:root :where(.is-layout-flow) > * { margin-block-start: 1.5rem }), joka
   lisäisi 24px marginaalin jokaisen kortin yläpuolelle PAITSI ensimmäisen
   (WP:n oma :first-child-poikkeus) — ilman tätä ensimmäinen kortti näyttäisi
   muita korkeammalta/ylemmäs alkavalta, koska muut korttit saisivat
   ylimääräisen marginaalin. Välit hoidetaan jo erikseen gap-ominaisuudella. */
li.wc-block-product {
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: left;
	border: none;
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.15s ease;
	margin-block-start: 0;
}

li.wc-block-product:hover {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
}

.wc-block-product .wp-block-woocommerce-product-image {
	padding: 14px;
}

/* Alennusbadge: punainen, prosenttiteksti (ks. cosmetsky-woo-core/includes/
   sale-badge-percent.php), vasemmassa yläkulmassa kuvan päällä. Blocksyn oma
   .onsale-badge (badges.scss) keskittää sisällön flexboxilla (display:
   inline-flex; align-items:center) sen sijaan että luottaisi padding+line-
   height-laskentaan — otetaan sama tekniikka käyttöön, koska kääre-divin
   peritty line-height loi "strutin" joka teki badgesta muita korkeamman
   riippumatta sisemmän tekstin omasta line-height-arvosta. */
.wc-block-product .wc-block-components-product-sale-badge {
	position: absolute;
	top: 15px;
	left: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #e00;
	border: none;
	padding: 5px 6px;
	border-radius: 3px;
}

.wc-block-product .wc-block-components-product-sale-badge__text {
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	/* Ilman tätä teksti perii teeman globaalin line-height:1.65:n, jolloin
	   badge näyttää korkeammalta kuin trending/uutuus-badget vaikka padding
	   on sama — nekin käyttävät tiukkaa line-height:1:tä. */
	line-height: 1;
}

/* Badge-lohko (Uutuus/Trendaa) on kuvan päällä oleva ylläke — sen kääre-div
   asetetaan itsekin position:absoluteksi (ei vain sisällä oleva span), jotta
   se ei koskaan voi vaikuttaa kortin muun sisällön pystyasetteluun riippumatta
   siitä onko tuotteella badge vai ei. */
.wc-block-product .wp-block-cosmetsky-product-badges {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

/* Arvostelut (tähdet + arvostelumäärä) piilotetaan kokonaan kortista —
   kääre pois näkyvistä yhdessä paikassa, jotta muutos periytyy kaikkialle
   missä tätä samaa korttimarkuppia käytetään (arkistot, karuselli, muut
   brändituotteet). */
.cosmetsky-card-rating-slot {
	display: none;
}

/* .wp-block-cosmetsky-product-brand-link on WordPressin blockGap-mekanismin
   (:where(.wc-block-product-template .wc-block-product)>:not(:last-child))
   kohteena — sille pitää nollata margin-bottom erikseen, koska aiemmin
   marginaali asetettiin vain sisemmälle .product-brand-divelle, ei tälle
   todelliselle lapsielementille jota sääntö koskee. */
.wc-block-product .wp-block-cosmetsky-product-brand-link {
	margin-bottom: 0;
}

/* Marginaali vain ulkokehykseen — jos se toistetaan myös a-elementille, syntyy
   tuplamarginaali (div + sen sisällä oleva linkki), jolloin merkki näyttää
   irtoavan reunasta. */
.wc-block-product .wp-block-cosmetsky-product-brand-link .product-brand {
	margin: 0 14px 2px;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wc-block-product .wp-block-cosmetsky-product-brand-link .product-brand a {
	color: var(--wp--preset--color--contrast);
	opacity: 0.8;
	text-decoration: none;
}

/* min-height varaa aina 2 rivin tilan riippumatta siitä täyttääkö
   todellinen teksti sitä — muuten lyhyempi (1-rivinen) tuotenimi/kuvaus
   jättäisi tyhjää tilaa, jonka footerin margin-top:auto imee itseensä,
   jolloin kuvauksen ja hinnan väli vaihtelisi kortista toiseen. */
.wc-block-product .wp-block-post-title {
	margin: 0 14px 4px;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wc-block-product .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Klassisessa kortissa (product-card.css) koko kortti on yhden linkin
   (.woocommerce-loop-product__link) sisällä ja sille on asetettu color:
   contrast kerralla koko kortille. Natiivissa koostumuksessa ei ole
   vastaavaa yhtä kääre-linkkiä, joten kuvaus ja hinta perisivät ilman tätä
   selaimen/teeman linkkivärin (--wp--preset--color--link) — sama syy miksi
   yllä oleva otsikkolinkki ja product-brand-link tarvitsevat oman
   color-määrityksensä. */
.wc-block-product .wp-block-post-excerpt {
	margin: 0 14px 10px;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast);
	opacity: 0.8;
	line-height: 1.4;
	min-height: 2.8em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cosmetsky-card-footer {
	margin: auto 14px 14px;
	align-items: center;
}

.cosmetsky-card-footer .wp-block-woocommerce-product-price {
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

/* Normaalihinta piilotetaan kokonaan kortista kun tuotteella on alennushinta
   — vain alennushinta näkyy (ks. .ins alla), normaalihinnan tilalla, ei
   yliviivattuna sen vieressä. */
.cosmetsky-card-footer .wp-block-woocommerce-product-price del {
	display: none;
}

.cosmetsky-card-footer .wp-block-woocommerce-product-price ins {
	text-decoration: none;
	color: #e00;
}

.cosmetsky-card-footer .wp-block-woocommerce-product-button {
	margin: 0;
}