/*
 * Lahetakukkia — lohkojen ja sivupohjan omat tyylit.
 *
 * Varit, fontit ja valistykset tulevat theme.jsonista muuttujina, joten
 * brandin vaihto ei vaadi muutoksia tahan tiedostoon. Pohjana on
 * sisarprojektin (vakkurinkukka) main.css; aukiolo-, poikkeusaika- ja
 * kielivalitsinosiot, avoinna-tanaan-merkki, yhteystietorivi, some-ikonit
 * ja kauppanoston symboli (.vk-kauppa__symboli) on jatetty pois, koska
 * kaupassa ei ole niita.
 */

/* -------------------------------------------------------------------------
 * Yleiset
 * ---------------------------------------------------------------------- */

/*
 * Otsikkofontti Canopeesta on vain Regular-leikkaus. Ilman tata selain
 * lihavoisi tai kallistaisi sen keinotekoisesti. Jost on muuttuva fontti,
 * jossa on oma kursiivi, joten sitakaan ei tarvitse jaljitella.
 */
body {
	font-synthesis: none;
}

/*
 * Versaalityyli (Canopee versaalein, harvennettuna): navigaatio, painikkeet,
 * kuvakorttien nimet, h4 ja alatunnisteen otsikot. Navigaation, painikkeiden
 * ja h4:n tyyli tulee theme.jsonista; luokka on muille otsikoille.
 */
.lk-versaali {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.lk-tumma {
	color: var(--wp--preset--color--base);
}

.lk-tumma :where(h1, h2, h3, h4) {
	color: var(--wp--preset--color--base);
}

.lk-tumma a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--base);
}

/*
 * Linkin hover-vari vihrealla pohjalla on lime (5,09:1). Ruoste jaisi
 * vihreaa vasten 1,2:1:een eika erottuisi.
 */
.lk-tumma a:not(.wp-block-button__link):hover,
.lk-tumma a:not(.wp-block-button__link):focus {
	color: var(--wp--preset--color--muted);
}

/*
 * Lomakkeen ja kassan lahetyspainike: sama ulkoasu kuin theme.jsonin
 * painikkeilla. Korkeus 0.95rem + 0.95rem + 1.2 x 1.125rem = noin 52 px,
 * eli yli 48 px:n kosketuskohteen vahimmaiskoon.
 */
