/* Tuotesivun tyylit — jäljittelevät osittain tuotearkiston korttia
   (brändi, tähtien väri, hinta) yhtenäisen ilmeen vuoksi. */

/* "Tuote lisätty ostoskoriin" -onnistumisilmoitus piilotetaan, koska
   Osta-painike näyttää jo oman check-ikoninsa (ks. add-to-cart.css/js) —
   virheilmoitukset (esim. loppuunmyyty) jäävät näkyviin, koska ne eivät
   käytä .is-success-luokkaa. */
.wc-block-components-notice-banner.is-success {
	display: none;
}

/* "Varastossa"-ilmoitus poistettu aiemmin tarkoituksella klassiselta
   tuotesivulta — woocommerce/add-to-cart-with-options-lohko (joka korvasi
   klassisen lomakkeen AJAX-tuen vuoksi) tuo saman ilmoituksen takaisin oman
   product-stock-indicator-alalohkonsa kautta. Piilotetaan vain "varastossa"-
   variantti, jotta mahdollinen "loppuunmyyty"/"jälkitoimituksena" -varoitus
   jää edelleen näkyviin. */
.wp-block-woocommerce-product-stock-indicator.wc-block-components-product-stock-indicator--in-stock {
	display: none;
}

.wp-block-cosmetsky-product-brand-link .product-brand {
	margin-bottom: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

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

.wp-block-post-title {
	margin: 0 0 4px;
	font-size: 1.5rem;
}

.wp-block-woocommerce-product-rating {
	display: flex;
	align-items: center;
	color: #f2b600;
	margin-block-start: 0;
	margin-block-end: 10px;
}

/* Piilotetaan natiivin lohkon oma "(23 arvostelua)" -linkki, jotta kaikkialla
   sivustolla näkyy sama lyhyt "(23)"-muoto (lisätty render_block-suodattimella
   inc/blocks.php:ssä). */
.wc-block-components-product-rating__reviews_count {
	display: none;
}

.cosmetsky-review-count {
	margin-left: 4px;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast);
	opacity: 0.7;
}

.wp-block-woocommerce-product-price {
	font-weight: 700;
	margin-bottom: 14px;
}

.wp-block-woocommerce-product-price .rrp-price {
	display: block;
	font-weight: 400;
	font-size: 0.8rem;
	opacity: 0.8;
	margin-bottom: 2px;
}

.wp-block-woocommerce-product-price del {
	font-weight: 400;
	opacity: 0.55;
	font-size: 0.7em;
}

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

/* "Varastossa"-teksti piilotetaan — tuote on joko ostettavissa (napin näkyminen
   riittää) tai loppuunmyyty, jolloin "Ei varastossa" -tyyppinen viesti (eri
   luokka) jää yhä näkyviin. */
p.stock.in-stock {
	display: none;
}

.wp-block-post-excerpt {
	opacity: 0.75;
	line-height: 1.6;
	margin-block-start: 0;
	margin-block-end: 18px;
}

/* Sisällä oleva <p> perii selaimen oletusmarginaalin (~1em ylä/ala), joka
   jättäisi tyhjää tilaa vaikka ulkokehys on nollattu. */
.wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Alennusbadge tuotesivun galleriassa. WooCommercen täysi klassinen
   woocommerce.css (ei vain kevyt lohkoteemaversio) latautuu myös tällä
   sivulla ja sisältää oman pyöreän, oliivinvärisen .onsale-säännön samalla
   spesifisyydellä kuin product-card.css:n oma sääntö — kumpi voittaa riippuu
   latausjärjestyksestä. .onsale on .wp-block-woocommerce-product-image-gallery
   -elementin sisällä (ei .woocommerce-product-gallery, joka on sen sisarus),
   joten esivalinnan pitää olla tämä jotta sääntö edes osuu kohteeseen.

   WooCommercella on lisäksi oma ".woocommerce .wp-block-woocommerce-product-
   image-gallery span.onsale { left: -1rem }" -sääntönsä, jonka spesifisyys
   (3 luokkaa + elementtivalitsin) voitti aiemman .onsale.onsale-versiomme
   (3 luokkaa, ei elementtivalitsinta) tasapelin elementtivalitsimella —
   nostetaan luokkamäärä neljään, jolloin voitto on taattu riippumatta
   latausjärjestyksestä eikä tarvitse turvautua !important-sääntöön. */
