/*
 * Brodetic Kauppa
 *
 * Suunta: teollinen työmääräin. Rakenne tehdään hiusviivoilla ja numeroiduilla
 * riveillä, ei korteilla. Musta kantaa rakenteen, punainen varataan vain
 * valitulle riville ja toimintonapille. Numerointi 01 / 02 / 03 on sama
 * tapa kuin etusivun palveluluettelossa.
 */

:root {
	/* Viininpunainen korostus. Vaihda nama kaksi riviä, jos väri halutaan takaisin
	   kirkkaaksi punaiseksi (#e70000 / #b80000). Muuta ei tarvitse koskea. */
	--bk-korostus: #7d1b2e;
	--bk-korostus-tumma: #5f1322;
	--bk-korostus-kirkas: #a8324a;
	--bk-musta: #0e0e0e;
	--bk-teksti: #2f2f2f;
	--bk-harmaa: #6b6b6b;
	--bk-viiva: #d8d5d1;
	--bk-viiva-vahva: #0e0e0e;
	--bk-pohja: #f2f1ef;
	/* Aliakset. Naita kahta kaytetaan tiedostossa yhteensa 35 kertaa,
	   mutta niita ei ollut koskaan maaritelty: ilman varavaria var() jai
	   silloin voimattomaksi ja selain peri arvon ylemmalta tasolta. */
	--bk-vaalea: #f2f1ef;
	--brd-leipa: "DM Sans", "Helvetica Neue", Arial, sans-serif;
	/*
	 * Otsikkofontti. Pino kattaa kaikki kirjoitusasut, joilla fontti voi olla
	 * asennettuna: "Babas Neue" on nimi, jolla se on lisätty Elementoriin
	 * (kirjoitusvirhe, mutta toimiva), "Bebas Neue Pro" on maksullinen
	 * alkuperäinen ja "Bebas Neue" Google Fontsin ilmainen versio.
	 * Selain käyttää ensimmäistä, joka löytyy.
	 *
	 * Fontti on pelkkiä versaaleja, joten sitä käytetään vain otsikoissa.
	 */
	--bk-otsikko-fontti: "Bebas Neue Pro", "Bebas Neue", "Babas Neue", "Oswald", "Arial Narrow", sans-serif;
	/* Vain Normal-leikkaus on ladattu. Ilman tätä selain tekee lihavoinnista
	   keinotekoisen, mikä näyttää kapeassa fontissa sotkuiselta. */
	--bk-otsikko-paino: 400;
	--bk-otsikko-valjennys: 0.02em;
	--bk-teksti-fontti: "DM Sans", "Helvetica Neue", Arial, sans-serif;
	/* Typografian asteikko: kultainen leikkaus, perusta 16px.
	   13 / 16 / 20 / 26 / 33 / 42 / 53 / 68 (askel 1.272 = sqrt(1.618)). */
	--brd-xs: 13px;
	--brd-s: 16px;
	--brd-m: 20px;
	--brd-l: 26px;
	--brd-xl: 33px;
	--brd-2xl: 42px;
	--brd-3xl: 53px;
	--brd-4xl: 68px;
}

/* =============================================================
   1. Elementorin oletusvärien korjaus
   Sivuston Elementor-paletti on yhä tehdasasetuksilla, minkä takia
   tuotteen otsikko oli vaaleansininen ja hinta oliivinvihreä. Nämä
   säännöt pakottavat brändivärit myös ilman paletin korjausta.
   ============================================================= */

.woocommerce div.product .product_title,
.elementor-widget-woocommerce-product-title .product_title {
	color: var(--bk-musta) !important;
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	letter-spacing: var(--bk-otsikko-valjennys);
	/* Ä ja Ö tarvitsevat tilaa pisteilleen versaalifontissa. */
	line-height: 1.14;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.elementor-widget-woocommerce-product-price .price,
.elementor-widget-woocommerce-product-price .price ins {
	color: var(--bk-musta) !important;
	font-family: var(--bk-teksti-fontti);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.woocommerce div.product p.price del,
.elementor-widget-woocommerce-product-price .price del {
	color: var(--bk-harmaa) !important;
	font-weight: 400;
	opacity: 1;
}

/* =============================================================
   2. Ostoslomakkeen asettelu
   Elementorin lisää-ostoskoriin-elementti latoo lomakkeen riviksi.
   Ilman näitä sääntöjä merkkauslohko, määrä ja nappi menevät
   kolmeen palstaan vierekkäin ja nappi venyy palkiksi.
   ============================================================= */

/* Elementorin add-to-cart -elementti latoo form.cart:n vaakariviksi, jolloin
   valinnat, erittely ja nappi puristuvat 60-110 px palstoiksi. Lomake on
   pystysuora lomake, joten pakotetaan se sarakkeeksi.

   HUOM. Alla EI saa olla `order`-saantoa. Ostopolku on: valitse tuote
   (vari, koko, maara) -> valitse merkkaus -> lisaa koriin. Merkkauslohkon
   nostaminen ensimmaiseksi pyytaa asiakasta paattamaan brodeerauksesta
   ennen kuin han on edes valinnut tuotetta. */
.woocommerce div.product form.cart,
.woocommerce div.product .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 28px;
}

.woocommerce div.product form.cart > *,
.woocommerce div.product .woocommerce-variation-add-to-cart > * {
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.woocommerce div.product form.cart .quantity,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity {
	flex: 0 0 auto !important;
	margin: 0;
	align-self: center;
}

.woocommerce div.product form.cart .quantity input.qty {
	width: 4.5rem;
	height: 52px;
	padding: 0 8px;
	border: 1px solid var(--bk-viiva-vahva);
	border-radius: 0;
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-s);
	font-variant-numeric: tabular-nums;
	text-align: center;
	background: #fff;
	color: var(--bk-musta);
}

.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 16rem;
	height: 56px;
	align-self: flex-start !important;
}

/* Variaatiotaulukko */
.woocommerce div.product form.cart table.variations {
	width: 100%;
	margin-bottom: 4px;
	border: 0;
}

.woocommerce div.product form.cart table.variations th.label label {
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-xs);
	font-weight: 600;
	color: var(--bk-musta);
}

.woocommerce div.product form.cart table.variations td.value select {
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--bk-viiva-vahva);
	border-radius: 0;
	background: #fff;
	font-family: var(--bk-teksti-fontti);
}

/* =============================================================
   3. Napit
   ============================================================= */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 30px;
	border: 0;
	border-radius: 3px;
	background: var(--bk-korostus);
	color: #fff;
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-s);
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	transition: background-color 0.12s linear;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover {
	background: var(--bk-korostus-tumma);
	color: #fff;
}

/* Toissijainen toiminto ei kilpaile ostonapin kanssa. */
.woocommerce a.button.wc-backward,
.woocommerce button[name="update_cart"],
.woocommerce .cart .actions .button:not(.checkout-button) {
	background: transparent;
	color: var(--bk-musta);
	border: 1px solid var(--bk-viiva-vahva);
}

.woocommerce a.button.wc-backward:hover,
.woocommerce button[name="update_cart"]:hover,
.woocommerce .cart .actions .button:not(.checkout-button):hover {
	background: var(--bk-musta);
	color: #fff;
}

.woocommerce .button:focus-visible,
.woocommerce button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.woocommerce textarea:focus-visible {
	outline: 2px solid var(--bk-musta);
	outline-offset: 3px;
}

/* =============================================================
   4. Merkkauslohko
   ============================================================= */

.bk-merkkaus {
	margin: 30px 0 8px;
	padding-top: 16px;
	border-top: 2px solid var(--bk-viiva-vahva);
	font-family: var(--bk-teksti-fontti);
	color: var(--bk-teksti);
}

.bk-merkkaus__paa {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	margin-bottom: 6px;
}

/* Ainoa versaalimerkintä lohkossa, sama rooli kuin etusivun
   osiotunnisteilla PALVELUT ja KENELLE. */
.bk-merkkaus__merkki {
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: var(--brd-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bk-musta);
}

.bk-merkkaus__johdanto {
	margin: 0;
	flex: 1 1 16rem;
	font-size: var(--brd-xs);
	line-height: 1.5;
	color: var(--bk-harmaa);
}

.bk-piilotettu {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Merkkaustavat: numeroitu luettelo, ei kortteja --- */

.bk-tavat {
	margin: 12px 0 26px;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--bk-viiva);
}

.bk-tapa {
	display: grid;
	grid-template-columns: 2.4rem 1fr auto;
	grid-template-areas:
		"numero nimi   hinta"
		".      kuvaus kuvaus";
	column-gap: 12px;
	row-gap: 3px;
	position: relative;
	padding: 14px 14px 14px 12px;
	border-bottom: 1px solid var(--bk-viiva);
	cursor: pointer;
	transition: background-color 0.12s linear, color 0.12s linear;
}

.bk-tapa:hover {
	background: var(--bk-pohja);
}

.bk-tapa input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.bk-tapa:focus-within {
	outline: 2px solid var(--bk-musta);
	outline-offset: -2px;
}

.bk-tapa__numero {
	grid-area: numero;
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: var(--brd-s);
	font-variant-numeric: tabular-nums;
	/* Aiempi #b3aea8 jäi valkoisella 2,2:1 kontrastiin. Tämä on 5,1:1. */
	color: #736e68;
	line-height: 1.35;
}

.bk-tapa__nimi {
	grid-area: nimi;
	font-weight: 600;
	font-size: var(--brd-s);
	color: var(--bk-musta);
	line-height: 1.35;
}

.bk-tapa__hinta {
	grid-area: hinta;
	font-size: var(--brd-s);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--bk-musta);
	line-height: 1.35;
}

.bk-tapa__kuvaus {
	grid-area: kuvaus;
	font-size: var(--brd-xs);
	line-height: 1.5;
	color: var(--bk-harmaa);
}

.bk-tapa__aloitus {
	display: block;
	font-style: normal;
	/* Aiempi #8a8580 jäi 3,7:1 kontrastiin. Tämä on 5,1:1. */
	color: #736e68;
}

/* Valittu rivi kääntyy negatiiviksi. Ero ei perustu pelkkään väriin. */
.bk-tapa:has(input:checked) {
	background: var(--bk-musta);
	border-bottom-color: var(--bk-musta);
}

.bk-tapa:has(input:checked) .bk-tapa__numero {
	/* Korostusväri jäi mustaa vasten 3,0:1 kontrastiin eikä sitä voi
	   kirkastaa punaisena ilman että sävy karkaa pinkiksi. Valinnan
	   kertoo jo musta pohja, joten numero seuraa kuvaustekstin sävyä. */
	color: #b8b4b0;
}

.bk-tapa:has(input:checked) .bk-tapa__nimi,
.bk-tapa:has(input:checked) .bk-tapa__hinta {
	color: #fff;
}

.bk-tapa:has(input:checked) .bk-tapa__kuvaus {
	color: #b8b4b0;
}

.bk-tapa:has(input:checked) .bk-tapa__aloitus {
	color: #918d89;
}

/* Varajärjestely selaimille, jotka eivät tunne :has() */
@supports not (selector(:has(*))) {
	.bk-tapa input[type="radio"] {
		position: static;
		width: auto;
		height: auto;
		opacity: 1;
		grid-area: numero;
		align-self: start;
		margin-top: 4px;
		accent-color: var(--bk-korostus);
	}

	.bk-tapa__numero {
		display: none;
	}
}

/* --- Kentät: alleviivaus, ei laatikoita --- */

.bk-kentta {
	margin: 0 0 20px;
}

.bk-label {
	display: block;
	margin-bottom: 5px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--bk-musta);
}

.bk-valinnainen {
	margin-left: 7px;
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--bk-harmaa);
}

.bk-input,
.bk-select,
.bk-textarea {
	width: 100%;
	padding: 10px 2px;
	border: 0;
	border-bottom: 1px solid var(--bk-viiva-vahva);
	border-radius: 0;
	background: transparent;
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-s);
	color: var(--bk-musta);
	appearance: none;
}

.bk-select {
	padding-right: 24px;
	background-image: linear-gradient( 45deg, transparent 50%, var(--bk-musta) 50% ), linear-gradient( 135deg, var(--bk-musta) 50%, transparent 50% );
	background-position: calc( 100% - 12px ) calc( 50% + 2px ), calc( 100% - 6px ) calc( 50% + 2px );
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.bk-input:focus,
.bk-select:focus,
.bk-textarea:focus {
	outline: 0;
	border-bottom-width: 2px;
	border-bottom-color: var(--bk-korostus);
	padding-bottom: 9px;
}

.bk-input::placeholder,
.bk-textarea::placeholder {
	color: #a8a39e;
}

.bk-textarea {
	resize: vertical;
	line-height: 1.5;
}

/* Natiivi <input type=file> nayttaa selaimen oman englanninkielisen
   "Choose File / No file chosen" -painikkeen, jonka tekstia ei voi kaantaa
   CSS:lla. Syote piilotetaan nakyvista mutta pidetaan kohdistettavana, ja
   label toimii painikkeena. Tiedoston nimi kirjoitetaan viereen JS:lla. */
.bk-tiedosto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px dashed var(--bk-viiva-vahva);
	background: transparent;
}

.bk-tiedosto:focus-within {
	outline: 2px solid var(--bk-korostus);
	outline-offset: 2px;
}

.bk-tiedosto__syote {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.bk-tiedosto__nappi {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--bk-musta);
	background: #fff;
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-s);
	font-weight: 500;
	color: var(--bk-musta);
	cursor: pointer;
}

.bk-tiedosto__nappi:hover {
	background: var(--bk-musta);
	color: #fff;
}

.bk-tiedosto__nimi {
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-xs);
	color: var(--bk-harmaa);
	min-width: 0;
	overflow-wrap: anywhere;
}

.bk-tiedosto--valittu .bk-tiedosto__nimi {
	color: var(--bk-musta);
	font-weight: 500;
}

.bk-tiedosto--pois {
	border-style: dotted;
	border-color: var(--bk-viiva);
	opacity: 0.55;
}

.bk-tiedosto--pois .bk-tiedosto__nappi {
	pointer-events: none;
	border-color: var(--bk-viiva);
	color: #a8a39e;
}

/* vahimmaismaaran selitys avattavaksi, ettei se hallitse lomaketta */
.bk-minimi-huomio > summary {
	cursor: pointer;
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-xs);
	font-weight: 600;
	list-style: none;
}

.bk-minimi-huomio > summary::-webkit-details-marker { display: none; }

.bk-minimi-huomio > summary::before {
	content: "+ ";
	font-weight: 400;
}

.bk-minimi-huomio[open] > summary::before { content: "\2212 "; }

.bk-minimi-huomio > p {
	margin: 10px 0 0;
	font-size: var(--brd-xs);
}

.bk-ohje {
	display: block;
	margin-top: 6px;
	font-size: 0.79rem;
	line-height: 1.5;
	color: var(--bk-harmaa);
}

.bk-checkbox {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 0.92rem;
	color: var(--bk-musta);
	cursor: pointer;
}

.bk-checkbox input {
	width: 17px;
	height: 17px;
	accent-color: var(--bk-korostus);
}

.bk-huomio {
	margin: 22px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--bk-viiva);
	font-size: 0.8rem;
	line-height: 1.55;
	color: var(--bk-harmaa);
}

.bk-virhe {
	display: block;
	margin-top: 7px;
	padding-left: 10px;
	border-left: 2px solid var(--bk-korostus);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--bk-korostus);
}

/* =============================================================
   5. Tuotelista
   ============================================================= */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding-top: 0.7em;
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-s);
	font-weight: 600;
	color: var(--bk-musta);
}

.woocommerce ul.products li.product .price {
	color: var(--bk-musta);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.woocommerce span.onsale {
	top: 0;
	left: 0;
	min-width: 0;
	min-height: 0;
	padding: 7px 11px;
	border-radius: 0;
	background: var(--bk-korostus);
	font-family: var(--bk-teksti-fontti);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
}

.bk-loop-button {
	margin-top: 4px;
}

/* =============================================================
   6. Ilmoitukset
   ============================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 0;
	border-left: 2px solid var(--bk-musta);
	border-radius: 0;
	background: var(--bk-pohja);
	font-family: var(--bk-teksti-fontti);
	font-size: 0.92rem;
	color: var(--bk-teksti);
}

.woocommerce-error {
	border-left-color: var(--bk-korostus);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--bk-musta);
}

.woocommerce-error::before {
	color: var(--bk-korostus);
}

/* =============================================================
   7. Ostoskori ja kassa
   ============================================================= */

.woocommerce table.shop_table {
	border: 0;
	border-top: 2px solid var(--bk-viiva-vahva);
	border-radius: 0;
	border-collapse: collapse;
}

.woocommerce table.shop_table th {
	padding: 14px 12px;
	border-bottom: 1px solid var(--bk-viiva);
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bk-musta);
}

.woocommerce table.shop_table td {
	padding: 16px 12px;
	border-top: 0;
	border-bottom: 1px solid var(--bk-viiva);
	font-variant-numeric: tabular-nums;
}

/* Merkkaustiedot koririvillä luetaan kuin työmääräin. */
.woocommerce table.shop_table td.product-name dl.variation,
.wc-block-components-product-details {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--bk-harmaa);
}