.lk-nappi {
	display: inline-block;
	padding: 0.95rem 1.75rem;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.lk-nappi:hover,
.lk-nappi:focus {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/*
 * Kapealla naytolla painike on koko leveydelta: iakkaalle kayttajalle
 * suurempi ja helpommin osuttava kohde.
 */
@media (max-width: 599px) {
	/* Painikelohko on flex-kontti, joten myos kaare on levitettava. */
	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.wp-block-button__link,
	.lk-nappi {
		width: 100%;
		text-align: center;
	}
}

/*
 * Aariviivapainike. WordPressin oma tyyli perii tekstin ja reunuksen varin
 * ymparoivasta sisallosta, jolloin se olisi leipatekstin musta. Brandissa
 * aariviiva on vihrea ja ohut (1 px); pystysuuntainen tayte pienennetaan
 * reunuksen verran, jotta painike on yhta korkea kuin tavallinen painike.
 */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(0.95rem - 1px) calc(1.75rem - 1px);
	border: 1px solid var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/*
 * Ohut lyhyt erotin otsikon alla (alasivujen otsikko).
 * Vari tulee theme.jsonista (core/separator -> line).
 */
.wp-block-separator.lk-erotin {
	width: 5rem;
	border-top-width: 1px;
}

/* -------------------------------------------------------------------------
 * Ylatunniste
 * ---------------------------------------------------------------------- */

/*
 * Kolme kerrosta: limenvarinen apurivi (puhelinapu ja aukioloajat),
 * keskitetty tekstilogo ja keskitetty valikko sen alla. Ohut viiva erottaa
 * ylatunnisteen sisallosta.
 */
.lk-header {
	position: relative;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/*
 * Apurivi. Teksti on vihreaa limella (5,09:1). Rivissa on kaksi kappaletta
 * rinnakkain: puhelinapu ja synkronoitu malli "Aukioloajat"
 * (.lk-aukioloajat). Kapealla naytolla ne rivittyvat, ja aukioloajat
 * piilotetaan alle 600 px:n, jotta puhelinnumero pysyy ensimmaisena.
 * Piilotus on rajattu apuriviin, jotta sama malli nakyy Asiakaspalvelu-
 * sivulla kaikilla leveyksilla.
 */
.lk-apurivi {
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.lk-apurivi__inner {
	align-items: center;
	justify-content: center;
	gap: 0.35rem 1.25rem;
}

/* Mallin kappaleella ei ole omaa marginaali- tai tasausasetusta. */
.lk-apurivi .lk-aukioloajat {
	margin: 0;
	text-align: center;
}

.lk-apurivi a:not(.wp-block-button__link) {
	display: inline-block;
	/* Negatiivinen marginaali kumoaa paddingin, jottei rivivali kasva. */
	margin: -0.35rem -0.5rem;
	padding: 0.35rem 0.5rem;
	color: var(--wp--preset--color--primary);
}

@media (max-width: 599px) {
	.lk-apurivi .lk-aukioloajat {
		display: none;
	}
}

.lk-header__inner {
	gap: 0.75rem;
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: 1rem;
}

/* -------------------------------------------------------------------------
 * Ylatunnisteen tekstilogo
 * ---------------------------------------------------------------------- */

/*
 * Kaupalle ei ole omaa logoa, joten ylatunnisteessa on Vakkurin Kukan
 * symboli (56 px) ja sen alla sivuston nimi Canopeella seka tagline
 * harvennettuna versaalina. Kun suunnittelija toimittaa logon, tama korvataan
 * site-logo-lohkolla.
 */
.lk-logo {
	margin-bottom: 0;
}

.lk-logo img {
	display: block;
	margin-inline: auto;
}

.lk-header .wp-block-site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	font-weight: 400;
	line-height: 1.1;
	text-align: center;
}

/* Sivuston nimi on logon paikalla, joten se ei ole alleviivattu linkki. */
.lk-header .wp-block-site-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.lk-header .wp-block-site-title a:hover,
.lk-header .wp-block-site-title a:focus {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.lk-header .wp-block-site-tagline {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}

/* Valikko keskitettyna logon alla; kapealla naytolla WordPressin oma
 * overlay-valikko, jonka avauspainike on samoin keskella. */
.lk-header .wp-block-navigation {
	justify-content: center;
}

/* -------------------------------------------------------------------------
 * Alatunniste
 * ---------------------------------------------------------------------- */

.lk-footer .wp-block-heading {
	margin-bottom: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/*
 * Brandin kukkakuvio koristeena oikeassa ylakulmassa. Kuva on taustana
 * pseudoelementissa, ei lohkona, jotta alatunnisteen sisalto pysyy pelkkana
 * tekstisisaltona. isolation: isolate tekee alatunnisteesta oman
 * pinojarjestyksen, jolloin z-index -1 jaa sen oman vihrean taustan paalle
 * mutta tekstin alle. Kapealla naytolla kuvio piilotetaan.
 */
.lk-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.lk-footer::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -1.5rem;
	right: -2rem;
	width: 260px;
	height: 333px;
	background: url(../img/emblem-kerma.png) no-repeat center / contain;
	/*
	 * Kuvio vaalentaa alatunnisteen vihreaa taustaa. Kermatekstin kontrasti
	 * sekoitettuun taustaan on opacitylla 0.10 4,71:1, 0.12:lla 4,52:1 ja
	 * 0.14:lla enaa 4,33:1. AA-raja 4,5:1 pitaa siis vain 0.12:een asti,
	 * joten 0.10 jattaa marginaalia.
	 */
	opacity: 0.10;
	pointer-events: none;
}

@media (max-width: 781px) {
	.lk-footer::before {
		content: none;
	}
}

/* -------------------------------------------------------------------------
 * Etusivu: hero
 * ---------------------------------------------------------------------- */

/* Heron minimikorkeus (420 px) tulee lohkosta; kapealla naytolla matalampi. */
.lk-hero {
	margin-top: var(--wp--preset--spacing--30);
}

@media (max-width: 781px) {
	.wp-block-cover.lk-hero {
		min-height: 320px !important;
	}
}

/* -------------------------------------------------------------------------
 * Nain tilaat -askeleet (patterns/nain-tilaat.php)
 * ---------------------------------------------------------------------- */

/* Askeleen jarjestysnumero isolla Canopeella; vain koriste, otsikko kertoo
 * saman sanoin. */
.lk-askel__numero {
	margin-bottom: 0.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Kuvakortit (patterns/kategoriakortit.php)
 * ---------------------------------------------------------------------- */

/* Viisi rinnakkain, kapealla naytolla 2 x 2 + 1. */
@media (max-width: 781px) {
	.lk-kortit.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
}

/*
 * Nelion muotoinen kortti. Coverin oma minimikorkeus (430 px) nollataan,
 * jotta korkeus tulee kuvasuhteesta.
 */
.wp-block-cover.lk-kortti {
	min-height: 0;
	aspect-ratio: 1;
	padding: 0;
	overflow: hidden;
}

/*
 * Sisaltoalue tayttaa koko kortin, jolloin nimen linkin ::after voi peittaa
 * koko kortin (koko kortti on klikattava) ja nimi asettuu alaosaan keskelle.
 */
.lk-kortti .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: auto;
	padding: 1rem;
}

/*
 * Nimilaatikko: kerma 90 %:n peittavyydella. Vihrea teksti on pahimmassa
 * tapauksessa (musta kuva laatikon alla) 4,67:1 ja valkoisella kuvalla
 * 5,93:1, joten AA (4,5:1) tayttyy kaikilla kuvilla.
 */
.lk-kortti__nimi {
	max-width: 100%;
	margin: 0;
	padding: 0.55rem 1.1rem;
	border-radius: 3px;
	background: var(--wp--preset--color--base);
	background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lk-kortti__nimi a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.lk-kortti__nimi a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 4px;
}

.lk-kortti__nimi a:hover,
.lk-kortti__nimi a:focus {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* Fokusrengas koko kortin ymparille: vihrea rengas kermareunuksella
 * erottuu seka vaaleasta etta tummasta kuvasta. */
.lk-kortti__nimi a:focus-visible {
	outline: none;
}

.lk-kortti__nimi a:focus-visible::after {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: -3px;
	box-shadow: inset 0 0 0 6px var(--wp--preset--color--base);
}

.lk-kortti .wp-block-cover__image-background {
	transition: transform 0.4s ease;
}

.lk-kortti:hover .wp-block-cover__image-background,
.lk-kortti:focus-within .wp-block-cover__image-background {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.lk-kortti .wp-block-cover__image-background {
		transition: none;
	}

	.lk-kortti:hover .wp-block-cover__image-background,
	.lk-kortti:focus-within .wp-block-cover__image-background {
		transform: none;
	}
}

@media (max-width: 781px) {
	.lk-kortti .wp-block-cover__inner-container {
		padding: 0.5rem;
	}

	.lk-kortti__nimi {
		padding: 0.4rem 0.6rem;
		font-size: var(--wp--preset--font-size--small);
		letter-spacing: 0.05em;
	}
}

/* -------------------------------------------------------------------------
 * Vihrea paneeli
 * ---------------------------------------------------------------------- */

.lk-paneeli {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Apupaneelin puhelinnumero isolla, jotta se erottuu kaikessa. */
.lk-puhelin {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	line-height: 1.2;
}

/* -------------------------------------------------------------------------
 * Lomakekentat
 * ---------------------------------------------------------------------- */

/*
 * Perustyylit lomakekentille. Kassan kentat tyylitellaan myohemmin samalla
 * tavalla, joten nimio on kentan ylapuolella eika placeholderina.
 */
.lk-lomake {
	max-width: 34rem;
}

.lk-lomake__kentta {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 1.1rem;
}

.lk-lomake__kentta label {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.lk-lomake input[type="text"],
.lk-lomake input[type="email"],
.lk-lomake input[type="tel"],
.lk-lomake textarea {
	/* Ilman tata leveys 100 % ja padding lasketaan yhteen ja kentta levittaa sivun. */
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.85rem;
	/*
	 * Reunus on kentan ainoa nakyva raja, joten se tarvitsee 3:1 kontrastin
	 * (WCAG 1.4.11). Viivavari jaa valkoisella 1,55:1, vihrea antaa 6,72:1.
	 */
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	color: inherit;
	font: inherit;
}

.lk-lomake input:focus,
.lk-lomake textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: transparent;
}

.lk-lomake__ohje {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

.lk-lomake__ok,
.lk-lomake__virhe {
	padding: 0.85rem 1rem;
	border-radius: 10px;
	border-left: 4px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--muted);
	font-weight: 600;
}

.lk-lomake__virhe {
	border-left-color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Sisallon pikkusaadot
 * ---------------------------------------------------------------------- */

/* Taulukot eivat saa levittaa sivua kapealla naytolla. */
.wp-block-table {
	overflow-x: auto;
}

/* -------------------------------------------------------------------------
 * Toimitustiedot-lohko (lk/toimitustiedot)
 * ---------------------------------------------------------------------- */

/*
 * Toimituksen hinta ja raja-aika tietolaatikkona. Nakyy tuotesivulla,
 * kassan ylaosassa ja Nain tilaat -sivulla, joten sama ilme joka paikassa.
 * Musta teksti limella on 12,5:1, eli selvasti yli AA-rajan.
 */
.lk-toimitustiedot {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
	padding: 0.85rem 1rem;
	border-radius: 10px;
	border-left: 4px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.lk-toimitustiedot p {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Kategoriapillit (kauppa- ja kategoriasivun ylaosa)
 * ---------------------------------------------------------------------- */

/*
 * Tuotekategoriat isoina linkkinappeina vaakarivissa; rivittyvat kapealla
 * naytolla. Lohko on lisaosan lk/kategoriapillit: se nayttaa "Kaikki
 * kukat" ja paakategoriat WooCommercen jarjestyksessa seka valitun ryhman
 * alakategoriat omana rivinaan. Merkinta on sama kuin WordPressin
 * kategorialohkolla (cat-item, current-cat).
 *
 * Kontrastit: vihrea teksti kermalla 5,85:1 ja kerma vihrealla 5,85:1
 * (nykyinen kategoria), kerma ruosteella 4,85:1 (hover). Kaikki yli
 * AA-rajan 4,5:1. Reunus on vihrea, joten sen kontrasti kermaan on
 * 5,85:1 eli yli UI-komponenttien 3:1 rajan.
 */
.lk-kategoriapillit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.lk-kategoriapillit__lohko {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	width: 100%;
}

.lk-kategoriapillit .wp-block-categories {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Alaryhma (esim. juhlapaivat) erottuu paarivista ohuella viivalla ja
 * hieman pienemmilla pilleilla, jottei se nayta samanarvoiselta.
 */
.lk-kategoriapillit__alaryhma {
	padding-top: 0.9rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.lk-kategoriapillit .lk-kategoriapillit__alaryhma .cat-item > a {
	font-size: var(--wp--preset--font-size--small);
}

.lk-kategoriapillit .cat-item {
	margin: 0;
}

/*
 * Korkeus: 2 x (0.9rem - 1px) tayte + 1,2 x 1,125rem rivikorkeus + 2 px
 * reunus = noin 50 px, eli yli 48 px:n kosketuskohteen vahimmaiskoon.
 */
.lk-kategoriapillit .cat-item > a {
	display: block;
	padding: calc(0.9rem - 1px) calc(1.25rem - 1px);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.lk-kategoriapillit .cat-item > a:hover,
.lk-kategoriapillit .cat-item > a:focus {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Nykyinen kategoria kaanteisvarein, jotta sijainti nakyy ilman varia
 * ainoana vihjeena: pilli on myos ainoa tayttovarillinen. */
.lk-kategoriapillit .current-cat > a {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
 * Tuoteruudukko ja tuotekortit (kauppa, kategoria, tuotehaku)
 * ---------------------------------------------------------------------- */

/*
 * WooCommercen product-template piirtaa ul-listan. Lohkon oma tyyli
 * antaa sarakkeet auto-fill-saannolla, joka venyy nayton mukaan; tassa
 * kaupassa sarakemaara on kiinteasti 3, alle 782 px 2 ja alle 480 px 1.
 *
 * WooCommercen oma saanto on kahden luokan tarkkuudella
 * (.wc-block-product-template__responsive.columns-3), ja sen tyyli
 * ladataan vasta lohkon renderoinnissa eli teeman main.css:n jalkeen.
 * Sama tarkkuus haviaisi siksi latausjarjestyksessa, joten omat saannot
 * kirjoitetaan kolmen luokan tarkkuudella oman kareluokan kautta.
 *
 * Kareluokat ovat .lk-tuotelista (kauppa ja kategoria) ja
 * .lk-hakutulokset (haku). Etusivun Suosittelemme-nosto kayttaa samaa
 * WooCommerce-lohkoa mutta nelja saraketta, joten se jaa naiden
 * saantojen ulkopuolelle tarkoituksella.
 */
.lk-hakutulokset .wc-block-product-template,
.lk-tuotelista .wc-block-product-template {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lk-hakutulokset .wc-block-product-template.wc-block-product-template,
.lk-tuotelista .wc-block-product-template.wc-block-product-template {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-block-product-template > li {
	margin: 0;
	list-style: none;
}

@media (max-width: 781px) {
	.lk-hakutulokset .wc-block-product-template.wc-block-product-template,
	.lk-tuotelista .wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 479px) {
	.lk-hakutulokset .wc-block-product-template.wc-block-product-template,
	.lk-tuotelista .wc-block-product-template.wc-block-product-template {
		grid-template-columns: 1fr;
	}
}

/*
 * Tuotekortin painike (lohko lk/tuotepainike) on kortin ainoa linkki:
 * kuvalla ja nimella ei ole omaa linkkia, jolloin ruudunlukija ei lue
 * samaa kohdetta kolmeen kertaan. Painikkeen ::after peittaa koko
 * kortin, joten kortti on silti kokonaan klikattava.
 */
.lk-tuotepainike {
	margin-top: auto;
	padding-top: 0.35rem;
}

.lk-tuotepainike .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 4px;
}

.lk-tuotepainike .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Kortti tayttaa ruudun korkeuden, ja position: relative antaa
 * painikkeen ::after-peitteelle rajat (koko kortti on klikattava). */
.lk-tuotekortti {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.lk-tuotekortti__kuva {
	overflow: hidden;
	border-radius: 4px;
}

/* Kuvasuhde 4:3 ja rajaus: kimput ovat eri kokoisia, mutta ruudukko
 * pysyy tasaisena. Lohko asettaa saman myos itse tyyliattribuuttina. */
.lk-tuotekortti__kuva img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

/*
 * Otsikkotason h3 oma koko (jopa 1,75rem) on kolmen sarakkeen
 * ruudukossa liian suuri, joten nimi kaytaa Suuri-kokoa.
 */
.lk-tuotekortti__nimi {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

/* Hinta isolla mutta ilman lihavointia: se on tieto, ei kehotus. */
.lk-tuotekortti__hinta,
.lk-tuotekortti__hinta .wc-block-components-product-price,
.lk-tuotekortti__hinta .amount {
	font-weight: 400;
}

/* Hienovarainen zoom kertoo, etta kortti on klikattava. */
.lk-tuotekortti:hover .lk-tuotekortti__kuva img,
.lk-tuotekortti:focus-within .lk-tuotekortti__kuva img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.lk-tuotekortti__kuva img {
		transition: none;
	}

	.lk-tuotekortti:hover .lk-tuotekortti__kuva img,
	.lk-tuotekortti:focus-within .lk-tuotekortti__kuva img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Tuotelistan sivutus
 * ---------------------------------------------------------------------- */

/*
 * Vain edellinen ja seuraava, ei sivunumeroita: 24 kimppua sivulla
 * riittaa, ja kaksi isoa nimettya painiketta on iakkaalle kayttajalle
 * selvempi kuin numerorivi. Ulkoasu on sama kuin aariviivapainikkeella.
 */
.lk-sivutus {
	margin-top: var(--wp--preset--spacing--40);
	gap: 1rem;
}

.lk-sivutus .wp-block-query-pagination-previous,
.lk-sivutus .wp-block-query-pagination-next {
	display: inline-block;
	padding: calc(0.95rem - 1px) calc(1.75rem - 1px);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.lk-sivutus .wp-block-query-pagination-previous:hover,
.lk-sivutus .wp-block-query-pagination-previous:focus,
.lk-sivutus .wp-block-query-pagination-next:hover,
.lk-sivutus .wp-block-query-pagination-next:focus {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Ensimmaisella sivulla nakyy vain "Seuraava sivu"; se pysyy oikeassa
 * reunassa, jossa se on myos muilla sivuilla. */
.lk-sivutus .wp-block-query-pagination-next:only-child {
	margin-inline-start: auto;
}

/* -------------------------------------------------------------------------
 * Tuotesivu
 * ---------------------------------------------------------------------- */

/* Paluulinkki kauppaan otsikon ylla; kosketuskohde on taytteen verran
 * isompi kuin pelkka teksti. */
.lk-takaisin {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--small);
}

.lk-takaisin a {
	display: inline-block;
	margin-inline-start: -0.5rem;
	padding: 0.4rem 0.5rem;
}

/*
 * Galleria. Ilman wc-product-gallery-slider -teematukea WooCommerce
 * tulostaa kaikki kuvat perakkain samaan kaareen, joten paakuva
 * levitetaan taysleveaksi ja loput asettuvat riviin pieniksi.
 */
.lk-galleria .woocommerce-product-gallery {
	width: 100%;
}

.lk-galleria .woocommerce-product-gallery__wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lk-galleria .woocommerce-product-gallery__image,
.lk-galleria .woocommerce-product-gallery__image--placeholder {
	flex: 0 0 100%;
	margin: 0;
}

.lk-galleria .woocommerce-product-gallery__image:not(:first-child) {
	flex: 0 0 calc(25% - 0.375rem);
}

.lk-galleria img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Hinta on tuotesivun toiseksi tarkein tieto nimen jalkeen: iso, mutta
 * ei lihavoitu. */
.lk-tuotesivu__hinta,
.lk-tuotesivu__hinta .wc-block-components-product-price,
.lk-tuotesivu__hinta .amount {
	font-weight: 400;
}

.lk-tuotesivu__ohje {
	margin-top: 0.5rem;
	opacity: 0.75;
}

/*
 * Tilauslomake. Painike on tuotesivun ainoa toiminto, joten se on koko
 * leveydelta myos leveilla naytoilla.
 */
.lk-tilaa .quantity {
	margin-bottom: 0.75rem;
}

.lk-tilaa .quantity input {
	box-sizing: border-box;
	width: 5.5rem;
	min-width: 48px;
	min-height: 48px;
	padding: 0.7rem 0.5rem;
	/* Reunus on kentan ainoa nakyva raja (WCAG 1.4.11): vihrea antaa
	 * valkoisella 6,72:1, viivavari jaisi 1,55:1:een. */
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	color: inherit;
	font: inherit;
	text-align: center;
}

.lk-tilaa .quantity input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: transparent;
}

.lk-tilaa .single_add_to_cart_button {
	width: 100%;
}

/* Pitka kuvaus oman otsikon alla; ei valilehtia. */
.lk-tuotekuvaus > :last-child {
	margin-bottom: 0;
}

/*
 * WooCommerce tulostaa gallerian karelle inline-tyylin opacity: 0 ja
 * palauttaa sen JavaScriptilla. Tuotekuva ei saa riippua skriptista,
 * joten se palautetaan tyylilla. !important on pakko, koska inline-tyyli
 * voittaa muuten.
 */
.lk-galleria .woocommerce-product-gallery {
	opacity: 1 !important;
}

/* Gallerian oma 512 px:n katto kumotaan: kuvasarake saa sivupohjan levyn.
 * Valitsimessa ei nojata WooCommercen kareluokkaan, joka voi muuttua. */
.lk-galleria {
	max-width: none;
}

/* -------------------------------------------------------------------------
 * Kassa
 * ---------------------------------------------------------------------- */

/*
 * Osioiden numeroidut otsikot (1. Vastaanottaja … 4. Maksu). Kassan
 * kenttien tyylittely tehdaan vaiheessa 3; tassa on se mita
 * osiojarjestys ja luettavuus tarvitsevat.
 *
 * Valistys tulee osioiden valiin, ei ensimmaisen ylle. Osiot eivat ole
 * emonsa ensimmaisia lapsia (edella on piilotettu valintaruutu ja
 * piilokentat) eivatka ensimmaisia div-tyypin sisaruksia, joten
 * :first-child ja :first-of-type eivat kelpaa. Neljannen vaiheen otsikko
 * ("4. Maksu") on .lk-osio-karen ulkopuolella, joten se saa valistyksen
 * omasta luokastaan.
 */
.lk-vaihe {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--30);
}

.lk-osio ~ .lk-osio .lk-vaihe,
.lk-vaihe--maksu {
	margin-top: var(--wp--preset--spacing--50);
}

.lk-maksun-ohje {
	margin-bottom: var(--wp--preset--spacing--30);
}

/*
 * WooCommercen oma "Tilauksesi"-otsikko (#order_review_heading) tulostuu
 * heti oman "4. Maksu" -otsikon jalkeen, joten kassalla olisi kaksi
 * otsikkoa perakkain. Se piilotetaan ruudulta mutta jatetaan
 * ruudunlukijalle, jolle tilausyhteenvedon nimi on hyodyllinen.
 */
#order_review_heading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Kaikki osiot piirretaan yhdessa sarakkeessa (ks. lisaosan inc/kassa.php),
 * joten WooCommercen kahden palstan asettelu kumotaan.
 */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	float: none;
	width: 100%;
}

/*
 * Tuotekuva ja "Vaihda kukka" tilausyhteenvedossa. Luokka on itse
 * img-elementissa: WC_Product::get_image() antaa sen
 * wp_get_attachment_image():lle, joka ei kaari kuvaa mihinkaan.
 */
img.lk-kassa__kuva {
	display: block;
	width: 64px;
	height: auto;
	margin-bottom: 0.35rem;
	border-radius: 4px;
}

.lk-vaihda-kukka {
	display: inline-block;
	margin-top: 0.25rem;
	padding: 0.5rem 0.25rem;
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Kassan kentat. Sama ulkoasu kuin lk-lomake-osiossa: nimio kentan
 * ylapuolella, valkoinen kentta vihrealla 1 px reunuksella. Kaikki kentat
 * ovat koko leveydelta yhdessa sarakkeessa, joten WooCommercen
 * form-row-first / form-row-last -kellutukset kumotaan. Valitsimessa on
 * .woocommerce, koska WooCommercen oma
 * ".woocommerce form .form-row-last" (float: right; width: 47%) on muuten
 * spesifisempi ja jättäisi esim. vastaanottajan nimen puolilevyiseksi.
 */
.woocommerce-checkout .form-row,
.woocommerce form .form-row.form-row-first,
.woocommerce form .form-row.form-row-last {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	float: none;
	width: 100%;
	margin: 0 0 1.1rem;
	padding: 0;
}

.woocommerce-checkout .form-row > label {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

/* Pakollisen kentan tahti ruosteella: kermalla 4,85:1, siis AA. */
.woocommerce-checkout .form-row .required {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.woocommerce-checkout .form-row .optional {
	font-weight: 400;
	opacity: 0.75;
}

.woocommerce-checkout .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
	/* Ilman tata leveys 100 % ja tayte lasketaan yhteen ja kentta
	 * levittaa sivun. */
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.85rem;
	/* Reunus on kentan ainoa nakyva raja (WCAG 1.4.11): vihrea antaa
	 * valkoisella 6,72:1, viivavari jaisi 1,55:1:een. */
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	color: inherit;
	font: inherit;
}

.woocommerce-checkout .form-row textarea {
	min-height: 7rem;
	resize: vertical;
}

.woocommerce-checkout .form-row input:focus-visible,
.woocommerce-checkout .form-row select:focus-visible,
.woocommerce-checkout .form-row textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: transparent;
}

/* Valintaruutu ja sen teksti samalle riville; ruutu on 1,4rem eli
 * riittavan iso osuttavaksi. */
.woocommerce-checkout .form-row label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--medium);
}

.woocommerce-checkout .form-row label.checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.4rem;
	height: 1.4rem;
	margin: 0.15rem 0 0;
	accent-color: var(--wp--preset--color--primary);
}

.woocommerce-checkout .form-row .description {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

/*
 * Vastaanottajan nimi kysytaan yhtena kenttana, joten
 * shipping_first_name on piilokentta (ks. lisaosan inc/kassa.php).
 * WooCommerce kaaree senkin form-row-kappaleeseen, joka jaisi tyhjaksi
 * valiksi kenttien ylle.
 */
.woocommerce-checkout #shipping_first_name_field {
	display: none;
}

/*
 * Tilausyhteenvedon taulukko: kermanvarinen tausta ja ohuet viivat.
 * Viivat ovat vain rakennetta, eivat tietoa — rivin tieto luetaan ilman
 * niitakin — joten niille riittaa brandin viivavari.
 */
.lk-kassa .shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
}

.lk-kassa .shop_table th,
.lk-kassa .shop_table td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}

.lk-kassa .shop_table tfoot td,
.lk-kassa .shop_table tfoot th {
	text-align: left;
}

.lk-kassa .shop_table tr:last-child th,
.lk-kassa .shop_table tr:last-child td {
	border-bottom: 0;
}

/* Loppusumma isommalla: se on maksuhetken tarkein luku. */
.lk-kassa .shop_table .order-total th,
.lk-kassa .shop_table .order-total td {
	font-size: var(--wp--preset--font-size--large);
}

.lk-kassa .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Maksutapalohko kevyella kermataustalla ja viivareunuksella, jotta
 * maksutavan valinta erottuu yhteenvedosta.
 */
.lk-kassa #payment {
	margin-top: var(--wp--preset--spacing--30);
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
}

.lk-kassa #payment .payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lk-kassa #payment .payment_box {
	margin-top: 0.75rem;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	background: var(--wp--preset--color--white);
}

.lk-kassa .woocommerce-privacy-policy-text {
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------------------
 * WooCommercen ilmoitukset
 * ---------------------------------------------------------------------- */

/*
 * Sama ilme kuin lomakkeen omilla ilmoituksilla (.lk-lomake__ok /
 * __virhe): kermanvarinen tausta ja 4 px varillinen palkki vasemmassa
 * reunassa. Vari ei ole ainoa vihje, koska ilmoituksen teksti kertoo
 * itse mista on kysymys.
 */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	box-sizing: border-box;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0.85rem 1rem 0.85rem 1.25rem;
	border-radius: 10px;
	border-left: 4px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--muted);
	list-style: none;
}

/* Virheessa palkki on ruosteen varinen; kermalla 4,85:1. */
.woocommerce-error {
	border-left-color: var(--wp--preset--color--accent);
}

.woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 600;
}

.woocommerce-error li + li {
	margin-top: 0.5rem;
}

/* Virhelistan linkit (esim. "Yksityisyyden suoja") alleviivataan, jotta
 * ne erottuvat lihavoidusta virhetekstista. */
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
	text-decoration: underline;
}

/*
 * WooCommercen oma ilmoitustyyli piirtaa tekstin eteen ::before-ikonin,
 * joka on osa lohkokirjaston tyyleja. Jos ne eivat lataudu, jaljelle jaa
 * tyhja merkki; oma palkki kertoo saman, joten ikoni jatetaan pois.
 */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
	content: none;
}

/* -------------------------------------------------------------------------
 * WooCommercen kumoukset
 * ---------------------------------------------------------------------- */

/*
 * Nama nakymat eivat kuulu kauppaan: murupolku on englanninkielinen
 * ("Home"), oma otsikko on jo sivupohjassa, arvosteluja ei kerata eika
 * valilehtia kayteta. Piilotus on varmistus siita, etta jokin
 * WooCommercen paivitys tai koukku ei tuo niita takaisin nakyviin.
 */
.woocommerce-breadcrumb,
.woocommerce-products-header__title,
.woocommerce-tabs,
.woocommerce-product-rating,
.woocommerce-Reviews,
#reviews,
.related.products {
	display: none;
}

/*
 * Kauppailmoitus (Mukauta -> Kauppailmoitus) on yllapitajan oma tyokalu
 * esimerkiksi juhlapyhien poikkeuksiin, joten sita ei piiloteta vaan
 * tyylitellaan brandiin. Teksti on vihreaa limella (5,09:1).
 */
.woocommerce-store-notice,
.demo_store {
	position: static;
	margin: 0;
	padding: 0.85rem 1.25rem;
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.woocommerce-store-notice a {
	color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
 * Kiitos-sivu
 * ---------------------------------------------------------------------- */

/* Tilauksen tiedot samalla levyudella kuin kassan yhteenveto. */
.lk-kiitos .woocommerce-order-overview,
.lk-kiitos .wc-block-order-confirmation-summary {
	margin-bottom: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--white);
}

.lk-kiitos__apu {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* -------------------------------------------------------------------------
 * Mobiili
 * ---------------------------------------------------------------------- */

@media (max-width: 599px) {
	/*
	 * WooCommercen painikkeet samaan sarjaan teeman omien kanssa:
	 * kapealla naytolla koko leveydelta. Lomakkeiden lahetyspainikkeet
	 * (#place_order, .single_add_to_cart_button) ovat button-elementteja,
	 * joten pelkka .wp-block-button__link ei osu niihin.
	 */
	.button,
	.wp-element-button,
	.single_add_to_cart_button,
	#place_order {
		width: 100%;
	}

	/* Tilausyhteenveto voi olla kapealla naytolla leveampi kuin sivu,
	 * jos tuotteen nimi on pitka: taulukko vierii itse eika levita
	 * sivua. */
	.lk-kassa .woocommerce-checkout-review-order {
		overflow-x: auto;
	}

	.lk-kassa .shop_table th,
	.lk-kassa .shop_table td {
		padding: 0.7rem;
	}
}