.wp-block-woocommerce-product-image-gallery .onsale,
.wp-block-woocommerce-product-image-gallery .onsale.onsale.onsale {
	position: absolute;
	top: 20px;
	left: 20px;
	right: auto;
	border: none;
	min-height: 0;
	min-width: 0;
	margin: 0;
	border-radius: 3px;
	background: #e00;
	color: #fff;
	padding: 5px 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-align: left;
}

/* Uutuus/Trendaa-merkit (cosmetsky/product-badges) ovat galleria-sarakkeen
   sisarus, ei sen sisällä — ilman position:relative-esivanhempaa globaali
   .custom-new-badge/.custom-trending-badge (product-card.css) karkaisi
   position:absolute-sijainnillaan aina dokumentin juureen asti (koko sivun
   oikeaan yläkulmaan), koska lähintä positioitua esivanhempaa ei löytynyt.
   Sama kääre+lapsi-malli kuin arkistokortissa: kääre asetetaan itse
   position:absoluteksi täyttämään sarakkeen yläreuna, jolloin se muodostaa
   uuden containing blockin lapsibadgeille eikä vaikuta pystyasetteluun. */
.wp-block-columns.alignwide > .wp-block-column:first-child {
	position: relative;
}

.wp-block-columns.alignwide > .wp-block-column:first-child .wp-block-cosmetsky-product-badges {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

/* WordPressin blockGap (:root :where(.is-layout-flow) > * { margin-block-
   start: 1.5rem }) lisää 24px marginaalin galleria-elementin yläpuolelle,
   koska se on sarakkeen toinen lapsi — riippumatta siitä että edeltävä
   badge-kääre on position:absolute eikä vie tilaa. Tämä siirsi gallerian (ja
   sen sisällä olevan .onsale-badgen, joka on suhteessa galleriaan) 24px
   alemmas kuin tarkoitettu, jolloin se osui lähes kiinni trendaa-badgeen.
   Nollataan, jotta galleria alkaa täsmälleen sarakkeen yläreunasta — samasta
   pisteestä josta badge-kääre laskee oman top-arvonsa. */
.wp-block-columns.alignwide > .wp-block-column:first-child > .wp-block-woocommerce-product-image-gallery {
	margin-block-start: 0;
}

/* Trendaa-badge kilpailee alennusbadgen kanssa samasta vasemmasta kulmasta.
   Blocksyn omassa toteutuksessa (badges.scss: .woocommerce-product-gallery
   { --badge-top:20px; --badge-left:20px }) tuotesivun galleriakontekstille on
   oma, arkistokorttia (top:45px/left:15px) suurempi offset — sama .onsale
   sai juuri tästä syystä ylle top/left:20px 15px:n sijaan. Portataan sama
   tänne, koska sitä ei ollut alunperin siirretty arkistokortin CSS:n mukana. */
.wp-block-columns.alignwide > .wp-block-column:first-child .custom-trending-badge {
	top: 50px;
	left: 20px;
}

.wp-block-columns.alignwide > .wp-block-column:first-child .custom-trending-badge--top {
	top: 20px;
}

/* YITH-lahjakortti-lisäosan ylimääräiset elementit lahjakorttituotteen
   sivulla — piilotettiin jo aiemmassa Blocksy Child -teemassa
   (assets/css/woocommerce.css), mutta sääntö ei siirtynyt mukaan kun tämä
   lohkoteema otettiin käyttöön. */
.ywgc-main-form-preview-container {
	display: none;
}

.ywgc_delivery_info_title {
	display: none;
}

.gift-card-content-editor {
	display: none;
}

.woocommerce-MyAccount-navigation-link--gift-cards {
	display: none;
}

/* Wishlist-nappi (tuotesivun "Lisää suosikkeihin") siirretään Osta-napin
   viereen samalle riville, ja WooCommercen oma tähti-ikoni + tekstilabel
   korvataan pelkällä sydän-ikonilla. Ydinlohko lisää napin aina lomakkeen
   VIIMEISEKSI lapseksi vasta renderöintihetkellä (AddToCartWithOptions.php:
   "The markup is injected at render time only, never persisted to the
   shipped template parts"), joten sitä ei voi siirtää Site Editorissa.
   Lomakkeen näkyvät lapset ovat käytännössä vain Osta-napin oma flex-ryhmä
   ja tämä nappi (varastoteksti on jo piilotettu ylempänä tässä
   tiedostossa), joten koko lomakkeen kääntäminen flexiksi riittää
   asettamaan ne vierekkäin ilman että DOM-järjestykseen tarvitsee koskea. */
form.wc-block-add-to-cart-with-options {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75em;
}

.wc-block-add-to-wishlist-button {
	/* align-self ratkaisee tasauksen - lomakkeen align-items ei riitä,
	   koska yksittäisen flex-kohteen oma align-self ohittaa sen aina. */
	align-self: flex-end;
	margin-top: 0;
}

/* Tekstilabel piilotetaan visuaalisesti mutta jätetään ruudunlukijoille -
   sama tekniikka kuin WordPressin omassa .screen-reader-text-luokassa
   (wp-includes/css/dist/block-library/style.css). display:none poistaisi
   napin AINOAN saavutettavuusnimen kokonaan, koska ikonit ovat pelkkää
   koristeellista SVG:tä ilman omaa aria-labelia. */
.wc-block-add-to-wishlist-button__label {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Ytimen SVG on tähti (ShopperListRenderer::get_star_empty_svg /
   get_star_filled_svg) - piilotetaan ja korvataan sydämellä CSS-maskilla,
   jotta väri saadaan asetettua background-colorilla eikä ytimen SVG:hen
   (fill="currentColor") tarvitse koskea. Sama valitsinsyvyys kuin ytimen
   omassa säännössä (add-to-wishlist-button-style.css), jotta voitto ei
   riipu pelkästä latausjärjestyksestä. */
.wc-block-add-to-wishlist-button .wc-block-add-to-wishlist-button__icon svg {
	display: none;
}

.wc-block-add-to-wishlist-button__icon {
	width: 32px;
	height: 32px;
}

.wc-block-add-to-wishlist-button__icon::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Ääriviivasydän (ei vielä suosikeissa) - sama muoto kuin täytetyssä
   versiossa, mutta fill:none + stroke, jolloin maskiin jää vain ohut rengas. */
.wc-block-add-to-wishlist-button__icon--empty::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M12 20.6l-1.3-1.2C5.6 15 2.5 12.1 2.5 8.6 2.5 5.7 4.7 3.5 7.6 3.5c1.7 0 3.3.8 4.4 2.1 1.1-1.3 2.7-2.1 4.4-2.1 2.9 0 5.1 2.2 5.1 5.1 0 3.5-3.1 6.4-8.2 10.8L12 20.6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M12 20.6l-1.3-1.2C5.6 15 2.5 12.1 2.5 8.6 2.5 5.7 4.7 3.5 7.6 3.5c1.7 0 3.3.8 4.4 2.1 1.1-1.3 2.7-2.1 4.4-2.1 2.9 0 5.1 2.2 5.1 5.1 0 3.5-3.1 6.4-8.2 10.8L12 20.6z'/%3E%3C/svg%3E");
}

.wc-block-add-to-wishlist-button__icon--filled::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.6l-1.3-1.2C5.6 15 2.5 12.1 2.5 8.6 2.5 5.7 4.7 3.5 7.6 3.5c1.7 0 3.3.8 4.4 2.1 1.1-1.3 2.7-2.1 4.4-2.1 2.9 0 5.1 2.2 5.1 5.1 0 3.5-3.1 6.4-8.2 10.8L12 20.6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.6l-1.3-1.2C5.6 15 2.5 12.1 2.5 8.6 2.5 5.7 4.7 3.5 7.6 3.5c1.7 0 3.3.8 4.4 2.1 1.1-1.3 2.7-2.1 4.4-2.1 2.9 0 5.1 2.2 5.1 5.1 0 3.5-3.1 6.4-8.2 10.8L12 20.6z'/%3E%3C/svg%3E");
}

/* Sama valitsinsyvyys kuin ytimen .toggle-säännössä (kaksi luokkaa), koska
   yhden luokan valitsin hävisi tarkkuuskilpailun eikä padding päätynyt
   koskaan voimaan (näkyi DevToolsin box-modelissa padding:0:na). */
.wc-block-add-to-wishlist-button .wc-block-add-to-wishlist-button__toggle {
	padding: 0.3em;
	border-radius: 50%;
}