.woocommerce table.shop_table td.product-name dl.variation dt,
.wc-block-components-product-details__name {
	float: none;
	margin: 0;
	padding: 0;
	font-weight: 400;
	color: #8a8580;
}

.woocommerce table.shop_table td.product-name dl.variation dd {
	margin: 0 0 3px;
	padding: 0;
	color: var(--bk-teksti);
}

.woocommerce table.shop_table td.product-name dl.variation dd p {
	margin: 0;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	margin-bottom: 14px;
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: 1.05rem;
	letter-spacing: -0.005em;
	color: var(--bk-musta);
}

.woocommerce-checkout .form-row label,
.wc-block-components-text-input label {
	font-family: var(--bk-teksti-fontti);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--bk-musta);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	height: auto;
	min-height: 48px;
	padding: 12px;
	border: 1px solid var(--bk-viiva);
	border-radius: 0;
	font-family: var(--bk-teksti-fontti);
	background: #fff;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: 0;
	border-color: var(--bk-musta);
	box-shadow: inset 0 0 0 1px var(--bk-musta);
}

.woocommerce-checkout #payment {
	border-radius: 0;
	background: var(--bk-pohja);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--bk-viiva);
}

.woocommerce-checkout #payment div.payment_box {
	border-radius: 0;
	background: #fff;
	font-size: 0.87rem;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #fff;
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td,
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
	font-weight: 600;
	color: var(--bk-musta);
	font-variant-numeric: tabular-nums;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td,
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td {
	padding-top: 16px;
	border-top: 2px solid var(--bk-viiva-vahva);
	font-size: 1.1rem;
}

/* Aloitusmaksurivi erottuu, jottei se näytä yllätykseltä. */
.woocommerce .cart-subtotal + tr.fee th,
.woocommerce tr.fee th {
	font-weight: 600;
	color: var(--bk-musta);
}

/* Lohkopohjainen kori ja kassa */
.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	color: var(--bk-musta);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item {
	color: var(--bk-musta);
}

.wc-block-components-checkout-place-order-button {
	border-radius: 3px;
	background: var(--bk-korostus);
}

.wc-block-components-checkout-place-order-button:hover {
	background: var(--bk-korostus-tumma);
}

/* =============================================================
   8. Oma tili
   ============================================================= */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--bk-viiva-vahva);
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--bk-viiva);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 14px 12px;
	font-family: var(--bk-teksti-fontti);
	font-size: 0.92rem;
	color: var(--bk-teksti);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--bk-pohja);
	color: var(--bk-musta);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--bk-musta);
	color: #fff;
	font-weight: 600;
}

/* =============================================================
   9. Pienet näytöt
   ============================================================= */

@media (max-width: 782px) {
	.bk-tapa {
		grid-template-columns: 2.1rem 1fr;
		grid-template-areas:
			"numero nimi"
			".      hinta"
			".      kuvaus";
		row-gap: 4px;
	}

	.bk-tapa__hinta {
		text-align: left;
	}

	.woocommerce div.product form.cart .single_add_to_cart_button,
	.woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
		flex: 1 1 100% !important;
		width: 100% !important;
		min-width: 0;
	}
}


/* =============================================================
   10. Otsikkofontti ja reunojen tasaus
   ============================================================= */

/*
 * Bebas Neue on pelkkiä versaaleja ja kapea. Sitä käytetään vain
 * otsikoissa ja osiotunnisteissa, ei leipätekstissä eikä lomakkeen
 * labeleissa — pitkä suomenkielinen teksti versaalina on raskasta luettavaa.
 */
.woocommerce div.product .product_title,
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
.wc-block-components-title {
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	letter-spacing: var(--bk-otsikko-valjennys);
	line-height: 1.14;
}

/* Tuotelistan nimet pysyvät leipätekstifontilla: ne ovat pitkiä ja
   sisältävät tuotekoodeja, jotka versaalina menevät puuroksi. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bk-teksti-fontti);
}

.bk-merkkaus__merkki {
	letter-spacing: 0.14em;
}

/*
 * Reunojen tasaus. Elementorin laatikoitu kontti menee kapealla näytöllä
 * kiinni vasempaan reunaan, jolloin teksti liimautuu ruudun laitaan.
 * Tämä takaa marginaalin kaikille kaupan sivuille myös silloin,
 * kun sisältö tulee WooCommercen omasta mallista.
 */
@media (max-width: 767px) {
	.woocommerce-cart .site-main,
	.woocommerce-checkout .site-main,
	.woocommerce-account .site-main,
	.single-product .site-main,
	.post-type-archive-product .site-main,
	.tax-product_cat .site-main,
	.woocommerce .woocommerce-notices-wrapper {
		padding-left: 18px;
		padding-right: 18px;
		box-sizing: border-box;
	}

	.bk-merkkaus {
		margin-left: 0;
		margin-right: 0;
	}
}

/* =============================================================
   11. Vähimmäistilausmäärä
   ============================================================= */

.bk-tapa__minimi {
	display: block;
	margin-top: 2px;
	font-weight: 600;
	color: var(--bk-musta);
}

.bk-tapa:has( input:checked ) .bk-tapa__minimi {
	color: #fff;
}

.bk-minimi-huomio {
	margin: 0 0 18px;
	padding: 11px 13px;
	background: var(--bk-pohja);
	border-left: 2px solid var(--bk-korostus);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--bk-teksti);
}

.bk-minimi-huomio strong {
	color: var(--bk-musta);
}

/* =============================================================
   12. Elementorin ostoskori-elementti
   Elementorin oma tyylitys voittaa yleiset saannot, joten
   nama valitsimet nimeavat widgetin suoraan.
   ============================================================= */

.elementor-widget-woocommerce-cart .e-cart-section,
.elementor-widget-woocommerce-cart .cart_totals,
.elementor-widget-woocommerce-cart .e-coupon-box {
	border: 1px solid var(--bk-viiva);
	border-radius: 0;
	background: #fff;
}

.elementor-widget-woocommerce-cart .cart_totals {
	border-top: 2px solid var(--bk-viiva-vahva);
}

/* Kassalle-nappi oli WooCommercen oletussininen. */
.elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.elementor-widget-woocommerce-cart a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	padding: 16px 24px;
	border: 0;
	border-radius: 3px;
	background: var(--bk-korostus);
	color: #fff;
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-s);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--bk-korostus-tumma);
	color: #fff;
}

/* Paivita ostoskori on toissijainen toiminto. */
.elementor-widget-woocommerce-cart button[name="update_cart"],
.elementor-widget-woocommerce-cart .actions .button {
	background: transparent;
	border: 1px solid var(--bk-viiva-vahva);
	color: var(--bk-musta);
	font-weight: 600;
}

.elementor-widget-woocommerce-cart button[name="update_cart"]:disabled {
	border-color: var(--bk-viiva);
	color: #a8a39e;
	opacity: 1;
}

.elementor-widget-woocommerce-cart .cart_totals h2,
.elementor-widget-woocommerce-cart .e-cart-section h2 {
	margin: 0 0 14px;
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: 1.3rem;
	letter-spacing: var(--bk-otsikko-valjennys);
	color: var(--bk-musta);
}

.elementor-widget-woocommerce-cart .product-remove a.remove {
	color: var(--bk-harmaa) !important;
	font-size: 1.2rem;
}

.elementor-widget-woocommerce-cart .product-remove a.remove:hover {
	background: transparent !important;
	color: var(--bk-korostus) !important;
}

.elementor-widget-woocommerce-cart .product-name a {
	color: var(--bk-musta);
	font-weight: 600;
	text-decoration: none;
}

.elementor-widget-woocommerce-cart .product-name a:hover {
	text-decoration: underline;
}

/* =============================================================
   13. Lohkopohjainen kassa
   ============================================================= */

.wc-block-checkout__form,
.wp-block-woocommerce-checkout {
	font-family: var(--bk-teksti-fontti);
}

.wc-block-components-checkout-step__title,
.wc-block-components-title.wc-block-components-title {
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	letter-spacing: var(--bk-otsikko-valjennys);
	color: var(--bk-musta);
}

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox input,
.wc-block-components-country-input input,
.wc-block-components-state-input input {
	border-radius: 0 !important;
	border-color: var(--bk-viiva) !important;
	font-family: var(--bk-teksti-fontti);
}

.wc-block-components-text-input.is-active input:focus,
.wc-block-components-textarea:focus {
	outline: 0;
	border-color: var(--bk-musta) !important;
	box-shadow: inset 0 0 0 1px var(--bk-musta);
}

.wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block {
	border: 1px solid var(--bk-viiva);
	border-top: 2px solid var(--bk-viiva-vahva);
	border-radius: 0;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--bk-teksti-fontti);
	font-variant-numeric: tabular-nums;
	color: var(--bk-musta);
}

.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button:not(:disabled) {
	border-radius: 3px;
	background: var(--bk-korostus);
	font-family: var(--bk-teksti-fontti);
	font-weight: 600;
}

.wc-block-components-checkout-place-order-button:hover:not(:disabled) {
	background: var(--bk-korostus-tumma);
}

/* Merkkaustiedot koririvilla ja yhteenvedossa */
.wc-block-components-product-details__name {
	font-weight: 400;
	color: #8a8580;
}

.wc-block-components-product-details {
	margin-top: 6px;
	font-size: 0.8rem;
	line-height: 1.5;
}

/* Virheilmoitus maksutavoista ei saa nayttaa rikkinaiselta */
.wc-block-components-notice-banner.is-error {
	border-radius: 0;
	border-left: 2px solid var(--bk-korostus);
	font-family: var(--bk-teksti-fontti);
}

/* =============================================================
   14. Luottamusrivi
   Teksti mustana, vain merkki korostusvarilla. Kokonaan
   varillinen tekstirivi nayttaa halvalta.
   ============================================================= */

.woocommerce .elementor-icon-list-item,
.elementor-widget-icon-list .elementor-icon-list-text {
	color: var(--bk-teksti);
}

.elementor-widget-icon-list .elementor-icon-list-icon svg,
.elementor-widget-icon-list .elementor-icon-list-icon i {
	color: var(--bk-korostus);
	fill: var(--bk-korostus);
}

/* =============================================================
   15. Sivujen osiot
   Näitä luokkia käytetään etusivulla ja kaupan laskeutumissivulla.
   Sisältö tulee Elementorin text-editor -elementeistä, joten
   tekstiä voi muokata muokkaimessa ilman koodia.
   ============================================================= */

.bk-osiolabel {
	display: block;
	margin: 0 0 10px;
	font-family: var(--bk-teksti-fontti);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bk-harmaa);
}

.bk-osiotunniste {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 18px;
	padding-top: 16px;
	border-top: 2px solid var(--bk-viiva-vahva);
}

.bk-osiotunniste__nro {
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--bk-harmaa);
}

.bk-osiotunniste__nimi {
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: clamp( 1.9rem, 3.4vw, 2.6rem );
	line-height: 1.14;
	letter-spacing: var(--bk-otsikko-valjennys);
	color: var(--bk-musta);
}

.bk-ingressi {
	font-size: 1.18rem;
	line-height: 1.55;
	max-width: 44ch;
}

.bk-iso-numero {
	margin: 0 0 4px;
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: 2.6rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.bk-iso-linkki {
	margin: 0 0 18px;
	font-size: clamp( 1.2rem, 2.2vw, 1.6rem );
	font-weight: 600;
	word-break: break-word;
}

.bk-iso-linkki a {
	color: var(--bk-musta);
	text-decoration: none;
	box-shadow: inset 0 -2px 0 var(--bk-korostus);
}

.bk-iso-linkki a:hover {
	background: var(--bk-korostus);
	color: #fff;
	box-shadow: none;
}

.bk-pikkuteksti {
	margin: 16px 0 0;
	font-size: 0.85rem;
	line-height: 1.6;
}

.bk-kuvapaikka {
	margin: 0;
	font-size: var(--brd-xs);
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Kaksisarakkeinen tietolista */
.bk-speksit {
	width: 100%;
	margin: 0;
	border: 0;
	border-top: 2px solid var(--bk-viiva-vahva);
	border-collapse: collapse;
	font-size: var(--brd-s);
}

.bk-speksit th,
.bk-speksit td {
	padding: 13px 0;
	border-bottom: 1px solid var(--bk-viiva);
	vertical-align: baseline;
}

.bk-speksit th {
	text-align: left;
	font-weight: 400;
	color: var(--bk-harmaa);
}

.bk-speksit td {
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--bk-musta);
}

/* Vertailutaulukko
   Kaksi merkkaustapaa rinnakkain. Otsikkopalkki on musta negatiivi,
   sama keino kuin valitussa rivissä muualla kaupassa.

   Mobiilissa taulukko puretaan pinoksi ja jokainen arvo saa nimensä
   data-label-attribuutista. Ilman sitä riviltä lukisi vain
   "Vähimmäismäärä / 4 kpl / 10 kpl" eikä kumpi on kumpi kävisi ilmi. */

.bk-vertailu {
	width: 100%;
	margin: 0;
	table-layout: fixed;
	border: 0;
	border-collapse: collapse;
	background: #fff;
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-s);
	line-height: 1.55;
	color: var(--bk-teksti);
}

.bk-vertailu th,
.bk-vertailu td {
	padding: 15px 18px 15px 0;
	border: 0;
	border-bottom: 1px solid var(--bk-viiva);
	text-align: left;
	vertical-align: top;
	background: transparent;
}

/* Otsikkorivi: musta palkki, valkoinen versaaliteksti. */
.bk-vertailu thead th {
	padding: 13px 18px 13px 12px;
	border-bottom: 0;
	background: var(--bk-musta);
	color: #fff;
	font-family: var(--bk-teksti-fontti);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* table-layout: fixed lukee leveydet ensimmaisen rivin soluista.
   Nimisarakkeen otsikko on tyhja td, ei th, joten valitaan solu
   tyypista riippumatta. */
.bk-vertailu thead tr > *:first-child {
	width: 11.5rem;
	background: transparent;
	border-bottom: 0;
}

/* Rivin nimi erottuu lämpimällä pohjalla, ei viileällä harmaalla. */
.bk-vertailu tbody th {
	padding-left: 12px;
	background: var(--bk-pohja);
	font-weight: 600;
	color: var(--bk-musta);
}

.bk-vertailu tbody tr:last-child th,
.bk-vertailu tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 767px) {
	.bk-vertailu,
	.bk-vertailu tbody,
	.bk-vertailu tr,
	.bk-vertailu th,
	.bk-vertailu td {
		display: block;
		width: auto;
	}

	.bk-vertailu {
		table-layout: auto;
		border-top: 2px solid var(--bk-viiva-vahva);
	}

	.bk-vertailu thead {
		display: none;
	}

	.bk-vertailu tbody tr {
		padding-bottom: 14px;
		border-bottom: 1px solid var(--bk-viiva);
	}

	.bk-vertailu tbody tr:last-child {
		border-bottom: 0;
	}

	.bk-vertailu tbody th {
		margin-bottom: 10px;
		padding: 9px 12px;
		border-bottom: 0;
		font-size: 0.74rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.bk-vertailu tbody td {
		padding: 0 0 10px 12px;
		border-bottom: 0;
	}

	.bk-vertailu tbody td:last-child {
		padding-bottom: 0;
	}

	/* Arvon nimi tulee data-label-attribuutista. */
	.bk-vertailu tbody td::before {
		content: attr( data-label );
		display: block;
		margin-bottom: 1px;
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--bk-harmaa);
	}
}

/* Merkkirivi */
.bk-merkkirivi {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 32px;
	margin: 0;
}

.bk-merkkirivi span {
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: 1.4rem;
	letter-spacing: var(--bk-otsikko-valjennys);
	color: var(--bk-musta);
	opacity: 0.62;
}

.bk-cta-yhteys a {
	color: #fff;
	text-decoration: underline;
}

/* =============================================================
   16. Hinta-arvio
   Kolme valintaa, portaat säätimenä ja yksi lopputulos. Hinta
   muuttuu portaittain, joten portaat ovat itse säädin — erillinen
   liukusäädin lupasi portaatonta hintaa, jota ei ole olemassa.
   ============================================================= */

/* HUOM. Talla oli aiemmin container-type: inline-size, jotta laskuri
   olisi mukautunut oman lohkonsa leveyteen. Kaytannossa se tuotti
   mobiilissa 793 pikselia haamukorkeutta: kysely muutti asettelun
   yksipalstaiseksi, mutta korkeus jai ensimmaisen mittauksen mukaiseksi.
   Laskuri on aina osion levyinen, joten laitepisteet riittavat. */
.bk-arvio-kehys {
	display: block;
}

.bk-arvio {
	--bk-arvio-viiva: var(--bk-viiva, #DED7D6);
	display: flex;
	flex-direction: column;
	gap: 26px;
	font-family: var(--brd-leipa, inherit);
}

.bk-arvio *,
.bk-arvio *::before,
.bk-arvio *::after { box-sizing: border-box; }

/* --- Valinnat --------------------------------------------------------- */

.bk-arvio__valinnat {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 28px;
	margin: 0;
	padding: 0;
	border: 0;
}

.bk-arvio__kentta {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.bk-arvio__label {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	font-size: var(--brd-xs, 12px);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bk-harmaa, #6B6B6B);
}

.bk-arvio__napit {
	display: flex;
	gap: 0;
	border: 1px solid var(--bk-musta, #0E0E0E);
}

.bk-arvio__nappi {
	flex: 1 1 0;
	position: relative;
	min-width: 0;
}

.bk-arvio__nappi input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.bk-arvio__nappi span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 14px;
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: var(--brd-m, 20px);
	letter-spacing: .04em;
	color: var(--bk-musta, #0E0E0E);
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.bk-arvio__nappi + .bk-arvio__nappi span { border-left: 1px solid var(--bk-musta, #0E0E0E); }

.bk-arvio__nappi span:hover { background: var(--bk-vaalea, #F2F1EF); }

.bk-arvio__nappi input:checked + span {
	background: var(--bk-musta, #0E0E0E);
	color: #fff;
}

.bk-arvio__nappi input:focus-visible + span {
	outline: 2px solid var(--bk-korostus, #7D1B2E);
	outline-offset: 2px;
}

.bk-arvio__vihje {
	margin: 8px 0 0;
	font-size: var(--brd-xs, 12px);
	line-height: 1.45;
	color: var(--bk-harmaa, #6B6B6B);
	min-height: 2.9em;
}

/* --- Määrä ------------------------------------------------------------- */

.bk-arvio__maara {
	display: flex;
	border: 1px solid var(--bk-musta, #0E0E0E);
}

.bk-arvio__askel {
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	border: 0;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	color: var(--bk-musta, #0E0E0E);
	cursor: pointer;
	transition: background .18s ease;
}

.bk-arvio__askel:hover { background: var(--bk-vaalea, #F2F1EF); }

.bk-arvio__numero {
	width: 92px;
	height: 52px;
	border: 0;
	border-left: 1px solid var(--bk-viiva, #DED7D6);
	border-right: 1px solid var(--bk-viiva, #DED7D6);
	background: transparent;
	text-align: center;
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: var(--brd-l, 26px);
	font-variant-numeric: tabular-nums;
	color: var(--bk-musta, #0E0E0E);
	-moz-appearance: textfield;
}

.bk-arvio__numero::-webkit-outer-spin-button,
.bk-arvio__numero::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bk-arvio__numero:focus-visible { outline: 2px solid var(--bk-korostus, #7D1B2E); outline-offset: -2px; }

/* --- Portaat säätimenä -------------------------------------------------- */

.bk-arvio__portaat {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}

.bk-arvio__porras {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--bk-arvio-viiva);
	background: transparent;
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.bk-arvio__porras:hover {
	border-color: var(--bk-musta, #0E0E0E);
	transform: translateY(-2px);
}

.bk-arvio__porras--nyt {
	background: var(--bk-musta, #0E0E0E);
	border-color: var(--bk-musta, #0E0E0E);
}

.bk-arvio__porras-vali {
	font-size: var(--brd-xs, 12px);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bk-harmaa, #6B6B6B);
}

.bk-arvio__porras-hinta {
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: var(--brd-m, 20px);
	font-variant-numeric: tabular-nums;
	color: var(--bk-musta, #0E0E0E);
}

.bk-arvio__porras--nyt .bk-arvio__porras-vali { color: rgba(255, 255, 255, .68); }
.bk-arvio__porras--nyt .bk-arvio__porras-hinta { color: #fff; }

/* --- Nosto seuraavaan portaaseen ---------------------------------------- */

.bk-arvio__nosto {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 0;
	padding: 14px 18px;
	background: var(--bk-vaalea, #F2F1EF);
	border-left: 3px solid var(--bk-korostus, #7D1B2E);
	font-size: var(--brd-s, 15px);
	line-height: 1.45;
}

.bk-arvio__nosto strong { color: var(--bk-musta, #0E0E0E); }

.bk-arvio__nostonappi {
	padding: 8px 16px;
	border: 1px solid var(--bk-musta, #0E0E0E);
	background: transparent;
	font-family: var(--brd-leipa, inherit);
	font-size: var(--brd-xs, 12px);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.bk-arvio__nostonappi:hover { background: var(--bk-musta, #0E0E0E); color: #fff; }

/* --- Tulos -------------------------------------------------------------- */

.bk-arvio__tulos {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: end;
	gap: 28px 40px;
	padding-top: 26px;
	border-top: 2px solid var(--bk-musta, #0E0E0E);
}

.bk-arvio__erittely {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 36px;
}

.bk-arvio__erä {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bk-arvio__erä-nimi {
	font-size: var(--brd-xs, 12px);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bk-harmaa, #6B6B6B);
}

.bk-arvio__erä-arvo {
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: var(--brd-m, 20px);
	font-variant-numeric: tabular-nums;
	color: var(--bk-musta, #0E0E0E);
}

.bk-arvio__erä-lisa {
	font-size: var(--brd-xs, 12px);
	color: var(--bk-harmaa, #6B6B6B);
}

.bk-arvio__erä--tuote .bk-arvio__erä-arvo { color: var(--bk-harmaa, #6B6B6B); }

.bk-arvio__summa {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: right;
}

.bk-arvio__summa-nimi {
	font-size: var(--brd-xs, 12px);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bk-harmaa, #6B6B6B);
}

.bk-arvio__summa-arvo {
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: clamp(34px, 3.6vw, 52px);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--bk-musta, #0E0E0E);
}

.bk-arvio__summa-lisa {
	font-size: var(--brd-xs, 12px);
	color: var(--bk-harmaa, #6B6B6B);
}

.bk-arvio__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 30px;
	background: var(--bk-korostus, #7D1B2E);
	color: #fff !important;
	font-family: var(--brd-leipa, inherit);
	font-size: var(--brd-xs, 13px);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s ease;
}

.bk-arvio__cta::after { content: "→"; transition: transform .25s ease; }
.bk-arvio__cta:hover { background: var(--bk-musta, #0E0E0E); color: #fff !important; }
.bk-arvio__cta:hover::after { transform: translateX(4px); }

.bk-arvio__pikkuteksti {
	margin: 0;
	max-width: 68ch;
	font-size: var(--brd-xs, 12px);
	line-height: 1.5;
	color: var(--bk-harmaa, #6B6B6B);
}

.bk-arvio__live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Luku vaihtuu pehmeästi, jotta silmä huomaa mikä muuttui. */
.bk-arvio--vaihtui { animation: bk-arvio-vaihto .32s ease; }

@keyframes bk-arvio-vaihto {
	from { opacity: .25; transform: translateY(-3px); }
	to { opacity: 1; transform: none; }
}

/* --- Kapeampi lohko ----------------------------------------------------- */

@media (max-width: 1024px) {
	.bk-arvio__valinnat { grid-template-columns: 1fr 1fr; }
	.bk-arvio__kentta--maara { grid-column: 1 / -1; }
	.bk-arvio__portaat { grid-template-columns: repeat(3, 1fr); }
	.bk-arvio__tulos { grid-template-columns: 1fr; align-items: start; gap: 22px; }
	.bk-arvio__summa { text-align: left; }
	.bk-arvio__cta { width: 100%; }
}

@media (max-width: 640px) {
	.bk-arvio__valinnat { grid-template-columns: 1fr; gap: 20px; }
	.bk-arvio__vihje { min-height: 0; }
	.bk-arvio__portaat { grid-template-columns: repeat(2, 1fr); }
	.bk-arvio__nappi span { font-size: var(--brd-s, 17px); }
	.bk-arvio__erittely { gap: 12px 24px; }

	/* Napin teksti ei mahdu yhdelle riville kapealla naytolla. */
	.bk-arvio__cta {
		white-space: normal;
		text-align: center;
		padding: 16px 20px;
		line-height: 1.3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bk-arvio--vaihtui { animation: none; }
	.bk-arvio__porras:hover { transform: none; }
}

/* =============================================================
   17. Ostoskorisivu
   WooCommercen oma kori lyhytkoodilla. Elementor Pron
   ostoskori-elementti korvattiin, koska sen tekstit ja värit
   tulivat widgetin omista oletuksista eikä niitä tavoittanut
   käännöksellä eikä tyylitiedostolla.
   ============================================================= */

.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax( 0, 1.7fr ) minmax( 300px, 1fr );
	gap: 24px 48px;
	align-items: start;
}

.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .cart-empty,
.woocommerce-cart .woocommerce > .return-to-shop {
	grid-column: 1 / -1;
}

.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals {
	width: 100%;
	margin: 0;
	float: none;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
}

@media (max-width: 900px) {
	.woocommerce-cart .woocommerce {
		grid-template-columns: 1fr;
	}
}

/* Tuotetaulukko */
.woocommerce-cart table.cart {
	width: 100%;
	margin: 0;
	border: 0;
	border-top: 2px solid var(--bk-viiva-vahva);
	border-collapse: collapse;
}

.woocommerce-cart table.cart thead th {
	padding: 12px 12px 12px 0;
	border-bottom: 1px solid var(--bk-viiva);
	background: transparent;
	font-family: var(--bk-teksti-fontti);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bk-harmaa);
	text-align: left;
}

.woocommerce-cart table.cart tbody td {
	padding: 18px 12px 18px 0;
	border-top: 0;
	border-bottom: 1px solid var(--bk-viiva);
	background: transparent;
	vertical-align: top;
	font-variant-numeric: tabular-nums;
}

.woocommerce-cart table.cart td.product-remove {
	width: 32px;
	padding-right: 8px;
}

.woocommerce-cart table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 0;
	background: transparent !important;
	color: var(--bk-harmaa) !important;
	font-size: 1.4rem;
	line-height: 1;
}

.woocommerce-cart table.cart td.product-remove a.remove:hover {
	background: var(--bk-musta) !important;
	color: #fff !important;
}

.woocommerce-cart table.cart td.product-thumbnail {
	width: 88px;
	padding-right: 16px;
}

.woocommerce-cart table.cart td.product-thumbnail img {
	width: 72px;
	height: auto;
	border: 1px solid var(--bk-viiva);
}

.woocommerce-cart table.cart td.product-name a {
	color: var(--bk-musta);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-cart table.cart td.product-name a:hover {
	text-decoration: underline;
}

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
	white-space: nowrap;
	color: var(--bk-musta);
}

.woocommerce-cart table.cart td.product-subtotal {
	font-weight: 600;
	text-align: right;
}

.woocommerce-cart table.cart th.product-subtotal {
	text-align: right;
}

.woocommerce-cart table.cart td.product-quantity input.qty {
	width: 4.2rem;
	height: 44px;
	padding: 0 6px;
	border: 1px solid var(--bk-viiva-vahva);
	border-radius: 0;
	font-family: var(--bk-teksti-fontti);
	font-variant-numeric: tabular-nums;
	text-align: center;
	background: #fff;
	color: var(--bk-musta);
}

/* Alennuskoodi ja päivitys samalla rivillä */
.woocommerce-cart table.cart td.actions {
	padding: 20px 0 0;
	border-bottom: 0;
	text-align: left;
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	float: none;
	margin-bottom: 12px;
	padding: 0;
	border: 0;
}

.woocommerce-cart table.cart td.actions .coupon label {
	display: none;
}

.woocommerce-cart table.cart td.actions .coupon input#coupon_code {
	width: auto;
	min-width: 12rem;
	height: 46px;
	padding: 0 12px;
	border: 1px solid var(--bk-viiva);
	border-radius: 0;
	font-family: var(--bk-teksti-fontti);
	background: #fff;
}

.woocommerce-cart table.cart td.actions .coupon input#coupon_code:focus {
	outline: 0;
	border-color: var(--bk-musta);
}

.woocommerce-cart table.cart td.actions .button {
	height: 46px;
	padding: 0 22px;
	border-radius: 3px;
	font-size: 0.92rem;
}

/* Molemmat toissijaisia: ostonappi on yhteenvedossa. */
.woocommerce-cart table.cart td.actions button[name="apply_coupon"],
.woocommerce-cart table.cart td.actions button[name="update_cart"] {
	background: transparent;
	border: 1px solid var(--bk-viiva-vahva);
	color: var(--bk-musta);
	font-weight: 600;
}

.woocommerce-cart table.cart td.actions button[name="apply_coupon"]:hover,
.woocommerce-cart table.cart td.actions button[name="update_cart"]:hover {
	background: var(--bk-musta);
	color: #fff;
}

.woocommerce-cart table.cart td.actions button[name="update_cart"]:disabled {
	border-color: var(--bk-viiva);
	color: #a8a39e;
	opacity: 1;
	cursor: default;
}

/* Yhteenveto */
.woocommerce-cart .cart_totals {
	padding: 22px;
	border: 1px solid var(--bk-viiva);
	border-top: 2px solid var(--bk-viiva-vahva);
	background: #fff;
}

.woocommerce-cart .cart_totals h2 {
	margin: 0 0 14px;
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: 1.3rem;
	letter-spacing: var(--bk-otsikko-valjennys);
	color: var(--bk-musta);
}

.woocommerce-cart .cart_totals table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	padding: 12px 0;
	border-top: 1px solid var(--bk-viiva);
	border-bottom: 0;
	background: transparent;
	font-size: var(--brd-s);
	font-variant-numeric: tabular-nums;
}

.woocommerce-cart .cart_totals table th {
	width: 50%;
	/* Nollaa osion 7 mikrolabel-tyyli: summarivien nimet ovat
	   normaalia tekstia, eivat versaaleja taulukko-otsikoita. */
	font-size: var(--brd-s);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: var(--bk-harmaa);
}

.woocommerce-cart .cart_totals table td {
	text-align: right;
	font-weight: 600;
	color: var(--bk-musta);
}

.woocommerce-cart .cart_totals table tr.order-total th,
.woocommerce-cart .cart_totals table tr.order-total td {
	padding-top: 16px;
	border-top: 2px solid var(--bk-viiva-vahva);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--bk-musta);
}

/* Aloitusmaksurivi ei saa näyttää yllätykseltä */
.woocommerce-cart .cart_totals tr.fee th {
	color: var(--bk-musta);
	font-weight: 600;
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 20px 0 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 16px 24px;
	border: 0;
	border-radius: 3px;
	background: var(--bk-korostus);
	color: #fff;
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-s);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--bk-korostus-tumma);
	color: #fff;
}

/* Merkkaustiedot koririvillä */
.woocommerce-cart table.cart td.product-name dl.variation {
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	font-size: 0.8rem;
	line-height: 1.55;
}

.woocommerce-cart table.cart td.product-name dl.variation dt {
	float: none;
	clear: none;
	display: inline;
	margin: 0;
	padding: 0;
	font-weight: 400;
	color: #8a8580;
}

.woocommerce-cart table.cart td.product-name dl.variation dd {
	display: inline;
	margin: 0 0 0 4px;
	padding: 0;
	color: var(--bk-teksti);
}

.woocommerce-cart table.cart td.product-name dl.variation dd::after {
	content: '';
	display: block;
	height: 3px;
}

.woocommerce-cart table.cart td.product-name dl.variation dd p {
	display: inline;
	margin: 0;
}

/* =============================================================
   18. Ostoskori pienillä näytöillä
   WooCommercen oma woocommerce-smallscreen.css muuttaa koritaulukon
   pinoksi alle 768 pikselin. Se on lähtökohtaisesti toimiva, mutta
   tekee kolme asiaa, jotka eivät sovi tähän kauppaan:
   piilottaa tuotekuvan, tasaa kaiken oikealle ja jättää
   yhteenvedon rivinimet riippumaan attribuutin varaan.
   ============================================================= */

@media screen and (max-width: 768px) {

	/* --- Tuotekuva takaisin ---
	   Merkattua vaatetta ostetaan silmällä. Ilman kuvaa asiakas ei
	   mobiilissa näe lainkaan mitä on tilaamassa. */
	.woocommerce-cart table.cart td.product-thumbnail {
		display: block !important;
		width: auto;
		padding: 16px 0 0 !important;
		text-align: left !important;
		border-bottom: 0 !important;
	}

	.woocommerce-cart table.cart td.product-thumbnail::before {
		display: none !important;
	}

	.woocommerce-cart table.cart td.product-thumbnail img {
		width: 88px;
		border: 1px solid var(--bk-viiva);
	}

	/* --- Tuotteen nimi ja merkkaustiedot vasemmalle ---
	   Oikealle tasattu monirivinen nimi on hankala lukea, ja
	   merkkaustiedot ovat tässä kaupassa olennaista tietoa. */
	.woocommerce-cart table.cart td.product-name {
		padding-top: 10px !important;
		text-align: left !important;
	}

	.woocommerce-cart table.cart td.product-name::before {
		display: none !important;
	}

	.woocommerce-cart table.cart td.product-name a {
		font-size: var(--brd-s);
	}

	.woocommerce-cart table.cart td.product-name dl.variation {
		margin-top: 8px;
		text-align: left !important;
	}

	.woocommerce-cart table.cart td.product-name dl.variation dt,
	.woocommerce-cart table.cart td.product-name dl.variation dd {
		font-size: 0.82rem;
		text-align: left !important;
	}

	/* --- Rivin muut solut ---
	   Nimi vasemmalle, arvo oikealle samalla rivillä. */
	.woocommerce-cart table.cart td.product-price,
	.woocommerce-cart table.cart td.product-quantity,
	.woocommerce-cart table.cart td.product-subtotal {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		padding: 12px 0 !important;
		text-align: right !important;
	}

	.woocommerce-cart table.cart td.product-price::before,
	.woocommerce-cart table.cart td.product-quantity::before,
	.woocommerce-cart table.cart td.product-subtotal::before {
		float: none !important;
		font-weight: 400;
		color: var(--bk-harmaa);
	}

	.woocommerce-cart table.cart td.product-quantity .quantity {
		margin: 0;
	}

	/* --- Yhteenvedon rivinimet ---
	   WooCommerce piilottaa th-solun ja tuo nimen data-title-attribuutista.
	   Ilman näitä sääntöjä riville jää pelkkä kaksoispiste ja summa. */
	.woocommerce-cart .cart_totals table tr {
		display: block;
	}

	.woocommerce-cart .cart_totals table th {
		display: none !important;
	}

	.woocommerce-cart .cart_totals table td {
		display: flex !important;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		padding: 12px 0 !important;
		text-align: right !important;
	}

	.woocommerce-cart .cart_totals table td::before {
		content: attr(data-title) !important;
		float: none !important;
		font-weight: 400;
		color: var(--bk-harmaa);
		text-align: left;
	}

	/* Taulukko on mobiilissa vain lohkopino, mutta se on yhä display:table.
	   Silloin selain leventää sen solujen min-content-mittaan: toimitusrivin
	   flex-rivi ei kaareudu, joten yhteenveto venyi 509 pikseliin 375 pikselin
	   näytöllä ja koko ostoskori sai vaakavierityksen. Kiinteä taulukkoasettelu
	   ja kaareutuvat solut pitävät sen ruudun sisällä. */
	.woocommerce-cart .cart_totals table {
		table-layout: fixed;
		width: 100%;
	}

	.woocommerce-cart .cart_totals table td,
	.woocommerce-cart .cart_totals table td > * {
		min-width: 0;
	}

	.woocommerce-cart .cart_totals table td {
		flex-wrap: wrap;
	}

	/* Toimitusrivillä on lista vaihtoehtoja, ei yhtä lukua: nimi omalle
	   rivilleen ja vaihtoehdot allekkain sen alle. */
	.woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals td {
		display: block !important;
		text-align: left !important;
	}

	.woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals td::before {
		display: block;
		margin-bottom: 8px;
	}

	.woocommerce-cart .cart_totals table tr.order-total td {
		padding-top: 16px !important;
		border-top: 2px solid var(--bk-viiva-vahva);
		font-size: 1.15rem;
	}

	.woocommerce-cart .cart_totals table tr.order-total td::before {
		color: var(--bk-musta);
		font-weight: 600;
	}

	/* --- Toiminnot ---
	   Napit täysleveiksi, jotta niitä osuu peukalolla. */
	.woocommerce-cart table.cart td.actions {
		padding-top: 16px !important;
		text-align: left !important;
	}

	.woocommerce-cart table.cart td.actions::before {
		display: none !important;
	}

	.woocommerce-cart table.cart td.actions .coupon {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.woocommerce-cart table.cart td.actions .coupon input#coupon_code,
	.woocommerce-cart table.cart td.actions .button {
		width: 100%;
		min-width: 0;
	}

	.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
		padding: 17px 20px;
		font-size: 1.05rem;
	}

	/* Poistonappi omalle rivilleen oikeaan reunaan */
	.woocommerce-cart table.cart td.product-remove {
		display: block !important;
		width: auto;
		padding: 12px 0 0 !important;
		text-align: right !important;
		border-bottom: 0 !important;
	}
}

/* ==========================================================================
   19. Merkkauspaikat
   Tuotekohtainen lista: housussa lahje, lippiksessä lippa. Kohtia voi
   valita useamman, joten ruudut eivätkä radiot.
   ========================================================================== */

.bk-paikat {
	border: 0;
	margin: 0 0 1.25rem;
	padding: 0;
	min-width: 0; /* fieldset ei saa venyttää flex-riviä. */
}

.bk-paikat .bk-label {
	padding: 0;
}

.bk-paikat .bk-ohje {
	margin: 0.25rem 0 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--bk-harmaa);
}

.bk-paikkalista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

@media (min-width: 30rem) {
	.bk-paikkalista {
		grid-template-columns: 1fr 1fr;
	}
}

/* Viiva piirretään jokaisen ruudun omalla varjolla, ei ruudukon taustalla.
   Taustatemppu jättäisi parittomalla määrällä viimeisen ruudun tyhjäksi
   harmaaksi laatikoksi. */
.bk-paikka {
	margin: 0;
	background: #fff;
	position: relative;
	box-shadow: 0 0 0 1px var(--bk-viiva);
}

.bk-paikka:hover,
.bk-paikka:has( .bk-paikka__valinta:checked ) {
	z-index: 1;
}

.bk-paikka__label {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.7rem 0.85rem;
	cursor: pointer;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.bk-paikka__valinta {
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--bk-korostus);
}

.bk-paikka__nimi {
	flex: 1 1 auto;
}

/* Maksimikoko on tukitietoa: se ei saa kilpailla nimen kanssa. */
.bk-paikka__koko {
	flex: 0 0 auto;
	font-size: 0.75rem;
	color: var(--bk-harmaa);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bk-paikka__label:hover {
	background: var(--bk-pohja);
}

.bk-paikka__valinta:focus-visible {
	outline: 2px solid var(--bk-korostus);
	outline-offset: 2px;
}

.bk-paikka:has(.bk-paikka__valinta:checked) {
	background: var(--bk-pohja);
}

.bk-paikka:has(.bk-paikka__valinta:checked) .bk-paikka__nimi {
	font-weight: 600;
}

.bk-paikat__tyhja {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: var(--bk-korostus-tumma);
}

/* ==========================================================================
   20. Koon ja värin valinta
   Tavallinen tilaus on väri, koko ja määrä. Useamman koon erittely avataan
   erikseen, jottei se ole tiellä silloin kun tilataan yksi tuote.
   ========================================================================== */

.bk-valinta {
	margin: 0 0 1.25rem;
	display: grid;
	gap: 1.15rem;
}

.bk-valinta__ryhma {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.bk-valinta__otsikko {
	display: block;
	padding: 0;
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bk-harmaa);
}

/* Valitun värin nimi otsikon perässä: pallo ei yksin kerro sävyä. */
.bk-valinta__valittu {
	margin-left: 0.5rem;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	color: var(--bk-musta);
}

.bk-varit__lista,
.bk-koot__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.bk-varit__lista li,
.bk-koot__lista li {
	margin: 0;
}

.bk-varit__pallo {
	display: block;
	width: 2.1rem;
	height: 2.1rem;
	padding: 3px;
	border: 1px solid transparent;
	border-radius: 50%;
	cursor: pointer;
	transition: border-color 0.12s ease;
}

.bk-varit__savy {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--bk-pohja);
}

/* Vaalea sävy katoaisi valkoista taustaa vasten ilman omaa reunaa. */
.bk-varit__pallo.on-vaalea .bk-varit__savy {
	box-shadow: inset 0 0 0 1px var(--bk-viiva);
}

.bk-varit__pallo:hover {
	border-color: var(--bk-viiva);
}

.bk-varit__valinta:checked + .bk-varit__pallo {
	border-color: var(--bk-musta);
}

.bk-varit__valinta:focus-visible + .bk-varit__pallo {
	outline: 2px solid var(--bk-korostus);
	outline-offset: 2px;
}

.bk-koot__lista {
	gap: 0.4rem;
}

.bk-koot__nappi {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	min-height: 2.6rem;
	padding: 0 0.7rem;
	border: 1px solid var(--bk-viiva);
	background: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.bk-koot__nappi:hover {
	border-color: var(--bk-harmaa);
}

.bk-koot__valinta:checked + .bk-koot__nappi {
	border-color: var(--bk-musta);
	background: var(--bk-musta);
	color: #fff;
}

.bk-koot__valinta:focus-visible + .bk-koot__nappi {
	outline: 2px solid var(--bk-korostus);
	outline-offset: 2px;
}

.bk-valinta__maara {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.bk-valinta__maara .bk-valinta__otsikko {
	flex: 1 0 100%;
	margin-bottom: 0;
}

.bk-valinta__maara input.qty {
	width: 5rem;
	min-height: 2.6rem;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--bk-viiva);
	font: inherit;
	font-size: var(--brd-s);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.bk-valinta__maara input.qty:focus {
	outline: 2px solid var(--bk-korostus);
	outline-offset: 1px;
}

.bk-valinta__rivihinta {
	font-size: 0.9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--bk-musta);
}

.bk-erittely {
	margin: 0 0 1.25rem;
	border-top: 1px solid var(--bk-viiva);
	border-bottom: 1px solid var(--bk-viiva);
}

.bk-erittely__avaus {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	color: var(--bk-musta);
}

.bk-erittely__avaus::-webkit-details-marker {
	display: none;
}

.bk-erittely__ikoni {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid var(--bk-viiva-vahva);
	font-size: 0.875rem;
	line-height: 1;
}

.bk-erittely[open] .bk-erittely__ikoni {
	background: var(--bk-musta);
	color: #fff;
	font-size: 0;
}

.bk-erittely[open] .bk-erittely__ikoni::before {
	content: "–";
	font-size: 0.875rem;
}

.bk-erittely__ohje {
	margin: 0 0 0.9rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--bk-harmaa);
	max-width: 52ch;
}

.bk-erittely__vieritys {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 0.9rem;
}

.bk-erittely__taulukko {
	border-collapse: collapse;
	width: 100%;
	min-width: 20rem;
	font-size: 0.875rem;
}

.bk-erittely__taulukko th,
.bk-erittely__taulukko td {
	border: 1px solid var(--bk-viiva);
	padding: 0.35rem 0.45rem;
	text-align: center;
	vertical-align: middle;
}

.bk-erittely__taulukko thead th {
	background: var(--bk-pohja);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bk-erittely__taulukko tbody th {
	text-align: left;
	font-weight: 500;
	white-space: nowrap;
	position: sticky;
	left: 0;
	background: #fff;
	z-index: 1;
}

.bk-erittely__kulma {
	text-align: left !important;
	position: sticky;
	left: 0;
	z-index: 2;
}

/* Pieni sävypallo rivin edessä auttaa löytämään oikean värin taulukosta. */
.bk-erittely__savy {
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	margin-right: 0.4rem;
	vertical-align: -1px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.bk-erittely__kentta {
	width: 3rem;
	padding: 0.28rem 0.2rem;
	text-align: center;
	border: 1px solid var(--bk-viiva);
	background: #fff;
	font: inherit;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}

.bk-erittely__kentta::-webkit-outer-spin-button,
.bk-erittely__kentta::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.bk-erittely__kentta:focus {
	outline: 2px solid var(--bk-korostus);
	outline-offset: 1px;
}

.bk-erittely__tyhja {
	color: var(--bk-viiva);
}

.bk-erittely__rivisumma,
.bk-erittely__summa-otsikko {
	font-variant-numeric: tabular-nums;
	color: var(--bk-harmaa);
}

.bk-erittely__rivisumma.on-arvoa {
	color: var(--bk-musta);
	font-weight: 600;
}

.bk-erittely__summa {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0 0 1rem;
	font-size: 0.9375rem;
}

.bk-erittely__summa-nimi {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bk-harmaa);
}

.bk-erittely__kpl {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bk-erittely__hinta {
	margin-left: auto;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Kun erittelyssä on määriä, yksittäisvalinta ei ole enää käytössä. */
.bk-valinta.on-ohitettu {
	opacity: 0.4;
}

/* ==========================================================================
   21. Kauppasivun suodattimet
   Toista sataa tuotetta kuudessa osastossa: ilman rajausta oikean löytäminen
   on selaamista. Suodattimet ovat GET-parametreja, joten linkin voi jakaa.
   ========================================================================== */

.bk-suodattimet {
	margin: 0 0 2rem;
	padding: 0 0 1.25rem;
	border-bottom: 2px solid var(--bk-viiva-vahva);
}

.bk-suodattimet__paa {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.85rem;
}

.bk-suodattimet__otsikko {
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	letter-spacing: var(--bk-otsikko-valjennys);
	font-size: 1.125rem;
	margin: 0;
	color: var(--bk-musta);
}

/* Kytkin on mobiilia varten; leveällä näytöllä suodattimet ovat auki. */
.bk-suodattimet__kytkin {
	display: none;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: 1px solid var(--bk-viiva-vahva);
	padding: 0.4rem 0.8rem;
	font: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
	color: var(--bk-musta);
}

.bk-suodattimet__maara {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.3rem;
	background: var(--bk-korostus);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	border-radius: 999px;
}

.bk-suodattimet__aktiiviset {
	list-style: none;
	margin: 0 0 0.9rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

.bk-suodattimet__aktiiviset li {
	margin: 0;
}

.bk-suodatinmerkki {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.25rem 0.55rem;
	border: 1px solid var(--bk-viiva-vahva);
	background: var(--bk-musta);
	color: #fff;
	font-size: 0.75rem;
	text-decoration: none;
	line-height: 1.4;
}

.bk-suodatinmerkki:hover,
.bk-suodatinmerkki:focus {
	background: var(--bk-korostus);
	border-color: var(--bk-korostus);
	color: #fff;
}

.bk-suodatinmerkki__ryhma {
	opacity: 0.65;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.625rem;
}

.bk-suodatinmerkki__risti {
	font-size: 0.875rem;
	line-height: 1;
}

.bk-suodattimet__tyhjenna {
	font-size: 0.75rem;
	color: var(--bk-harmaa);
	text-decoration: underline;
}

.bk-suodattimet__sisus {
	display: grid;
	gap: 0.75rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	align-items: start;
}

.bk-suodatin {
	border: 1px solid var(--bk-viiva);
	background: #fff;
}

.bk-suodatin__nimi {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 0.7rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	cursor: pointer;
	list-style: none;
	color: var(--bk-musta);
}

.bk-suodatin__nimi::-webkit-details-marker {
	display: none;
}

/* Kolmio kertoo, että ryhmän saa auki. */
.bk-suodatin__nimi::after {
	content: "";
	margin-left: auto;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--bk-harmaa);
	transition: transform 0.15s ease;
}

.bk-suodatin[open] .bk-suodatin__nimi::after {
	transform: rotate(180deg);
}

.bk-suodatin__laskuri {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.1rem;
	height: 1.1rem;
	background: var(--bk-korostus);
	color: #fff;
	font-size: 0.625rem;
	border-radius: 999px;
}

.bk-suodatin__lista {
	list-style: none;
	margin: 0;
	padding: 0 0 0.35rem;
	max-height: 14rem;
	overflow-y: auto;
	border-top: 1px solid var(--bk-viiva);
}

.bk-suodatin__lista li {
	margin: 0;
}

.bk-suodatin__kohta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.32rem 0.7rem;
	font-size: 0.8125rem;
	cursor: pointer;
	line-height: 1.35;
}

.bk-suodatin__kohta:hover {
	background: var(--bk-pohja);
}

.bk-suodatin__kohta input {
	margin: 0;
	accent-color: var(--bk-korostus);
	flex: 0 0 auto;
}

.bk-suodatin__teksti {
	flex: 1 1 auto;
}

.bk-suodatin__luku {
	flex: 0 0 auto;
	font-size: 0.6875rem;
	color: var(--bk-harmaa);
	font-variant-numeric: tabular-nums;
}

.bk-suodatin__hinta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 0.7rem;
	border-top: 1px solid var(--bk-viiva);
	font-size: 0.8125rem;
}

.bk-suodatin__hinta input {
	width: 4.5rem;
	padding: 0.3rem 0.4rem;
	border: 1px solid var(--bk-viiva);
	font: inherit;
	font-size: 0.8125rem;
}

.bk-suodatin__valuutta {
	color: var(--bk-harmaa);
}

.bk-suodattimet__napit {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	grid-column: 1 / -1;
	margin-top: 0.35rem;
}

.bk-suodattimet__hae {
	background: var(--bk-musta);
	color: #fff;
	border: 0;
	padding: 0.6rem 1.4rem;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.bk-suodattimet__hae:hover {
	background: var(--bk-korostus);
}

.bk-suodattimet__nollaa {
	font-size: 0.8125rem;
	color: var(--bk-harmaa);
	text-decoration: underline;
}

@media (max-width: 48rem) {
	.bk-suodattimet__kytkin {
		display: inline-flex;
	}

	/* Mobiilissa palkki on kiinni, kunnes tilaaja avaa sen. */
	.bk-suodattimet__sisus[hidden] {
		display: none;
	}

	.bk-suodattimet__sisus {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   22. Tuotekortit kauppanäkymässä
   Kuvat tulevat eri valmistajilta eri taustoilla ja eri rajauksilla. Kiinteä
   kuvasuhde ja yhteinen pohja saavat ruudukon näyttämään yhtenäiseltä ilman
   että kuvia tarvitsee käsitellä.
   ========================================================================== */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 2rem 1.5rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	text-align: left;
	position: relative;
}

/* Koko kortti on klikattava alue, mutta linkki jää tekstiin: näin
   näppäimistöllä liikkuva näkee mihin kohdistus osuu. */
.woocommerce ul.products li.product > a:first-of-type {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Tuotekuvat ovat toimittajien studiokuvia valkoisella pohjalla. Beige
   laatta jatti niiden ymparille nakyvan valkoisen laatikon, eli kortissa
   oli laatikko laatikon sisalla. Valkoinen laatta ja hiusviiva antavat
   saman rajauksen ilman saumaa. */
.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--bk-viiva);
	padding: 1.75rem;
	margin: 0 0 0.9rem;
	transition: border-color 0.25s ease, transform 0.5s cubic-bezier(.22, .61, .36, 1);
}

.woocommerce ul.products li.product:hover img {
	border-color: var(--bk-musta);
}

.bk-kortti__merkki {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bk-harmaa);
	margin-bottom: 0.2rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	letter-spacing: var(--bk-otsikko-valjennys);
	font-size: 1.0625rem;
	line-height: 1.25;
	margin: 0 0 0.35rem;
	padding: 0;
	color: var(--bk-musta);
}

.woocommerce ul.products li.product .price {
	display: block;
	font-size: var(--brd-s);
	font-weight: 600;
	color: var(--bk-musta);
	margin: 0 0 0.25rem;
	font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price del {
	opacity: 0.5;
	font-weight: 400;
	margin-right: 0.35rem;
}

/* Tässä kaupassa ostetaan merkattu tuote, joten kortin pitää kertoa
   merkkaustapa ja vähimmäismäärä jo ennen klikkausta. */
.bk-kortti__merkkaus {
	display: block;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--bk-harmaa);
	margin-bottom: 0.7rem;
}

.woocommerce ul.products li.product .button {
	margin-top: auto;
	align-self: start;
	background: transparent;
	color: var(--bk-musta);
	border: 1px solid var(--bk-viiva-vahva);
	padding: 0.55rem 1.1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	border-radius: 0;
	text-decoration: none;
	transition: background 0.12s ease, color 0.12s ease;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus {
	background: var(--bk-musta);
	color: #fff;
}

/* Tuloslaskuri ja lajittelu samalle riville. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 1.5rem;
}

.woocommerce .woocommerce-result-count {
	font-size: 0.8125rem;
	color: var(--bk-harmaa);
}

.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--bk-viiva);
	padding: 0.45rem 0.6rem;
	font-size: 0.8125rem;
	background: #fff;
	border-radius: 0;
}

@media (max-width: 30rem) {
	.woocommerce ul.products {
		grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
		gap: 1.5rem 0.9rem;
	}

	.woocommerce ul.products li.product img {
		padding: 0.75rem;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.9375rem;
	}

	.woocommerce ul.products li.product .button {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* ==========================================================================
   Kategoria- ja brändisivun ingressi ja kysymykset
   Ingressi on lyhyt: se kertoo heti mitä osastossa on, eikä työnnä
   tuotteita ruudun alapuolelle. Kysymykset ovat tuotteiden alla, koska
   ostaja haluaa ensin nähdä valikoiman.
   ========================================================================== */

.bk-ingressi {
	max-width: 68ch;
	margin: 0 0 28px;
}

.bk-ingressi p {
	margin: 0;
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-m);
	line-height: 1.55;
	color: var(--bk-teksti);
}

.bk-faq {
	margin: 56px 0 0;
	padding: 40px 0 0;
	border-top: 1px solid var(--bk-viiva);
}

.bk-faq__otsikko {
	margin: 0 0 24px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--bk-musta);
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: var(--brd-xl);
	letter-spacing: var(--bk-otsikko-valjennys);
}

.bk-faq__lista {
	max-width: 78ch;
}

.bk-faq__kohta {
	border-bottom: 1px solid var(--bk-viiva);
}

.bk-faq__kysymys {
	position: relative;
	display: block;
	padding: 18px 44px 18px 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-s);
	font-weight: 500;
	line-height: 1.4;
	color: var(--bk-musta);
}

.bk-faq__kysymys::-webkit-details-marker { display: none; }

/* Plus- ja miinusmerkki piirretään viivoista: fontin merkit eivät ole
   samankokoisia eri leikkauksissa, ja ikonifonttia ei haluta ladata. */
.bk-faq__kysymys::before,
.bk-faq__kysymys::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 14px;
	height: 2px;
	background: var(--bk-musta);
	transition: transform 0.18s ease;
}

.bk-faq__kysymys::after { transform: rotate(90deg); }

.bk-faq__kohta[open] .bk-faq__kysymys::after { transform: rotate(0deg); }

.bk-faq__kysymys:hover { color: var(--bk-korostus); }
.bk-faq__kysymys:hover::before,
.bk-faq__kysymys:hover::after { background: var(--bk-korostus); }

.bk-faq__kysymys:focus-visible {
	outline: 2px solid var(--bk-korostus);
	outline-offset: 2px;
}

.bk-faq__vastaus {
	padding: 0 44px 20px 0;
}

.bk-faq__vastaus p {
	margin: 0;
	font-family: var(--bk-teksti-fontti);
	font-size: var(--brd-s);
	line-height: 1.618;
	color: var(--bk-teksti);
}

@media (prefers-reduced-motion: reduce) {
	.bk-faq__kysymys::before,
	.bk-faq__kysymys::after { transition: none; }
}

@media (max-width: 767px) {
	.bk-ingressi p { font-size: var(--brd-s); }
	.bk-faq { margin-top: 40px; padding-top: 28px; }
	.bk-faq__kysymys { padding: 16px 40px 16px 0; }
}

/* ==========================================================================
   Alatunniste
   Tumma pohja erottaa alatunnisteen sisällöstä ja antaa sivulle painon.
   Värit kirjoitetaan tähän auki, koska muuttujat on määritelty vaaleaa
   käyttöliittymää varten eivätkä toimi käänteisenä.
   ========================================================================== */

.bk-alatunniste {
	--al-pohja: #0E0E0E;
	--al-teksti: #B0AAA8;
	--al-vaalea: #FFFFFF;
	--al-viiva: rgba(255, 255, 255, .13);
	--al-korostus: #C4384F;

	background: var(--al-pohja);
	color: var(--al-teksti);
	font-family: var(--brd-leipa, inherit);
	font-size: var(--brd-s, 15px);
	line-height: 1.6;
}

.bk-alatunniste a {
	color: var(--al-teksti);
	text-decoration: none;
	transition: color .18s ease;
}

.bk-alatunniste a:hover { color: var(--al-vaalea); }

.bk-alatunniste a:focus-visible {
	outline: 2px solid var(--al-korostus);
	outline-offset: 3px;
}

/* Sama mitta kuin sivuston muulla sisällöllä. Rajat vastaavat
   Elementorin laitepisteitä: laptop <=1440, widescreen >=2401. */
.bk-alatunniste > * {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 24px;
}

@media (max-width: 1440px) {
	.bk-alatunniste > * { max-width: 1240px; }
}

@media (min-width: 2401px) {
	.bk-alatunniste > * { max-width: 1560px; }
}

/* --- Tarjouspyyntö --------------------------------------------------- */

.bk-alatunniste__kutsu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding-block: 56px 44px;
}

.bk-alatunniste__kutsu-otsikko {
	margin: 0 0 8px;
	max-width: 20ch;
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.05;
	letter-spacing: .01em;
	color: var(--al-vaalea);
}

.bk-alatunniste__kutsu-apu {
	margin: 0;
	max-width: 52ch;
	font-size: var(--brd-s, 15px);
}

.bk-alatunniste__nappi {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 34px;
	background: var(--al-korostus);
	color: var(--al-vaalea) !important;
	font-family: var(--brd-leipa, inherit);
	font-size: var(--brd-xs, 13px);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.bk-alatunniste__nappi:hover { background: var(--al-vaalea); color: var(--al-pohja) !important; }

/* --- Palstat ---------------------------------------------------------- */

.bk-alatunniste__palstat {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: 40px;
	padding-block: 44px 40px;
	border-top: 1px solid var(--al-viiva);
}

.bk-alatunniste__nimi {
	margin: 0 0 12px;
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: var(--brd-l, 26px);
	letter-spacing: .06em;
	color: var(--al-vaalea);
}

.bk-alatunniste__kuvaus {
	margin: 0 0 16px;
	max-width: 34ch;
	font-size: var(--brd-xs, 13px);
}

.bk-alatunniste__osoite {
	font-style: normal;
	font-size: var(--brd-xs, 13px);
	line-height: 1.8;
}

.bk-alatunniste__ryhma { min-width: 0; }

/* Yhteenvetorivi on leveällä näytöllä pelkkä otsikko: haitari avataan
   vasta kapealla näytöllä, jossa täysi lista veisi puoli ruutua. */
.bk-alatunniste__otsikko {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 16px;
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: var(--brd-m, 20px);
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--al-vaalea);
	cursor: default;
	list-style: none;
}

.bk-alatunniste__otsikko::-webkit-details-marker { display: none; }

.bk-alatunniste__nuoli {
	display: none;
	width: 16px;
	height: 16px;
	transition: transform .2s ease;
}

.bk-alatunniste__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: var(--brd-xs, 13px);
}

/* --- Lupaukset -------------------------------------------------------- */

.bk-alatunniste__lupaukset {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	/* HUOM. margin: 0 kumosi .bk-alatunniste > * -saannon margin-inline:auton,
	   jolloin lupausrivi jai kiinni vasempaan reunaan muiden ollessa keskella. */
	margin: 0 auto;
	padding-block: 20px;
	list-style: none;
	border-top: 1px solid var(--al-viiva);
	font-size: var(--brd-xs, 12px);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

.bk-alatunniste__lupaukset li {
	position: relative;
	padding-left: 18px;
}

.bk-alatunniste__lupaukset li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 6px;
	height: 6px;
	background: var(--al-korostus);
}

/* --- Pohjarivi -------------------------------------------------------- */

.bk-alatunniste__pohja {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	flex-wrap: wrap;
	padding-block: 18px 34px;
	border-top: 1px solid var(--al-viiva);
	font-size: var(--brd-xs, 12px);
	color: rgba(255, 255, 255, .5);
}

.bk-alatunniste__pohja p { margin: 0; }

/* --- Tabletti --------------------------------------------------------- */

@media (max-width: 1024px) {
	.bk-alatunniste > * { padding-inline: 32px; }

	/* Kaksi palstaa jätti kolmesta linkkiryhmästä yhden yksin: brändi
	   omalle riville ja ryhmät kolmeen kapeaan palstaan. */
	.bk-alatunniste__palstat {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px 24px;
	}

	.bk-alatunniste__brandi { grid-column: 1 / -1; }
	.bk-alatunniste__kuvaus { max-width: 60ch; }
	.bk-alatunniste__kutsu { padding-block: 48px 36px; }
}

/* --- Puhelin ---------------------------------------------------------- */

@media (max-width: 767px) {
	.bk-alatunniste > * { padding-inline: 20px; }

	.bk-alatunniste__kutsu {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding-block: 40px 28px;
	}

	.bk-alatunniste__kutsu-otsikko { max-width: none; }
	.bk-alatunniste__nappi { width: 100%; }

	/* Linkkiryhmät ovat haitareita: auki ne veivät 900 pikseliä eli
	   yli ruudullisen pelkkiä linkkejä. */
	.bk-alatunniste__palstat {
		grid-template-columns: 1fr;
		gap: 0;
		padding-block: 28px 8px;
	}

	.bk-alatunniste__brandi { padding-bottom: 24px; }

	.bk-alatunniste__ryhma { border-top: 1px solid var(--al-viiva); }

	.bk-alatunniste__otsikko {
		margin: 0;
		padding-block: 16px;
		min-height: 52px;
		cursor: pointer;
	}

	.bk-alatunniste__nuoli { display: block; }

	.bk-alatunniste__ryhma[open] .bk-alatunniste__nuoli { transform: rotate(180deg); }

	.bk-alatunniste__lista { padding: 2px 0 20px; gap: 14px; }

	.bk-alatunniste__lupaukset {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px 16px;
		margin-top: 20px;
	}

	.bk-alatunniste__pohja {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding-block: 16px 28px;
	}
}

/* ==========================================================================
   Tuotehaku ylätunnisteessa
   ========================================================================== */

.bk-haku {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 22rem;
}

.bk-haku__lomake {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.bk-haku__kentta {
	width: 100%;
	height: 44px;
	padding: 0 44px 0 14px;
	border: 1px solid var(--bk-viiva, #DED7D6);
	border-radius: 0;
	background: #fff;
	font-family: var(--brd-leipa, inherit);
	font-size: var(--brd-s, 16px);
	color: var(--bk-musta, #0E0E0E);
}

.bk-haku__kentta::placeholder { color: var(--bk-harmaa, #6B6B6B); }

.bk-haku__kentta:focus {
	outline: 2px solid var(--bk-korostus, #7D1B2E);
	outline-offset: 1px;
	border-color: var(--bk-musta, #0E0E0E);
}

/* Selaimen oma tyhjennysrasti on eri kokoinen eri selaimissa ja siirtää
   hakunapin paikaltaan, siksi se piilotetaan. */
.bk-haku__kentta::-webkit-search-cancel-button { display: none; }

.bk-haku__nappi,
.bk-haku__avaa {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bk-musta, #0E0E0E);
	cursor: pointer;
}

.bk-haku__nappi { position: absolute; right: 0; }

.bk-haku__nappi:hover,
.bk-haku__avaa:hover { color: var(--bk-korostus, #7D1B2E); }

.bk-haku__ikoni { width: 20px; height: 20px; }

/* Leveällä näytöllä kenttä on aina esillä, joten avausnappia ei tarvita. */
.bk-haku__avaa { display: none; }

/* Ylätunnisteen rivi on joustava, ja ilman vähimmäisleveyttä kenttä
   kutistui 129 pikseliin eli noin kymmeneen merkkiin. */
@media (min-width: 1025px) {
	.bk-haku { min-width: 240px; }
}

@media (max-width: 1024px) {
	.bk-haku { width: 44px; max-width: 44px; }
	.bk-haku__avaa { display: flex; }

	/* Kenttä avautuu palkiksi ylätunnisteen alle: rivillä ei ole tilaa,
	   ja koko leveys tekee kirjoittamisesta helpompaa kuin kapea kenttä. */
	.bk-haku__lomake {
		position: fixed;
		left: 0;
		right: 0;
		top: 64px;
		z-index: 999;
		display: none;
		padding: 0 16px;
	}

	.bk-haku--auki .bk-haku__lomake { display: flex; }

	.bk-haku__kentta {
		height: 52px;
		box-shadow: 0 14px 28px rgba(0, 0, 0, .14);
	}

	.bk-haku__nappi { right: 16px; }
}

@media (max-width: 1440px) {
	.bk-alatunniste > * { max-width: 1240px; }
}

@media (min-width: 2401px) {
	.bk-alatunniste > * { max-width: 1560px; }
}

/* ==========================================================================
   Ostoskorin kuvake ylätunnisteessa
   Elementor näyttää painikkeessa oletuksena välisumman. Rivi
   "346,88 € (sis. alv.)" vei ylätunnisteesta enemmän tilaa kuin haku,
   eikä se kerro asiakkaalle enempää kuin tuotemäärä.
   ========================================================================== */

.elementor-menu-cart__toggle .elementor-button-text { display: none !important; }

.elementor-menu-cart__toggle .elementor-button-icon-qty {
	font-family: var(--brd-leipa, inherit);
	font-size: 11px;
	font-weight: 600;
}

/* ==========================================================================
   Lupausrivi etusivulla
   Vastaa ostajan kolmeen ensimmäiseen kysymykseen — kuka tekee, mikä on
   pienin erä, milloin tavara tulee — ennen kuin hän alkaa selata.
   ========================================================================== */

.bk-lupausrivi {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--bk-viiva, #DED7D6);
	border-bottom: 1px solid var(--bk-viiva, #DED7D6);
}

.bk-lupausrivi li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 26px 28px;
	border-left: 1px solid var(--bk-viiva, #DED7D6);
}

.bk-lupausrivi li:first-child { border-left: 0; padding-left: 0; }

.bk-lupausrivi strong {
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: var(--brd-m, 20px);
	font-weight: 400;
	letter-spacing: .02em;
	color: var(--bk-musta, #0E0E0E);
}

.bk-lupausrivi span {
	font-family: var(--brd-leipa, inherit);
	font-size: var(--brd-xs, 13px);
	line-height: 1.5;
	color: var(--bk-harmaa, #6B6B6B);
}

@media (max-width: 1024px) {
	.bk-lupausrivi { grid-template-columns: 1fr 1fr; }
	.bk-lupausrivi li { padding: 22px; }
	.bk-lupausrivi li:nth-child(odd) { border-left: 0; padding-left: 0; }
	.bk-lupausrivi li:nth-child(n+3) { border-top: 1px solid var(--bk-viiva, #DED7D6); }
}

@media (max-width: 767px) {
	.bk-lupausrivi li { padding: 18px 14px; }
	.bk-lupausrivi strong { font-size: var(--brd-s, 16px); }
}

/* ==========================================================================
   Hakuehdotukset
   ========================================================================== */

.bk-haku__tulokset {
	position: absolute;
	top: calc(100% + 6px);
	/* Kentta on ylatunnisteessa kapea, mutta tuotenimet ovat pitkia:
	   paneeli levenee oikealle kentan reunasta. */
	left: auto;
	right: 0;
	width: min(400px, calc(100vw - 32px));
	z-index: 1000;
	max-height: min(70vh, 460px);
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--bk-viiva, #DED7D6);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}

.bk-haku__osuma {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--bk-viiva, #DED7D6);
	color: var(--bk-musta, #0E0E0E);
	text-decoration: none;
}

.bk-haku__osuma:last-of-type { border-bottom: 0; }

.bk-haku__osuma:hover,
.bk-haku__osuma--valittu {
	background: var(--bk-vaalea, #F2F1EF);
}

.bk-haku__kuva {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	object-fit: cover;
	background: var(--bk-vaalea, #F2F1EF);
}

.bk-haku__tiedot {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bk-haku__nimi {
	font-family: var(--brd-leipa, inherit);
	font-size: var(--brd-s, 15px);
	line-height: 1.3;
	/* Pitkat tuotenimet eivat saa venyttaa paneelia. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bk-haku__nimi mark {
	background: transparent;
	color: var(--bk-korostus, #7D1B2E);
	font-weight: 600;
}

.bk-haku__meta {
	font-family: var(--brd-leipa, inherit);
	font-size: var(--brd-xs, 12px);
	color: var(--bk-harmaa, #6B6B6B);
}

.bk-haku__kaikki {
	display: block;
	padding: 12px 14px;
	background: var(--bk-musta, #0E0E0E);
	color: #fff;
	font-family: var(--brd-leipa, inherit);
	font-size: var(--brd-xs, 12px);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
}

.bk-haku__kaikki:hover { background: var(--bk-korostus, #7D1B2E); color: #fff; }

.bk-haku__tyhja {
	margin: 0;
	padding: 16px 14px;
	font-family: var(--brd-leipa, inherit);
	font-size: var(--brd-s, 15px);
	color: var(--bk-harmaa, #6B6B6B);
}

@media (max-width: 1024px) {
	/* Lomake on kapealla naytolla kiinnitetty palkki, jolla on omat
	   reunapehmusteet — lista asetetaan samaan linjaan kentan kanssa. */
	.bk-haku__tulokset { left: 16px; right: 16px; width: auto; }
}

/* Osiorivin oikean reunan linkki (esim. "Kaikki tuotteet") */
.bk-osiolinkki {
	margin: 0;
	padding-bottom: 6px;
}

.bk-osiolinkki a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--brd-leipa, inherit);
	font-size: var(--brd-xs, 13px);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bk-musta, #0E0E0E);
	border-bottom: 1px solid var(--bk-viiva-vahva, #C9C2C0);
	padding-bottom: 4px;
}

.bk-osiolinkki a::after {
	content: "→";
	transition: transform .25s ease;
}

.bk-osiolinkki a:hover {
	color: var(--bk-korostus, #7D1B2E);
	border-bottom-color: var(--bk-korostus, #7D1B2E);
}

.bk-osiolinkki a:hover::after { transform: translateX(4px); }

@media (max-width: 767px) {
	.bk-osiolinkki { padding-top: 10px; }
}

/* ==========================================================================
   Pienet liikkeet
   Liike on koristetta: ilman skriptiä tai vähennetyllä liikkeellä sivu
   näyttää samalta, sisältö on aina näkyvissä.
   ========================================================================== */

.bk-nouse {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

.bk-nouse--esiin {
	opacity: 1;
	transform: none;
}

/* Ylätunnisteen varjo kertoo, että sivua on vieritetty. */
header.bk-otsa--vieritetty {
	box-shadow: 0 1px 0 rgba(14, 14, 14, .08), 0 10px 24px rgba(14, 14, 14, .07);
}

header { transition: box-shadow .25s ease; }

.bk-pomppu { animation: bk-pomppu .42s cubic-bezier(.3, 1.4, .5, 1); }

@keyframes bk-pomppu {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* Arviosta kauppaan siirtynyt valinta */
.bk-siirto {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 24px;
	padding: 14px 18px;
	background: var(--bk-vaalea, #F2F1EF);
	border-left: 3px solid var(--bk-korostus, #7D1B2E);
	font-family: var(--brd-leipa, inherit);
	font-size: var(--brd-s, 15px);
}

.bk-siirto__sulje {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	color: var(--bk-harmaa, #6B6B6B);
	cursor: pointer;
}

.bk-siirto__sulje:hover { color: var(--bk-musta, #0E0E0E); }

@media (prefers-reduced-motion: reduce) {
	.bk-nouse { opacity: 1; transform: none; transition: none; }
	.bk-pomppu { animation: none; }
}

/* ==========================================================================
   Tulosrivi ja lajittelu
   WooCommerce kelluttaa tuloslaskurin vasemmalle ja lajittelun oikealle.
   Väliin jäi aukko, johon muu sisältö valui, eivätkä perusviivat osuneet
   kohdakkain. Skripti siirtää molemmat samaan riviin.
   ========================================================================== */

.bk-tulosrivi {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin: 0 0 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--bk-viiva);
}

.bk-tulosrivi .woocommerce-result-count,
.bk-tulosrivi .woocommerce-ordering {
	float: none !important;
	margin: 0 !important;
}

.bk-tulosrivi .woocommerce-result-count {
	font-size: var(--brd-xs);
	letter-spacing: .04em;
	color: var(--bk-harmaa);
}

/* Lajitteluvalikko oli sivun ainoa selaimen oletustyylinen kontrolli. */
.woocommerce .bk-tulosrivi .woocommerce-ordering select,
.woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	height: 40px;
	padding: 0 38px 0 14px;
	border: 1px solid var(--bk-viiva-vahva);
	border-radius: 0;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%230E0E0E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px 14px;
	font-family: var(--brd-leipa);
	font-size: var(--brd-xs);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bk-musta);
	cursor: pointer;
}

.woocommerce .bk-tulosrivi .woocommerce-ordering select:hover,
.woocommerce-ordering select:hover { border-color: var(--bk-musta); }

.woocommerce-ordering select:focus-visible {
	outline: 2px solid var(--bk-korostus);
	outline-offset: 1px;
}

/* Arviosta siirtynyt valinta on oma rivinsä, ei kelluvien välissä. */
.bk-siirto { clear: both; }

@media (max-width: 767px) {
	.bk-tulosrivi {
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
	}

	.woocommerce-ordering select { width: 100%; }
}

/* "alk." on määre, ei hinta — se pysyy hiljaisena luvun rinnalla. */
.bk-hinta-alkaen {
	font-size: var(--brd-xs);
	font-weight: 400;
	letter-spacing: .04em;
	color: var(--bk-harmaa);
}

/* ==========================================================================
   Tyhjä tulos
   Umpikuja on kaupassa kalliimpi kuin väärä osuma: kerrotaan mitä tapahtui
   ja tarjotaan reitit eteenpäin.
   ========================================================================== */

.bk-tyhja {
	max-width: 62ch;
	padding: 8px 0 64px;
}

.bk-tyhja__otsikko {
	margin: 0 0 12px;
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: var(--brd-xl);
	font-weight: 400;
	line-height: 1.1;
	color: var(--bk-musta);
}

.bk-tyhja__teksti {
	margin: 0 0 28px;
	font-size: var(--brd-s);
	line-height: 1.6;
	color: var(--bk-harmaa);
}

.bk-tyhja__osastot {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--bk-viiva);
}

.bk-tyhja__osastot a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--bk-viiva);
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: var(--brd-m);
	letter-spacing: .02em;
	color: var(--bk-musta);
	text-decoration: none;
}

.bk-tyhja__osastot li:nth-child(odd) a { padding-right: 28px; }
.bk-tyhja__osastot li:nth-child(even) a { padding-left: 28px; }

.bk-tyhja__osastot a:hover { color: var(--bk-korostus); }

.bk-tyhja__osastot span {
	font-family: var(--brd-leipa);
	font-size: var(--brd-xs);
	font-variant-numeric: tabular-nums;
	color: var(--bk-harmaa);
}

.bk-tyhja__apu {
	margin: 0;
	padding: 18px 20px;
	background: var(--bk-vaalea);
	border-left: 3px solid var(--bk-korostus);
	font-size: var(--brd-s);
	line-height: 1.55;
}

.bk-tyhja__apu a {
	white-space: nowrap;
	border-bottom: 1px solid currentColor;
}

@media (max-width: 767px) {
	.bk-tyhja__osastot { grid-template-columns: 1fr; }
	.bk-tyhja__osastot li a { padding-left: 0; padding-right: 0; }
}

/* Suodatinlaskurin nolla piiloon. Pelkkä hidden-määre ei riitä, koska
   laskurille on oma display-sääntö, joka voittaa selaimen oletuksen. */
.bk-suodattimet__maara[hidden] { display: none !important; }

/* ==========================================================================
   Merkkirivi
   Nimet tai logot samassa rivissä. Logo näkyy heti kun merkille on
   asetettu kuva Tuotteet → Merkit -näkymässä; siihen asti näkyy nimi.
   ========================================================================== */

.bk-merkit {
	text-align: center;
}

.bk-merkit__otsikko {
	margin: 0 0 26px;
	font-family: var(--brd-leipa);
	font-size: var(--brd-xs);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bk-harmaa);
}

.bk-merkit__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 44px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bk-merkit__kohta a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.bk-merkit__nimi {
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: var(--brd-m);
	letter-spacing: .08em;
	color: var(--bk-musta);
	transition: color .18s ease;
}

.bk-merkit__kohta a:hover .bk-merkit__nimi { color: var(--bk-korostus); }

/* Logot samaan optiseen kokoon ja harmaiksi, jotta rivi pysyy rauhallisena
   eivätkä eri merkkien värit taistele keskenään. */
.bk-merkit__logo {
	display: block;
	width: auto;
	height: 30px;
	max-width: 150px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .62;
	/* Osa logoista on valkoisella pohjalla oleva rasteri: multiply pudottaa
	   valkoisen pois, jolloin ne istuvat samalle pinnalle lapinakyvien kanssa. */
	mix-blend-mode: multiply;
	transition: opacity .2s ease, filter .2s ease;
}

.bk-merkit__kohta a:hover .bk-merkit__logo {
	filter: none;
	opacity: 1;
}

@media (max-width: 767px) {
	.bk-merkit__lista { gap: 14px 26px; }
	.bk-merkit__nimi { font-size: var(--brd-s); }
	.bk-merkit__logo { height: 24px; }
}

/* ==========================================================================
   Ylätunnisteen työkalurivi
   Haku, puhelin, oma tili ja ostoskori ovat kaikki 44 pikselin korkuisia
   ja samassa linjassa. Aiemmin puhelin oli irrallista tekstiä, joka
   katkesi kahdelle riville ja kasvatti palkin 85 pikseliin.
   ========================================================================== */

.bk-pikalinkit {
	display: flex;
	align-items: center;
	gap: 4px;
}

.bk-pikalinkit a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 10px;
	color: var(--bk-musta);
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s ease;
}

.bk-pikalinkit a:hover { color: var(--bk-korostus); }

.bk-pikalinkit__ikoni {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

.bk-pikalinkit__numero {
	font-family: var(--brd-leipa);
	font-size: var(--brd-xs);
	font-weight: 600;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}

/* Kapealla näytöllä numero jää pois: soittopainike riittää, ja tila
   tarvitaan valikolle, haulle ja korille. */
@media (max-width: 1024px) {
	.bk-pikalinkit__numero { display: none; }
	.bk-pikalinkit a { padding: 0 6px; }
}

@media (max-width: 480px) {
	/* Valitsimen on oltava vahintaan yhta tarkka kuin .bk-pikalinkit a,
	   muuten display:inline-flex voittaa. */
	.bk-pikalinkit a.bk-pikalinkit__tili { display: none; }
}

/* ==========================================================================
   Päävalikko
   Yksi kappale valikkoa, ei erillistä työpöytä- ja mobiiliversiota.
   Paneeli avataan napsautuksella: hover-valikko ei toimi kosketuksella
   eikä näppäimistöllä.
   ========================================================================== */

.bk-navi {
	display: flex;
	align-items: center;
}

.bk-navi__kytkin {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bk-musta);
	cursor: pointer;
}

.bk-navi__viivat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 20px;
}

.bk-navi__viivat i {
	display: block;
	height: 2px;
	background: currentColor;
	transition: transform .22s ease, opacity .22s ease;
}

.bk-navi--auki .bk-navi__viivat i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bk-navi--auki .bk-navi__viivat i:nth-child(2) { opacity: 0; }
.bk-navi--auki .bk-navi__viivat i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.bk-navi__lista {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bk-navi__kohta { position: relative; }

.bk-navi__linkki {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .03em;
	color: var(--bk-musta);
	text-decoration: none;
	cursor: pointer;
	transition: color .18s ease;
}

.bk-navi__linkki:hover,
.bk-navi__linkki[aria-expanded="true"] { color: var(--bk-korostus); }

/* Nykyinen sivu saa viivan, ei väriä: väri on varattu toiminnalle. */
.bk-navi__linkki[aria-current="page"] {
	box-shadow: inset 0 -2px 0 0 var(--bk-musta);
}

.bk-navi__nuoli {
	width: 14px;
	height: 14px;
	transition: transform .22s ease;
}

.bk-navi__linkki[aria-expanded="true"] .bk-navi__nuoli { transform: rotate(180deg); }

/* --- Tuotepaneeli ------------------------------------------------------- */

/* HUOM. display-sääntö voittaa selaimen oman [hidden]-tyylin, joten
   piilotus on kirjoitettava auki. Ilman tätä paneeli oli auki koko ajan
   leveällä näytöllä, jossa se on grid. */
.bk-navi__paneeli[hidden] { display: none !important; }

.bk-navi__paneeli {
	position: absolute;
	/* Tarkka paikka lasketaan skriptissa ylatunnisteen alareunasta. */
	top: calc(100% + 18px);
	left: -24px;
	z-index: 200;
	display: grid;
	grid-template-columns: 1fr 1fr 1.1fr;
	gap: 32px;
	width: min(720px, calc(100vw - 48px));
	padding: 28px;
	background: #fff;
	border: 1px solid var(--bk-viiva);
	box-shadow: 0 22px 48px rgba(14, 14, 14, .12);
}

.bk-navi__ryhma-otsikko {
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bk-viiva);
	font-family: var(--brd-leipa);
	font-size: var(--brd-xs);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bk-harmaa);
}

.bk-navi__ryhma-lista {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bk-navi__ryhma-lista a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-family: var(--brd-leipa);
	font-size: var(--brd-s);
	color: var(--bk-musta);
	text-decoration: none;
}

.bk-navi__ryhma-lista a:hover { color: var(--bk-korostus); }

.bk-navi__luku {
	font-size: var(--brd-xs);
	font-variant-numeric: tabular-nums;
	color: var(--bk-harmaa);
}

.bk-navi__ryhma--kutsu {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	padding: 20px;
	background: var(--bk-vaalea);
}

.bk-navi__kutsu-teksti {
	margin: 0;
	font-family: var(--brd-leipa);
	font-size: var(--brd-xs);
	line-height: 1.55;
	color: var(--bk-harmaa);
}

.bk-navi__kutsu-linkki {
	align-self: flex-start;
	font-family: var(--brd-leipa);
	font-size: var(--brd-xs);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bk-musta);
	text-decoration: none;
	border-bottom: 1px solid var(--bk-viiva-vahva);
	padding-bottom: 3px;
}

.bk-navi__kutsu-linkki::after { content: " →"; }
.bk-navi__kutsu-linkki:hover { color: var(--bk-korostus); border-bottom-color: var(--bk-korostus); }

/* --- Kapea näyttö ------------------------------------------------------- */

@media (max-width: 1024px) {
	.bk-navi__kytkin { display: flex; }

	/* Valikko avautuu palkin alle, ei sen paalle: logo, haku ja kori
	   pysyvat kaytettavissa myos valikon ollessa auki. Tarkka ylareuna
	   asetetaan skriptissa palkin korkeuden mukaan. */
	.bk-navi__lista {
		position: fixed;
		left: 0;
		right: 0;
		top: 57px;
		bottom: 0;
		z-index: 300;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px 20px 40px;
		background: #fff;
		border-top: 1px solid var(--bk-viiva);
		overflow-y: auto;
	}

	.bk-navi--auki .bk-navi__lista { display: flex; }

	.bk-navi__kohta { border-bottom: 1px solid var(--bk-viiva); }

	.bk-navi__linkki {
		width: 100%;
		justify-content: space-between;
		min-height: 56px;
		font-size: 1.7rem;
	}

	/* Paneeli on kapealla näytöllä haitari, ei kelluva laatikko. */
	.bk-navi__paneeli {
		position: static;
		width: auto;
		display: block;
		padding: 0 0 20px;
		border: 0;
		box-shadow: none;
	}

	.bk-navi__ryhma + .bk-navi__ryhma { margin-top: 20px; }
	.bk-navi__ryhma--kutsu { padding: 16px; }

	/* Kytkin on valikon päällä, jotta sen saa kiinni samasta paikasta. */
	.bk-navi--auki .bk-navi__kytkin { position: relative; z-index: 400; }
}

html.bk-valikko-auki { overflow: hidden; }

/* Oma tili on työkalurivissä; valikkoon se tulee vain kaikkein
   kapeimmilla näytöillä, joilla palkkiin ei mahdu kuudetta painiketta. */
.bk-navi__kohta--kapea { display: none; }

@media (max-width: 480px) {
	.bk-navi__kohta--kapea { display: block; }
}

@media (max-width: 1024px) {
	.bk-pikalinkit a { padding: 0 4px; }

	/* Ostoskorin painike oli 66 px leveä; kapealla rivillä jokainen
	   pikseli on muilta pois. */
	.elementor-menu-cart__toggle .elementor-button {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* ==========================================================================
   Ylätunniste kokonaisuutena
   Kaikki painikkeet ovat 44 × 44 px ja samassa linjassa: haku, puhelin,
   oma tili ja ostoskori. Ostoskorin painike tulee Elementorilta, joten se
   sovitetaan tässä samaan mittaan muiden kanssa.
   ========================================================================== */

header .elementor-menu-cart__toggle .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--bk-musta);
	transition: color .18s ease;
}

header .elementor-menu-cart__toggle .elementor-button:hover { color: var(--bk-korostus); }

header .elementor-menu-cart__toggle .elementor-button-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

header .elementor-menu-cart__toggle .elementor-button-icon svg {
	width: 20px;
	height: 20px;
}

/* Lukumäärä istuu kuvakkeen oikeaan yläkulmaan eikä kasvata painiketta. */
header .elementor-menu-cart__toggle .elementor-button-icon-qty {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bk-korostus);
	color: #fff;
	border-radius: 999px;
	font-family: var(--brd-leipa);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Logo samaan pystylinjaan työkalujen kanssa. */
header .elementor-widget-theme-site-logo img { display: block; }

/* Näppäimistöllä liikkuvan on nähtävä missä hän on. */
header a:focus-visible,
header button:focus-visible,
header input:focus-visible {
	outline: 2px solid var(--bk-korostus);
	outline-offset: 3px;
	border-radius: 1px;
}

/* Palkki on tarttuva, joten sen sisällön pitää mahtua matalallekin
   näytölle: pystypehmuste kutistuu ennen kuin mikään rikkoutuu. */
@media (max-width: 1024px) {
	header .elementor-menu-cart__toggle .elementor-button { width: 40px; }
}

/* Ylätunnisteen ryhmät yhdelle riville.
   Elementorin "täysleveä" antaa lapsisäiliölle width:100 %, jolloin
   ryhmät pinoutuivat kapealla näytöllä päällekkäin. Leveys tulee
   sisällöstä: vasen ryhmä venyy, oikea vie vain tarvitsemansa. */
header .elementor-element-9c9fc96 > .e-con-inner {
	flex-wrap: nowrap;
}

header .elementor-element-3f4ac00 {
	width: auto !important;
	flex: 1 1 auto;
	min-width: 0;
}

header .elementor-element-6b9a2e5 {
	width: auto !important;
	flex: 0 0 auto;
}

/* ==========================================================================
   Sivut jotka eivät käytä Elementoria
   Ehtosivuilla sisältö alkoi 8 pikseriä ylätunnisteen alta ja jatkui
   sivun pohjaan asti. Teksti tarvitsee saman väljyyden kuin muukin.
   ========================================================================== */

body:not(.elementor-page) .site-main {
	padding-block: 56px 88px;
}

@media (max-width: 1024px) {
	body:not(.elementor-page) .site-main { padding-block: 44px 64px; }
}

@media (max-width: 767px) {
	body:not(.elementor-page) .site-main { padding-block: 32px 48px; }
}

/* Hakutuloksissa arkiston kuvaus on tyhjä, mutta osio varasi silti
   33 pikseliä. */
body.search .elementor-element-d360fc8 { display: none; }

/* ==========================================================================
   Ehto- ja selostesivut
   Pitkä asiateksti luetaan, ei selata. Mitta pidetään lukukelpoisena,
   luvut erotetaan hiusviivalla ja voimassaolopäivä nostetaan ingressiksi.
   ========================================================================== */

/* Rajaus koskee asiatekstiä, ei kauppaa: WooCommercen lohkokassa
   käyttää samaa sivupohjaa, ja 70ch kutisti sen 1600 pikselin näytöllä
   726 pikselin levyiseksi — lomake 472, yhteenveto 254. */
body:not(.elementor-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .site-main .page-header,
body:not(.elementor-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .site-main .page-content {
	max-width: 70ch;
	margin-inline: auto;
	padding-inline: 20px;
}

body:not(.elementor-page) .site-main .page-header {
	margin-bottom: 36px;
	padding-bottom: 24px;
	border-bottom: 2px solid var(--bk-musta, #0E0E0E);
}

body:not(.elementor-page) .site-main .entry-title {
	margin: 0;
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: clamp(34px, 5vw, 52px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: .01em;
	color: var(--bk-musta, #0E0E0E);
}

/* Voimassaolopäivä on ensimmäinen kappale: se on lukijalle tärkein tieto
   heti otsikon jälkeen. */
body:not(.elementor-page) .page-content > p:first-child {
	margin-bottom: 32px;
	font-family: var(--brd-leipa, inherit);
	font-size: var(--brd-xs, 13px);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bk-harmaa, #6B6B6B);
}

body:not(.elementor-page) .page-content h2 {
	margin: 56px 0 18px;
	padding-top: 28px;
	border-top: 1px solid var(--bk-viiva, #DED7D6);
	font-size: var(--brd-l, 26px);
	line-height: 1.1;
}

body:not(.elementor-page) .page-content h3 {
	margin: 32px 0 12px;
	font-size: var(--brd-m, 20px);
}

body:not(.elementor-page) .page-content p {
	margin: 0 0 18px;
	font-size: var(--brd-s, 16px);
	line-height: 1.7;
	color: #2F2F2F;
}

body:not(.elementor-page) .page-content ul,
body:not(.elementor-page) .page-content ol {
	margin: 0 0 20px;
	padding-left: 22px;
	line-height: 1.7;
}

body:not(.elementor-page) .page-content li { margin-bottom: 8px; }

body:not(.elementor-page) .page-content a {
	color: var(--bk-musta, #0E0E0E);
	border-bottom: 1px solid var(--bk-viiva-vahva, #C9C2C0);
}

body:not(.elementor-page) .page-content a:hover {
	color: var(--bk-korostus, #7D1B2E);
	border-bottom-color: var(--bk-korostus, #7D1B2E);
}

body:not(.elementor-page) .page-content strong { color: var(--bk-musta, #0E0E0E); }

@media (max-width: 767px) {
	body:not(.elementor-page) .site-main .page-header {
		margin-bottom: 28px;
		padding-bottom: 18px;
	}

	body:not(.elementor-page) .page-content h2 {
		margin-top: 40px;
		padding-top: 22px;
	}
}

/* ==========================================================================
   Tuotesivun alaosa leveällä näytöllä
   Kuvauslehden teksti on rajattu 816 pikseriin luettavuuden vuoksi, joten
   1440 pikselin osiossa oikealle jäi 600 pikseliä tyhjää. Tekstipalsta
   keskitetään, jolloin tyhjä tila on symmetristä marginaalia.
   ========================================================================== */

@media (min-width: 1200px) {
	.woocommerce div.product .woocommerce-tabs {
		max-width: 980px;
		margin-inline: auto;
	}
}

/* Nostoja on neljä, joten ruudukkokin on neljä — kuuden sarakkeen
   ruudukossa kaksi paikkaa jäi tyhjäksi ja rivi näytti katkenneelta.
   Elementorin tyylipaketti (post-7.css) kirjoittaa saman ominaisuuden
   !important-merkinnällä ja omalla laajan näytön ehdollaan, joten sama
   merkintä ja sama ehto tarvitaan tässäkin. Ilman niitä laajalla
   näytöllä palasi kuusi saraketta, ja yksi ainoa oheistuote jäi
   yksinään kuuden levyiselle riville. */
.woocommerce div.product .related.products ul.products,
.woocommerce div.product .up-sells ul.products,
.woocommerce .cross-sells ul.products {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (min-width: 1441px) {
	.woocommerce div.product .related.products ul.products,
	.woocommerce div.product .up-sells ul.products,
	.woocommerce .cross-sells ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1024px) {
	.woocommerce div.product .related.products ul.products,
	.woocommerce div.product .up-sells ul.products,
	.woocommerce .cross-sells ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) {
	.woocommerce div.product .related.products ul.products,
	.woocommerce div.product .up-sells ul.products,
	.woocommerce .cross-sells ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* ==========================================================================
   Painikkeiden perustila
   Hello Elementorin reset.css antaa jokaiselle <button>-elementille
   pinkin reunan ja tekstin sekä pinkin täytön hiiren alla (#CC3366).
   Se näkyi kaikkialla, missä painikkeelle ei ollut kirjoitettu omaa
   tyyliä: hinta-arvion määräportaissa, +/− napeissa, haun avauksessa,
   suodattimissa ja alatunnisteen haitareissa. Sävy ei kuulu tähän
   palettiin, joten perustila kirjoitetaan tässä uusiksi. Komponenttien
   omat säännöt ovat tarkempia ja voittavat tämän.
   ========================================================================== */

button,
[type="button"],
[type="submit"],
[type="reset"] {
	border-color: var(--bk-viiva-vahva, #C9C2C0);
	border-radius: 0;
	color: inherit;
}

button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus,
[type="reset"]:hover,
[type="reset"]:focus {
	background-color: var(--bk-vaalea, #F2F1EF);
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   Sivua ei löytynyt (404)
   Teeman oma 404 oli otsikko ja yksi lause, ei yhtään linkkiä eteenpäin.
   Väärä osoite on kaupassa arkipäivää — vanha linkki, poistettu tuote,
   kirjoitusvirhe — joten sivu käyttää samaa muotoa kuin tyhjä hakutulos
   ja tarjoaa haun, osastot ja yhteydenoton.
   ========================================================================== */

body .site-main.bk-404-sivu {
	max-width: 1140px;
	margin-inline: auto;
	padding: 72px 24px 96px;
}

.bk-tyhja--404 {
	padding-bottom: 0;
}

.bk-tyhja__koodi {
	margin: 0 0 10px;
	font-family: var(--brd-leipa);
	font-size: var(--brd-xs);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--bk-harmaa);
}

.bk-tyhja__haku {
	display: flex;
	gap: 0;
	margin: 0 0 32px;
	border: 1px solid var(--bk-viiva-vahva, #C9C2C0);
}

.bk-tyhja__haku input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 52px;
	padding: 12px 16px;
	border: 0;
	border-radius: 0;
	background: #FFFFFF;
	font-family: var(--brd-leipa);
	font-size: var(--brd-s);
	color: var(--bk-musta);
	-webkit-appearance: none;
	appearance: none;
}

.bk-tyhja__haku input[type="search"]:focus {
	outline: 2px solid var(--bk-musta);
	outline-offset: -2px;
}

.bk-tyhja__haku button {
	flex: 0 0 auto;
	min-height: 52px;
	padding: 12px 26px;
	border: 0;
	border-radius: 0;
	background: var(--bk-musta);
	color: #FFFFFF;
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	font-size: var(--brd-m);
	letter-spacing: .04em;
	cursor: pointer;
}

.bk-tyhja__haku button:hover,
.bk-tyhja__haku button:focus {
	background: var(--bk-korostus);
	color: #FFFFFF;
}

@media (max-width: 767px) {
	body .site-main.bk-404-sivu {
		padding: 40px 20px 64px;
	}
}

/* ==========================================================================
   Kosketuskohteet kapealla näytöllä
   Mitattuna 375 pikselin näytöllä: valikon avausnappi oli 20 × 20,
   puhelinpainike 28 × 44, sivutuksen numerot 25 × 32 ja alatunnisteen
   linkit 17 pikseliä korkeita. Sormenpää on noin 9 mm eli ~44 pikseliä,
   ja valikon avaus on koko mobiilinavigaation ainoa ovi — se ei saa
   olla sivun pienin kohde. Kaikki nostetaan 44 pikseliin ilman että
   ulkoasu muuttuu: kasvatus tehdään täytteellä, ei ikonin koolla.
   ========================================================================== */

@media (max-width: 767px) {

	/* Elementorin sisäkkäisen valikon avausnappi. */
	.e-n-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		margin: 0;
	}

	.e-n-menu-toggle > * {
		pointer-events: none;
	}

	/* Puhelin ja oma tili ylätunnisteen oikeassa reunassa. */
	.bk-pikalinkit__puhelin,
	.bk-pikalinkit__tili {
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
	}

	/* Sivutuksen numerot tuoteluettelossa. */
	.woocommerce-pagination .page-numbers li a,
	.woocommerce-pagination .page-numbers li span,
	.elementor-pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	/* Alatunnisteen linkkilistat: rivi kerrallaan, sormelle sopiva korkeus. */
	.bk-alatunniste__lista {
		gap: 2px;
	}

	.bk-alatunniste__lista a {
		display: flex;
		align-items: center;
		min-height: 40px;
	}
}

@media (max-width: 767px) {

	/* Ostoskorin poistoruksi oli 24 × 24 — pienin kohde koko korissa,
	   ja vahinkoklikki poistaa rivin. */
	.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		line-height: 1;
	}

	/* Tuotesivun välilehdet Kuvaus / Lisätiedot olivat 27 pikseliä korkeita. */
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* Suurennuslasi on hiiren toiminto. Kosketusnäytöllä se ei tee mitään,
   mutta jättää kuvan päälle elementin joka yltää ruudun ulkopuolelle. */
@media (max-width: 1024px) {
	.woocommerce div.product .woocommerce-product-gallery img.zoomImg {
		display: none !important;
	}
}

/* ==========================================================================
   Kassan leveys työpöydällä
   Kassa käyttää teeman tavallista sivupohjaa, jonka .page-content rajaa
   sisällön 766 pikseliin. 1600 pikselin näytöllä lomake jäi 472 ja
   yhteenveto 254 pikseliin: kentät olivat suhteessa ruutuun kapeampia
   kuin puhelimessa, ja tilausyhteenvedon rivit katkeilivat turhaan.
   Kassalohko on alignwide, joten sille annetaan sama 1140 pikselin
   mitta kuin muullekin kaupalle.
   ========================================================================== */

@media (min-width: 1025px) {
	.woocommerce-checkout .page-content {
		max-width: 1140px;
	}
}

/* ==========================================================================
   Yksinäinen kortti viimeisellä rivillä
   Vajaa viimeinen rivi on tuoteluettelossa tavallinen eikä häiritse —
   paitsi silloin kun sille jää yksi ainoa kortti. Silloin rivi näyttää
   virheeltä, ei valikoimalta. Laajalla näytöllä ruudukko on kuusi
   saraketta, joten 7, 13 ja 19 tuotetta osuvat juuri siihen. Niissä
   siirrytään viiteen sarakkeeseen, jolloin viimeisellä rivillä on aina
   vähintään kaksi korttia. Osastojen tuotemäärät (4, 8, 9, 10) eivät
   osu tähän, mutta merkkien ja suodatusten tulokset osuvat.
   ========================================================================== */

@media (min-width: 1441px) {
	.woocommerce ul.products.elementor-grid:has(li.product:nth-child(7)):not(:has(li.product:nth-child(8))),
	.woocommerce ul.products.elementor-grid:has(li.product:nth-child(13)):not(:has(li.product:nth-child(14))),
	.woocommerce ul.products.elementor-grid:has(li.product:nth-child(19)):not(:has(li.product:nth-child(20))) {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	}
}

/* ==========================================================================
   Omat tuotteet
   Ensimmäinen versio poikkesi etusivusta kahdella tavalla: sillä oli oma
   silmäkulmateksti ja oma näyttöotsikko, kun muut osiot käyttävät
   .bk-osiotunnistetta, ja oikea palsta oli valkoinen reunallinen laatikko.
   Etusivulla ei ole yhtään korttia — hinta-arvio, nostot ja merkkirivi ovat
   kaikki läpinäkyviä ja rakentuvat hiusviivoista. Nyt tämäkin osio tekee
   niin: osiotunniste ylle, kaksi palstaa alle, erottelu viivoilla.
   ========================================================================== */

/* Ei omaa leveysrajaa: etusivun muut osiot — nostot, merkkirivi,
   hinta-arvio ja tilauspolku — tayttavat Elementor-sailionsa sellaisenaan.
   1140 pikselin rajaus sisensi taman lohkon 150 pikselia muita kapeammaksi,
   jolloin se erottui rivista vaarasta syysta. */

.bk-omat__sisus {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.bk-omat__ingressi {
	margin: 0 0 28px;
	max-width: 52ch;
	font-size: var(--brd-s);
	line-height: 1.65;
	color: var(--bk-teksti);
}

.bk-omat__lista {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--bk-viiva);
}

.bk-omat__lista li {
	padding: 13px 0;
	border-bottom: 1px solid var(--bk-viiva);
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: var(--brd-m);
	letter-spacing: var(--bk-otsikko-valjennys);
	color: var(--bk-musta);
}

.bk-omat__huomio {
	margin: 0;
	max-width: 52ch;
	font-size: var(--brd-xs);
	line-height: 1.6;
	color: var(--bk-harmaa);
}

.bk-omat__huomio a {
	color: var(--bk-musta);
	border-bottom: 1px solid var(--bk-viiva);
	text-decoration: none;
}

.bk-omat__huomio a:hover,
.bk-omat__huomio a:focus {
	color: var(--bk-korostus);
	border-bottom-color: currentColor;
}

/* --- Oikea palsta ------------------------------------------------------ */

.bk-omat__paneeli {
	padding-top: 16px;
	border-top: 2px solid var(--bk-viiva-vahva);
}

.bk-omat__paneeli-tunniste {
	margin: 0 0 12px;
	font-family: var(--brd-leipa);
	font-size: var(--brd-xs);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bk-harmaa);
}

.bk-omat__paneeli-teksti {
	margin: 0 0 22px;
	font-size: var(--brd-s);
	line-height: 1.6;
	color: var(--bk-teksti);
}

/*
 * Painike samalla kielellä kuin etusivun napit: DM Sans 15 / 600, ei
 * pyöristystä, musta pinta ja viini hiiren alla. Väri kirjoitetaan
 * paneelin kautta, koska Elementorin tyylipaketin .elementor-kit-7 a
 * on kahden luokan valitsin ja voitti yksinkertaisen .bk-omat__napin —
 * painikkeessa luki musta teksti mustalla pinnalla.
 */
.bk-omat__paneeli a.bk-omat__nappi {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 18px 30px;
	background: var(--bk-musta);
	color: #FFFFFF;
	font-family: var(--brd-leipa);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	transition: background-color .16s ease;
}

.bk-omat__paneeli a.bk-omat__nappi:hover,
.bk-omat__paneeli a.bk-omat__nappi:focus {
	background: var(--bk-korostus);
	color: #FFFFFF;
	text-decoration: none;
}

.bk-omat__tiedot {
	margin: 24px 0 0;
	border-top: 1px solid var(--bk-viiva);
}

.bk-omat__tiedot > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--bk-viiva);
}

.bk-omat__tiedot dt {
	flex: none;
	font-size: var(--brd-xs);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bk-harmaa);
}

.bk-omat__tiedot dd {
	margin: 0;
	font-size: var(--brd-xs);
	line-height: 1.5;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--bk-musta);
}

.bk-omat__tiedot a {
	color: inherit;
	border-bottom: 1px solid var(--bk-viiva);
	text-decoration: none;
}

.bk-omat__tiedot a:hover,
.bk-omat__tiedot a:focus {
	border-bottom-color: currentColor;
	color: var(--bk-korostus);
}

@media (max-width: 1024px) {
	.bk-omat__sisus {
		gap: 40px;
	}
}

@media (max-width: 767px) {
	.bk-omat__sisus {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.bk-omat__tiedot > div {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.bk-omat__tiedot dd {
		text-align: left;
	}
}

/* ==========================================================================
   Palvelusivut: brodeeraus, painatus, merkkaus
   Sivut on rakennettu Elementorilla etusivun osiorytmillä, joten säiliöt,
   täytteet ja taustavärit tulevat sieltä. Täällä ovat vain ne komponentit,
   joita lyhytkoodit piirtävät osioiden sisään — hinnasto, vertailu,
   merkkauspaikat, tilauspolku ja kysymykset — sekä tumman ja viininpunaisen
   pinnan muunnokset, joilla samat komponentit toimivat myös tummalla.
   ========================================================================== */

/* --- Taulukot ---------------------------------------------------------- */

.bk-palvelu-taulu {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--brd-s);
}

.bk-palvelu-taulu caption {
	text-align: left;
}

.bk-palvelu-taulu th,
.bk-palvelu-taulu td {
	padding: 14px 16px 14px 0;
	border-bottom: 1px solid var(--bk-viiva);
	text-align: left;
	vertical-align: top;
}

.bk-palvelu-taulu thead th {
	border-bottom: 1px solid var(--bk-viiva-vahva);
	font-family: var(--brd-leipa);
	font-size: var(--brd-xs);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bk-harmaa);
}

.bk-palvelu-taulu tbody th {
	font-weight: 500;
	color: var(--bk-musta);
}

.bk-palvelu-taulu td {
	font-variant-numeric: tabular-nums;
	color: var(--bk-teksti);
}

.bk-palvelu-taulu--vertailu td {
	font-variant-numeric: normal;
	width: 34%;
}

/* --- Hinnaston ehdot --------------------------------------------------- */

.bk-palvelu-ehdot {
	display: flex;
	flex-wrap: wrap;
	gap: 0 48px;
	margin: 24px 0 0;
}

.bk-palvelu-ehdot > div {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 10px 0;
}

.bk-palvelu-ehdot dt {
	font-size: var(--brd-xs);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bk-harmaa);
}

.bk-palvelu-ehdot dd {
	margin: 0;
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: var(--brd-m);
	font-variant-numeric: tabular-nums;
	color: var(--bk-musta);
}

.bk-palvelu-pikku {
	margin: 12px 0 0;
	max-width: 68ch;
	font-size: var(--brd-xs);
	line-height: 1.6;
	color: var(--bk-harmaa);
}

/* --- Merkkauspaikat ---------------------------------------------------- */

.bk-palvelu-paikat {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.bk-palvelu-paikat__otsikko {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bk-viiva-vahva);
}

.bk-palvelu-paikat__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bk-palvelu-paikat__lista li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--bk-viiva);
	font-size: var(--brd-s);
	color: var(--bk-musta);
}

.bk-palvelu-paikat__koko {
	font-size: var(--brd-xs);
	font-variant-numeric: tabular-nums;
	color: var(--bk-harmaa);
	white-space: nowrap;
}

.bk-palvelu-paikat__tapa {
	flex-basis: 100%;
	font-size: var(--brd-xs);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bk-harmaa);
}

/* --- Polku -------------------------------------------------------------- */

.bk-palvelu-polku {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bk-palvelu-polku > li {
	padding-top: 16px;
	border-top: 1px solid var(--bk-viiva-vahva);
}

.bk-palvelu-polku__numero {
	display: block;
	margin-bottom: 10px;
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: var(--brd-l);
	font-variant-numeric: tabular-nums;
	color: var(--bk-korostus);
}

.bk-palvelu-polku__teksti {
	margin: 0;
	font-size: var(--brd-s);
	line-height: 1.6;
	color: var(--bk-teksti);
}

/* --- Kysymykset --------------------------------------------------------- */

.bk-palvelu-kysymykset {
	max-width: 76ch;
	border-top: 1px solid var(--bk-viiva-vahva);
}

.bk-palvelu-kysymys {
	border-bottom: 1px solid var(--bk-viiva);
}

.bk-palvelu-kysymys > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	padding: 14px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: var(--brd-m);
	letter-spacing: var(--bk-otsikko-valjennys);
	color: var(--bk-musta);
}

.bk-palvelu-kysymys > summary::-webkit-details-marker {
	display: none;
}

.bk-palvelu-kysymys > summary::after {
	content: "+";
	flex: none;
	font-family: var(--brd-leipa);
	font-size: var(--brd-m);
	line-height: 1;
	color: var(--bk-harmaa);
}

.bk-palvelu-kysymys[open] > summary::after {
	content: "\2212";
}

.bk-palvelu-kysymys > summary:hover {
	color: var(--bk-korostus);
}

.bk-palvelu-kysymys > p {
	margin: 0 0 18px;
	max-width: 68ch;
	font-size: var(--brd-s);
	line-height: 1.65;
	color: var(--bk-teksti);
}


@media (max-width: 1024px) {
	.bk-palvelu-paikat,
	.bk-palvelu-polku {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}
}

@media (max-width: 767px) {
	.bk-palvelu__osio {
		padding-block: 40px;
	}

	.bk-palvelu__ingressi {
		font-size: var(--brd-s);
	}

	.bk-palvelu-paikat,
	.bk-palvelu-polku {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* Taulukot pinoiksi: kolme saraketta ei mahdu 375 pikselille luettavana. */
	.bk-palvelu-taulu,
	.bk-palvelu-taulu tbody,
	.bk-palvelu-taulu tr,
	.bk-palvelu-taulu tbody th,
	.bk-palvelu-taulu td {
		display: block;
		width: auto;
	}

	.bk-palvelu-taulu thead {
		display: none;
	}

	.bk-palvelu-taulu tr {
		padding: 14px 0;
		border-bottom: 1px solid var(--bk-viiva);
	}

	.bk-palvelu-taulu tbody th,
	.bk-palvelu-taulu td {
		padding: 2px 0;
		border-bottom: 0;
	}

	.bk-palvelu-taulu tbody th {
		font-family: var(--bk-otsikko-fontti);
		font-weight: var(--bk-otsikko-paino);
		font-size: var(--brd-m);
		letter-spacing: var(--bk-otsikko-valjennys);
	}

	.bk-palvelu-taulu td::before {
		content: attr(data-title) ": ";
		color: var(--bk-harmaa);
	}
}

/* --- Komponenttien omat otsikot ---------------------------------------- */

.bk-palvelu-paikat__otsikko,
.bk-palvelu-polku__otsikko {
	margin: 0 0 6px;
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: var(--brd-m);
	letter-spacing: var(--bk-otsikko-valjennys);
	color: var(--bk-musta);
}

/* ==========================================================================
   Tummalla pinnalla
   Etusivun musta osio saa värinsä elementtikohtaisesta CSS:stä, joka on
   kirjoitettu Elementoriin yhden osion tunnuksella. Palvelusivuilla sama
   ratkaisu tarkoittaisi samojen sääntöjen toistamista jokaisella sivulla,
   joten tässä muunnos on komponentin oma: otsikko ja tilauspolku saavat
   tumman version omalla luokallaan. Elementorin säiliön CSS-luokkakenttä
   ei kelvannut, koska se ei päädy säiliön luokkalistaan lainkaan.
   ========================================================================== */

/* Osiolabelin perusvari on harmaa #6B6B6B, joka mustalla pinnalla
   jaa lukukelvottomaksi. */
.bk-osiolabel--tumma {
	color: #B0AAA8;
}

.bk-osiotunniste--tumma {
	border-top-color: rgba(255, 255, 255, .22);
}

.bk-osiotunniste--tumma .bk-osiotunniste__nimi {
	color: #FFFFFF;
}

.bk-palvelu-polku--tumma > li {
	border-top-color: rgba(255, 255, 255, .38);
}

.bk-palvelu-polku--tumma .bk-palvelu-polku__otsikko {
	color: #FFFFFF;
}

.bk-palvelu-polku--tumma .bk-palvelu-polku__numero {
	/* Viininpunainen ei erotu mustalta. Sama kirkastettu sävy kuin
	   etusivun mustassa osiossa. */
	color: #C4384F;
}

.bk-palvelu-polku--tumma .bk-palvelu-polku__teksti {
	color: #B0AAA8;
}

/* ==========================================================================
   Viininpunainen loppukutsu
   Sama pinta kuin etusivun alimmassa osiossa, jotta sivujen loppu tuntuu
   samalta paikalta.
   ========================================================================== */

.bk-kutsu-rivi {
	margin: 0 0 14px;
	max-width: 24ch;
	font-family: var(--bk-otsikko-fontti);
	font-weight: var(--bk-otsikko-paino);
	font-size: clamp( 1.9rem, 3.4vw, 2.6rem );
	line-height: 1.14;
	letter-spacing: var(--bk-otsikko-valjennys);
	color: #FFFFFF;
}

.bk-kutsu-yhteys {
	margin: 0;
	font-size: var(--brd-s);
	line-height: 1.7;
	color: rgba(255, 255, 255, .82);
}

.bk-kutsu-yhteys a {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .45);
}

.bk-kutsu-yhteys a:hover,
.bk-kutsu-yhteys a:focus {
	border-bottom-color: #FFFFFF;
	color: #FFFFFF;
}


/* ==========================================================================
   Osaston esittelyteksti
   Kuvaus oli yksi kappale, jossa rivinvaihdot olivat <br>-elementteja: kolme
   virkeryhmaa ilman valia, 744 pikselia leveana ja 247 pikselia korkeana
   seinana ennen suodattimia. Nyt karki on isompana ja loput haitarin takana,
   jolloin tuotteet alkavat heti mutta teksti sailyy sivun HTML:ssa.
   ========================================================================== */

.bk-osastoteksti {
	margin: 0 0 8px;
}

.bk-osastoteksti__karki {
	margin: 0;
	max-width: 62ch;
	font-size: var(--brd-m);
	line-height: 1.5;
	color: var(--bk-musta);
}

.bk-osastoteksti__lisaa {
	margin-top: 14px;
}

.bk-osastoteksti__lisaa > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	list-style: none;
	cursor: pointer;
	font-family: var(--brd-leipa);
	font-size: var(--brd-xs);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bk-harmaa);
}

.bk-osastoteksti__lisaa > summary::-webkit-details-marker {
	display: none;
}

.bk-osastoteksti__lisaa > summary::after {
	content: "+";
	font-weight: 400;
	font-size: var(--brd-s);
	line-height: 1;
}

.bk-osastoteksti__lisaa[open] > summary::after {
	content: "\2212";
}

.bk-osastoteksti__lisaa > summary:hover,
.bk-osastoteksti__lisaa > summary:focus-visible {
	color: var(--bk-musta);
}

/*
 * Kaksi palstaa leveilla naytoilla: kaksi kappaletta rinnakkain lukeutuu
 * paremmin kuin kaksi 62 merkin riviparia allekkain, ja osio pysyy matalana.
 */
.bk-osastoteksti__loput {
	padding-top: 4px;
	columns: 2;
	column-gap: 48px;
	max-width: 96ch;
}

.bk-osastoteksti__loput p {
	margin: 0 0 14px;
	font-size: var(--brd-s);
	line-height: 1.65;
	color: var(--bk-teksti);
	break-inside: avoid;
}

.bk-osastoteksti__loput p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.bk-osastoteksti__karki {
		font-size: var(--brd-s);
	}

	.bk-osastoteksti__loput {
		columns: 1;
	}
}


/* ==========================================================================
   Kosketuskohteet ja nappien yhtenäisyys

   Mitattu brodetic.fi:stä 390 px leveydellä: väripallo oli 34x34,
   erittelyn määräkenttä 34x42 ja kokopainike 48x42. Sormenpään
   osumatarkkuus vaatii 44x44, joten kosketuslaitteilla kasvatetaan.
   Hiirellä koko säilyy tiiviinä.
   ========================================================================== */

@media (pointer: coarse) {

	.bk-varit__pallo {
		width: 2.75rem;
		height: 2.75rem;
	}

	.bk-koot__nappi {
		min-height: 2.75rem;
		min-width: 3.25rem;
	}

	/* reset.css asettaa input[type="number"]:lle width:100%, joka on
	   tarkempi kuin pelkkä luokka. Taulukko mukaan valitsimeen. */
	.bk-erittely__taulukko input.bk-erittely__kentta {
		min-width: 2.75rem;
		min-height: 2.75rem;
	}

	.bk-valinta__maara input.qty,
	.woocommerce div.product form.cart .quantity input.qty {
		min-height: 2.75rem;
	}

	.bk-paikka__label {
		min-height: 2.75rem;
	}

	.bk-suodatin__kohta {
		min-height: 2.75rem;
	}

	/* Väripalloja on hupparissa 24. Isommat pallot tarvitsevat väljemmän
	   välin, ettei viereiseen osu vahingossa. */
	.bk-varit__lista {
		gap: 0.7rem;
	}
}

/* Painikkeet brändin sävyyn ja suorakulmaisiksi.

   HUOM. Tuotesivun "Lisää ostoskoriin" jää tämän ulkopuolelle: sen värin
   #530000 asettaa Elementorin elementtikohtainen tyyli tuotepohjassa
   (post-203.css, elementti daeb4ff). Se voitetaan vain !important-
   säännöllä, eikä liitännäisen kuulu ohittaa sivuston omia
   Elementor-asetuksia. Väri vaihdetaan Elementorista. Pyöristys sen
   sijaan menee läpi, koska Elementor ei aseta sitä. */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
	background-color: var(--bk-korostus);
	border-color: var(--bk-korostus);
	color: #fff;
	border-radius: 0;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:focus,
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus,
.woocommerce input.button.alt:hover,
.woocommerce input.button.alt:focus {
	background-color: var(--bk-korostus-tumma);
	border-color: var(--bk-korostus-tumma);
	color: #fff;
}

/* Tuotekortin merkkausrivi jäi teeman säännöllä 11 pikseliin, mikä on
   puhelimessa liian pientä luettavaksi. */
.woocommerce ul.products li.product .bk-kortti__merkkaus {
	font-size: 0.8125rem;
}

/* Tuoteruudukon jälkeinen nappi meni korttien päälle puhelimessa.

   Mitattu brodetic.fi:n etusivulta 393 px leveydellä: kortit ylittävät
   ul.products-laatikon alareunan 38 pikselillä, koska Elementor käärii
   listan flex-sarakkeeseen, jossa widgetin korkeus jää listaa pienemmäksi.
   Seuraava lohko sijoittuu widgetin mukaan, joten 40 px marginaalista jäi
   näkyviin vain 2 px — ja kun kortin merkkausrivi rivittyy kahdelle
   riville, nappi peittää korttien omat painikkeet.

   Nappi seuraa listan alamarginaalia, joten marginaalin kasvattaminen
   siirtää sen turvalliselle etäisyydelle: 80 px antaa 42 px välin.
   Työpöydällä väli on jo 60 px, joten sääntö rajataan kapeisiin
   näyttöihin. */
@media (max-width: 48rem) {
	.woocommerce ul.products {
		margin-bottom: 5rem;
	}
}