/* =================================================================
   BIM B2B — ulkoasu
   Lähde: B2B-katalogi.dc.html (claude.ai/design)

   OSA 1  Designtokenit        — varmasti oikein, riippumaton teemasta
   OSA 2  WooCommerce-tyylit   — ensimmäinen veto, hienosäätö asennuksen
                                 jälkeen selaimessa
   ================================================================= */


/* ===== OSA 0 — itse-isännöidyt fontit (10.9.2026) ==================
   Titillium Web = blueimport.fi:n oma kirjasin · IBM Plex Mono = koodit
   (designin valinta). Tiedostot assets/fontit/, ei Google-latauksia (GDPR).
   ================================================================= */
@font-face { font-family: "Titillium Web"; font-weight: 300; font-style: normal; font-display: swap;
	src: url("fontit/TitilliumWeb-300.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 400; font-style: normal; font-display: swap;
	src: url("fontit/TitilliumWeb-400.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 600; font-style: normal; font-display: swap;
	src: url("fontit/TitilliumWeb-600.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 700; font-style: normal; font-display: swap;
	src: url("fontit/TitilliumWeb-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
	src: url("fontit/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap;
	src: url("fontit/IBMPlexMono-500.woff2") format("woff2"); }

/* ===== OSA 1 — designtokenit =====================================
   Värit poimittu blueimport.fi:n omasta tyylistä 8.8.2026:
     brändisininen #0088CE · tumma navy #053E58 · välisininen #0E6288
     leipäteksti  #33373D · harmaa #9F9F9F
   Vaihda brändiväri tästä yhdestä paikasta.
   ================================================================= */

:root {
	/* Brändi — Blue Import BIM Oy */
	--bim-paa:          #0088CE;   /* brändisininen */
	--bim-paa-tumma:    #053E58;   /* navy, otsikkopalkki */
	--bim-paa-keski:    #0E6288;
	--bim-korostus:     #053E58;   /* uutuusmerkki — navy, ei kilpaile napin kanssa */

	/* Pinnat — neutraali harmaa, ei enää lämmin kerma */
	--bim-tausta:       #F4F6F8;
	--bim-paneeli:      #FAFBFC;
	--bim-kortti:       #ffffff;
	--bim-kerma:        #EEF2F5;
	--bim-kerma-2:      #E9EEF2;

	/* Teksti */
	--bim-teksti:       #33373D;
	--bim-harmaa:       #55595F;
	--bim-harmaa-2:     #6B7076;
	--bim-vaalea:       #9F9F9F;
	--bim-haamu:        #B4B8BC;

	/* Reunat */
	--bim-reuna:        #E2E7EB;
	--bim-reuna-2:      #D6DCE1;
	--bim-reuna-3:      #C3CAD1;

	/* Huomiovärit — vaalea sininen, ei oranssi */
	--bim-huomio-bg:    #E6F4FB;
	--bim-huomio-reuna: #C4E3F4;
	--bim-huomio-tekst: #053E58;

	/* Typografia
	   HUOM: Google Fonts -latausta EI käytetä. Suora lataus Googlelta on
	   EU:ssa henkilötiedon (IP) siirtoa kolmanteen maahan. Jos Archivo ja
	   IBM Plex Mono halutaan, ne on itse-isännöitävä teeman assets-kansiosta
	   ja lisättävä tähän @font-face-säännöillä. */
	--bim-fontti:       "Titillium Web", -apple-system, BlinkMacSystemFont,
	                    "Segoe UI", Helvetica, Arial, sans-serif;
	--bim-mono:         "IBM Plex Mono", ui-monospace, SFMono-Regular,
	                    Menlo, Consolas, monospace;

	--bim-pyoristys:    10px;
	--bim-pyoristys-s:  5px;
}


/* ===== OSA 2 — WooCommerce ======================================= */

body,
body.woocommerce {
	background: var(--bim-tausta);
	color: var(--bim-teksti);
	font-family: var(--bim-fontti);
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}

/* Taustakuva: blueimport.fi/asiakkuus -sivun kuva hyvin haaleana.
   Kiinnitetty ja peittävä, jotta se ei toistu eikä liiku sisällön mukana —
   pelkkä vivahde, ei kuvio joka kilpailee tuotekuvien kanssa. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(to bottom,
			rgba(244,246,248,.90) 0%,
			rgba(244,246,248,.94) 45%,
			rgba(244,246,248,.98) 100%),
		url("kuvat/tausta.jpg") center / cover no-repeat;
	opacity: .55;
	/* Näkyvä osuus kuvasta ≈ 5 % ylhäällä, ≈ 1 % alhaalla: vivahde joka
	   antaa syvyyttä mutta ei kilpaile tuotekuvien kanssa. Säädä tästä. */
}
/* Sisältöpinnat läpikuultamattomina, jotta teksti pysyy luettavana */
.site-content,
.woocommerce ul.products li.product,
.bim-taulu,
.widget-area { position: relative; }

h1, h2, h3, h4 {
	font-family: var(--bim-fontti);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--bim-teksti);
}

/* --- Otsikkopalkki --- */
.site-header {
	background: var(--bim-paa);
	color: #fff;
	border-bottom: none;
	padding: 0;
}
.site-header a,
.site-header .site-title a { color: #fff; }
.site-branding .site-title { font-weight: 700; letter-spacing: .04em; }

/* --- Logo otsikkopalkin kulmassa --- */
.bim-brandi { margin: 0; padding: 10px 0; }
.bim-brandi a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}
.bim-brandi img {
	width: 52px;
	height: 52px;
	display: block;
	/* Logo on sininen läpinäkyvällä taustalla — navypalkilla se sulaisi
	   taustaan, joten valkoinen levy alle. */
	background: #fff;
	border-radius: 50%;
	padding: 3px;
}
.bim-brandi-teksti {
	color: #fff;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: .02em;
	opacity: .85;
}
@media (max-width: 600px) {
	.bim-brandi-teksti { display: none; }
}

.storefront-primary-navigation,
.main-navigation {
	background: var(--bim-paa-tumma);
}
.main-navigation ul li a {
	color: rgba(255,255,255,.8);
	font-size: 13.5px;
	padding: 12px 10px;
}
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li a:hover {
	color: #fff;
	font-weight: 600;
	box-shadow: inset 0 -2px 0 var(--bim-korostus);
}

/* --- Ennakkomyyntipalkki (functions.php) --- */
.bim-palkki {
	background: var(--bim-huomio-bg);
	border-bottom: 1px solid var(--bim-huomio-reuna);
	color: var(--bim-huomio-tekst);
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 12px 16px;
	margin: 0 0 24px;
	font-size: 13.5px;
}
.bim-leima {
	background: var(--bim-korostus);
	color: #fff;
	font-family: var(--bim-mono);
	font-size: 11px;
	letter-spacing: .1em;
	padding: 4px 8px;
	border-radius: var(--bim-pyoristys-s);
	white-space: nowrap;
}

/* --- Tuotekortti --- */
.woocommerce ul.products li.product {
	background: var(--bim-kortti);
	border: 1px solid var(--bim-reuna);
	border-radius: var(--bim-pyoristys);
	padding: 0 0 15px;
	overflow: hidden;
	text-align: left;
	position: relative;
	/* Pystysuunnan pino, jotta nappi voidaan painaa kortin alalaitaan —
	   muuten 1- ja 2-riviset otsikot jättävät napit eri korkeuksille. */
	display: flex;
	flex-direction: column;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: 2.7em;
}
.woocommerce ul.products li.product .yith-ywraq-add-to-quote {
	margin-top: auto;
}
/* Ruudukko. Storefrontin oma leveyslaskenta elää media queryissä, joten
   ruudukko rakennetaan tässä uusiksi. Mobiilissa 2 rinnakkain — yksi kortti
   per rivi tekee selauksesta loputtoman. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
/* WooCommercen clearfix-pseudoelementit ovat display:table ja muuttuvat
   gridissä omiksi soluikseen — ::before söi ensimmäisen paikan, jolloin
   rivin viimeinen tuote työntyi seuraavalle riville. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}
@media (min-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 18px;
	}
}

/* Kuva-alue 1:1. Kiinteä korkeus jätti eri muotoisille tuotekuville tyhjää
   ylä- ja alalaitaan; neliö täyttää kortin leveyden ja pitää rivin tasaisena.
   contain, ei cover: valkotaustaiset tuotekuvat eivät saa leikkautua. */
.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	margin: 0 0 12px;
	padding: 14px;
	background: #fff;
	border-bottom: 1px solid var(--bim-reuna);
	border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	padding: 0 14px;
	margin: 0 0 8px;
	text-wrap: pretty;
}
.woocommerce ul.products li.product .price {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--bim-teksti);
	padding: 0 14px;
	display: block;
	margin: 0 0 10px;
}

.bim-uutuus {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: var(--bim-korostus);
	color: #fff;
	font-family: var(--bim-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	padding: 3px 7px;
	border-radius: 2px;
}

/* --- Koodi, EAN, myyntierä (functions.php) --- */
.bim-meta {
	padding: 0 14px;
	margin: 0 0 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.bim-koodi,
.bim-ean {
	font-family: var(--bim-mono);
	font-size: 11.5px;
	color: var(--bim-vaalea);
}
.bim-koodi { color: var(--bim-teksti); font-weight: 500; }
.bim-siru {
	background: var(--bim-kerma-2);
	border-radius: var(--bim-pyoristys-s);
	padding: 3px 7px;
	font-size: 11.5px;
}
.bim-siru.bim-tyhja {
	background: none;
	border: 1px dashed var(--bim-reuna-3);
	color: var(--bim-haamu);
}

/* Puuttuva tieto näkyy puuttuvana — ei piiloteta. */
.bim-puuttuu {
	color: var(--bim-haamu);
	font-style: italic;
	font-weight: 400;
}

/* --- Napit --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--bim-paa);
	color: #fff;
	font-family: var(--bim-fontti);
	font-size: 13px;
	font-weight: 600;
	border-radius: 4px;
	padding: 10px 14px;
	text-shadow: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--bim-paa-tumma);
	color: #fff;
}

/* --- Tuotesivu --- */
.single-product div.product .product_title {
	font-size: 29px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}
.single-product div.product .summary .price {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--bim-teksti);
}
.single-product div.product .summary .sku_wrapper {
	font-family: var(--bim-mono);
	font-size: 12.5px;
	color: var(--bim-harmaa-2);
}

/* Välilehdet */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0 20px;
	margin: 0;
	border-bottom: 1px solid var(--bim-reuna);
	background: var(--bim-kortti);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 15px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bim-vaalea);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--bim-teksti);
	box-shadow: inset 0 -2px 0 var(--bim-korostus);
}
.woocommerce div.product .woocommerce-tabs .panel {
	background: var(--bim-kortti);
	border: 1px solid var(--bim-reuna);
	border-top: none;
	padding: 22px 20px 26px;
	margin: 0;
}

/* Spec-taulukot: sekä Woon oma että oma logistiikkavälilehti */
.woocommerce table.shop_attributes,
table.bim-spec {
	width: 100%;
	border: none;
	border-collapse: collapse;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td,
table.bim-spec th,
table.bim-spec td {
	border: none;
	border-bottom: 1px solid #EDEBE3;
	padding: 10px 0;
	font-size: 13.5px;
	font-style: normal;
	background: none;
}
.woocommerce table.shop_attributes th,
table.bim-spec th {
	color: var(--bim-harmaa-2);
	font-weight: 400;
	text-align: left;
	width: 210px;
}
.woocommerce table.shop_attributes td,
table.bim-spec td { font-weight: 500; }

/* --- Kori ja taulukot --- */
.woocommerce table.shop_table {
	background: var(--bim-kortti);
	border: 1px solid var(--bim-reuna);
	border-radius: var(--bim-pyoristys);
}
.woocommerce table.shop_table thead th {
	background: var(--bim-kerma);
	font-family: var(--bim-mono);
	font-size: 11px;
	letter-spacing: .09em;
	color: var(--bim-harmaa-2);
	font-weight: 400;
}

/* --- Sivupalkki (suodattimet) --- */
.widget-area .widget {
	background: none;
	padding: 0 0 24px;
}
.widget-area .widget h2,
.widget-area .widget .widget-title {
	font-family: var(--bim-mono);
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--bim-vaalea);
	font-weight: 400;
	text-transform: uppercase;
}

/* --- Ei saldoa B2B-katalogissa --- */
.woocommerce div.product .stock,
.woocommerce ul.products li.product .stock { display: none; }


/* ===== OSA 3 — asettelu ==========================================
   Sivupalkki on suodatinpaneeli ja kuuluu vasemmalle vain osastosivuille.
   Muualla sisältö vie koko leveyden.
   ================================================================= */

/* Storefront rajaa sisällön 1170 px:iin. B2B-katalogissa taulukko tarvitsee
   koko ruudun — levennetään kauppasivuilla, ei koko sivustolla. */
.bim-suodattimet .col-full,
.bim-koko-leveys.woocommerce .col-full,
.bim-koko-leveys.woocommerce-page .col-full {
	max-width: 1720px;
	padding-left: 28px;
	padding-right: 28px;
}

.bim-koko-leveys .content-area { width: 100%; float: none; margin-right: 0; }
.bim-koko-leveys .widget-area { display: none; }

@media (min-width: 768px) {
	.bim-suodattimet .content-area {
		width: calc(100% - 262px);
		float: right;
		margin-right: 0;
	}
	.bim-suodattimet .widget-area {
		width: 230px;
		float: left;
	}
}

/* --- Sivupalkin navigaatio: Kuvastot + Selaa tuoteryhmittäin --- */
.bim-navi-osio { margin: 0 0 30px; }
.bim-navi-osio ul { list-style: none; margin: 0; padding: 0; }
.bim-navi-osio li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14px;
	line-height: 1.45;
	padding: 4px 0;
	border: none;
}
.bim-navi-osio li a {
	color: var(--bim-teksti);
	text-decoration: none;
	flex: 1;
	min-width: 0;
}
.bim-navi-osio li a:hover { color: var(--bim-paa); }
.bim-navi-osio li .count {
	color: var(--bim-vaalea);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	flex: none;
}
.bim-navi-osio li.bim-valittu a {
	font-weight: 600;
	color: var(--bim-paa);
}
/* Tuoteryhmät erottuvat kuvastoista omana lohkonaan */
.bim-navi-osio + .bim-navi-osio {
	border-top: 1px solid var(--bim-reuna);
	padding-top: 22px;
}

/* --- Suodatinpaneeli --- */
.bim-suodattimet .widget-area .widget { margin-bottom: 26px; }
.bim-suodattimet .widget-area ul { list-style: none; margin: 0; padding: 0; }
.bim-suodattimet .widget-area li {
	font-size: 13.5px;
	line-height: 1.5;
	padding: 3px 0;
	border: none;
}
.bim-suodattimet .widget-area li a { color: var(--bim-teksti); }
.bim-suodattimet .widget-area li a:hover { color: var(--bim-paa); }
.bim-suodattimet .widget-area li .count {
	color: var(--bim-vaalea);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	float: right;
}
.bim-suodattimet .widget-area li.chosen a,
.bim-suodattimet .widget-area li.current-cat > a {
	font-weight: 600;
	color: var(--bim-paa);
}
.widget_layered_nav_filters ul li a {
	background: var(--bim-huomio-bg);
	color: var(--bim-huomio-tekst);
	border-radius: var(--bim-pyoristys-s);
	padding: 3px 8px;
	display: inline-block;
}

/* --- Työkalurivi ja näkymän vaihto --- */
/* Storefront kelluttaa lajittelun oikealle ja tuloslaskurin vasemmalle.
   clear:both nostaa työkalut omalle rivilleen — muuten ne menivät
   tuloslaskurin päälle. */
.bim-tyokalut {
	clear: both;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin: 0 0 18px;
	padding-top: 4px;
}
.bim-vaihdin {
	display: inline-flex;
	border: 1px solid var(--bim-reuna-3);
	border-radius: 4px;
	overflow: hidden;
}
.bim-vaihdin a {
	padding: 7px 12px;
	font-size: 13px;
	color: var(--bim-harmaa);
	background: #fff;
	text-decoration: none;
}
.bim-vaihdin a.on { background: var(--bim-teksti); color: #fff; }


/* ===== OSA 4 — tarjouspyyntönappi tuotekortissa ==================
   YITH:n nappi tulee shortcodella ilman kortin tyyliä — tehdään siitä
   kortin päänappi.
   ================================================================= */

.woocommerce ul.products li.product .yith-ywraq-add-to-quote {
	margin: 0 14px 6px;
}
.woocommerce ul.products li.product .add-request-quote-button,
.woocommerce .add-request-quote-button.button {
	display: block;
	text-align: center;
	background: var(--bim-paa);
	color: #fff !important;
	border-radius: 4px;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.woocommerce ul.products li.product .add-request-quote-button:hover,
.woocommerce .add-request-quote-button.button:hover {
	background: var(--bim-paa-tumma);
	text-decoration: none;
}
/* YITH:n latausanimaatio on aina DOM:issa ja vie 37 px pystytilaa, vaikka
   näkyy vain hetken. Nostetaan se napin päälle, jotta se ei kasvata riviä. */
.yith-ywraq-add-button { position: relative; }
.yith-ywraq-add-to-quote img.ajax-loading {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 !important;
	width: 16px;
	height: 16px;
}
.yith-ywraq-add-to-quote .clear { display: none; }

/* AJAX-viestit lisäyksen jälkeen ("Tuote lisätty…", "Näytä tarjouspyyntö")
   — pieninä napin alla, ei otsikkokokoisina */
.woocommerce .yith_ywraq_add_item_response_message,
.woocommerce .yith_ywraq_add_item_browse_message {
	font-size: 12px;
	line-height: 1.4;
	padding: 4px 0 0;
	text-align: center;
}
.woocommerce ul.products li.product .yith_ywraq_add_item_response_message {
	color: var(--bim-harmaa-2);
	font-style: italic;
}
.woocommerce .yith_ywraq_add_item_browse_message a {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bim-paa);
}
/* Kortin "Katso tuote" -linkki on toissijainen kun tarjouspyyntö on päätoiminto */
.woocommerce ul.products li.product > a.button {
	background: none;
	color: var(--bim-paa);
	border: 1px solid var(--bim-reuna-3);
	margin: 0 14px 8px;
	display: block;
	text-align: center;
}


/* ===== OSA 5 — listanäkymä =======================================
   Taulukko designin 1b:n mukaan. li.product sisältää TÄSMÄLLEEN yhden
   lapsen (.bim-rivi), joka on itse ruudukko — myös tarjousnappi on sen
   sisällä. Näin Storefrontin korttitylitys ei pääse sotkemaan asettelua.
   Resetit !important-merkittyjä, koska Storefrontin li.product-säännöt
   elävät media queryissä.
   ================================================================= */

/* Otsikkorivi ja tuoterivit samassa vaakavieritettävässä säiliössä, jotta
   sarakkeet pysyvät kohdakkain myös kapealla ruudulla. */
.bim-taulu {
	background: var(--bim-kortti);
	border: 1px solid var(--bim-reuna);
	border-radius: var(--bim-pyoristys);
	overflow-x: auto;
}

.bim-lista.woocommerce ul.products,
.bim-lista.woocommerce-page ul.products {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none;
	border: 0;
	border-radius: 0;
}
.bim-lista.woocommerce ul.products li.product,
.bim-lista.woocommerce-page ul.products li.product {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	clear: both !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	text-align: left !important;
	box-shadow: none !important;
}

/* --- rivin ruudukko --- */
.bim-rivi {
	display: grid;
	/* KAIKKI sarakkeet kiinteitä. 1fr laski eri leveyden otsikkoriville ja
	   datariveille, koska ne ovat eri levyisissä säiliöissä (ul.products
	   ylittää .bim-taulun) — silloin arvot valuivat väärän otsikon alle. */
	grid-template-columns:
		96px 44px 380px 132px 70px 90px 70px 90px 270px;
	align-items: center;
	column-gap: 12px;
	padding: 7px 14px;
	border-bottom: 1px solid #EDEBE3;
	min-width: 1040px;
	font-size: 13px;
}
.bim-rivi > span { min-width: 0; }

.bim-rivi-otsikko {
	background: var(--bim-kerma);
	border-bottom: 1px solid var(--bim-reuna);
	font-family: var(--bim-mono);
	font-size: 10.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bim-harmaa-2);
	padding-top: 10px;
	padding-bottom: 10px;
	position: sticky;
	top: 0;
	z-index: 2;
}
.bim-rivi-otsikko span:nth-child(7),
.bim-rivi-otsikko span:nth-child(8) { text-align: right; }
.bim-rivi-otsikko span:nth-child(9) { text-align: right; }

.bim-lista.woocommerce ul.products li.product:last-child .bim-rivi {
	border-bottom: none;
}
.bim-lista.woocommerce ul.products li.product:hover .bim-rivi {
	background: #FAFAF8;
}

/* --- sarakkeet --- */
.bim-s-koodi a {
	font-family: var(--bim-mono);
	font-size: 12px;
	font-weight: 500;
	color: var(--bim-teksti);
	text-decoration: none;
}
.bim-s-kuva a {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 3px;
	overflow: hidden;
	background: var(--bim-kerma);
}
.bim-lista.woocommerce ul.products li.product .bim-s-kuva img {
	width: 40px !important;
	height: 40px !important;
	object-fit: cover;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.bim-s-tuote {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bim-s-tuote a {
	font-weight: 600;
	color: var(--bim-teksti);
	text-decoration: none;
	font-size: 13px;
}
.bim-s-tuote a:hover { color: var(--bim-paa); }
.bim-rivi-brandi {
	font-family: var(--bim-mono);
	font-size: 10.5px;
	letter-spacing: .08em;
	color: var(--bim-vaalea);
	margin-left: 6px;
}
.bim-lista .bim-uutuus {
	position: static;
	display: inline-block;
	margin: 0 0 0 6px;
	vertical-align: 1px;
	background: var(--bim-huomio-bg);
	color: var(--bim-oranssi, #C25A1E);
	font-size: 9.5px;
	padding: 2px 6px;
}
.bim-s-ean {
	font-family: var(--bim-mono);
	font-size: 11.5px;
	color: var(--bim-harmaa-2);
	white-space: nowrap;
}
.bim-s-era,
.bim-s-toimitus { font-size: 12.5px; white-space: nowrap; }
.bim-s-ovh,
.bim-s-netto { text-align: right; font-size: 12.5px; white-space: nowrap; }
.bim-s-netto { font-weight: 700; font-size: 13.5px; }
.bim-s-netto .bim-puuttuu { font-weight: 400; font-size: 12px; }
.bim-s-netto .price { font-size: inherit; margin: 0; }

/* --- tarjousnappi rivin lopussa --- */
.bim-s-maara { justify-self: end; width: 100%; }
.bim-lista .yith-ywraq-add-to-quote { margin: 0 !important; }
.bim-lista .add-request-quote-button {
	display: block;
	padding: 6px 10px !important;
	font-size: 12px !important;
	line-height: 1.25 !important;
	text-align: center;
	border-radius: 3px;
}
.bim-lista .yith_ywraq_add_item_response_message,
.bim-lista .yith_ywraq_add_item_browse_message {
	padding: 2px 0 0;
	font-size: 10.5px;
	line-height: 1.3;
	text-align: center;
}

/* Listanäkymässä ei tarvita Storefrontin tulosmäärä/lajittelu-leijuntaa */
.bim-lista .woocommerce-result-count { margin-bottom: 0; }


/* ===== OSA 6 — alatunniste =======================================
   Rakenne blueimport.fi:n footerista: logo + luottoluokitusmerkit,
   yhteystiedot, materiaalit, sivut.
   ================================================================= */

.site-footer {
	background: var(--bim-paneeli);
	border-top: 1px solid var(--bim-reuna);
	color: var(--bim-teksti);
	padding: 0;
	margin-top: 48px;
}

.bim-footer {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	padding: 48px 0 40px;
	align-items: start;
}

.bim-footer-sarake h3 {
	color: var(--bim-paa);
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 18px;
	letter-spacing: 0;
}
.bim-footer-sarake ul { list-style: none; margin: 0; padding: 0; }
.bim-footer-sarake li { padding: 5px 0; }
.bim-footer-sarake a,
.bim-footer-sarake p {
	color: var(--bim-harmaa);
	font-size: 15px;
	line-height: 1.75;
	text-decoration: none;
}
.bim-footer-sarake a:hover { color: var(--bim-paa); text-decoration: underline; }
.bim-footer-sarake p { margin: 0; }

.bim-footer-logo { width: 100%; max-width: 300px; height: auto; margin: 0 0 26px; }
.bim-footer-merkit { display: flex; gap: 18px; align-items: center; }
.bim-footer-merkit img { width: 92px; height: auto; }

.bim-footer-alarivi {
	border-top: 1px solid var(--bim-reuna);
	padding: 18px 0 22px;
	font-size: 13px;
	color: var(--bim-vaalea);
}

@media (max-width: 1000px) {
	.bim-footer { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
	.bim-footer { grid-template-columns: 1fr; }
}


/* ===== OSA 7 — tuotesivun kuva ja lyhyt kuvaus ====================
   Kuva 1:1 ja isompana: Storefrontin oletus jätti pystykuville tyhjää.
   ================================================================= */

@media (min-width: 768px) {
	.single-product div.product .woocommerce-product-gallery { width: 46%; }
	.single-product div.product .summary { width: 50%; }
}
.woocommerce div.product div.images img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	padding: 18px;
	border: 1px solid var(--bim-reuna);
	border-radius: var(--bim-pyoristys);
}
.woocommerce div.product div.images .flex-control-thumbs li img {
	aspect-ratio: 1 / 1;
	padding: 6px;
}

/* Lyhyt kuvaus heti tuotenimen alle, ennen hintaa */
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 16px;
	line-height: 1.6;
	color: var(--bim-harmaa);
	margin: 0 0 var(--space, 18px);
	max-width: 60ch;
}
.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* --- Tuotetietojen vienti --- */
.bim-vienti {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--bim-reuna-3);
	background: #fff;
	color: var(--bim-paa);
	border-radius: 4px;
	padding: 7px 12px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.bim-vienti:hover { background: var(--bim-huomio-bg); text-decoration: none; }


/* ===== OSA 8 — etusivu ===========================================
   Tervetulonäkymä: hero, kuvastonostot ja kolmen askeleen ohje.
   ================================================================= */

.home .bim-palkki { display: none; }

.bim-hero {
	background: linear-gradient(135deg, var(--bim-paa-tumma), var(--bim-paa));
	color: #fff;
	border-radius: var(--bim-pyoristys);
	padding: 56px 48px 52px;
	margin: 0 0 32px;
}
.bim-hero-kicker {
	font-family: var(--bim-mono);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .75;
	margin: 0 0 12px;
}
.bim-hero h1 {
	color: #fff;
	font-size: 42px;
	line-height: 1.1;
	margin: 0 0 16px;
	max-width: 18ch;
}
.bim-hero-teksti {
	font-size: 17px;
	line-height: 1.6;
	max-width: 58ch;
	opacity: .92;
	margin: 0 0 28px;
}
.bim-hero-napit { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.bim-nappi {
	display: inline-block;
	padding: 13px 24px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}
.bim-nappi-ensisijainen { background: #fff; color: var(--bim-paa-tumma); }
.bim-nappi-ensisijainen:hover { background: #eaf4fb; color: var(--bim-paa-tumma); text-decoration: none; }
.bim-nappi-toissijainen { border: 1px solid rgba(255,255,255,.5); color: #fff; }
.bim-nappi-toissijainen:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }

/* Kuvastonostot */
.bim-kuvastot-nosto {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 36px;
}
.bim-kuvastot-nosto a {
	display: block;
	background: var(--bim-kortti);
	border: 1px solid var(--bim-reuna);
	border-left: 3px solid var(--bim-paa);
	border-radius: var(--bim-pyoristys);
	padding: 20px 22px;
	text-decoration: none;
	color: var(--bim-teksti);
}
.bim-kuvastot-nosto a:hover {
	border-left-color: var(--bim-paa-tumma);
	background: var(--bim-huomio-bg);
	text-decoration: none;
}
.bim-kuvastot-nosto strong { display: block; font-size: 18px; margin-bottom: 4px; }
.bim-kuvastot-nosto span { font-size: 13.5px; color: var(--bim-harmaa-2); }

/* Kolmen askeleen ohje */
.bim-ohje {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	padding: 32px 0 8px;
	border-top: 1px solid var(--bim-reuna);
}
.bim-ohje h3 {
	font-size: 16px;
	color: var(--bim-paa);
	margin: 0 0 8px;
}
.bim-ohje p { font-size: 14.5px; line-height: 1.6; color: var(--bim-harmaa); margin: 0; }

@media (max-width: 767px) {
	.bim-hero { padding: 36px 22px 34px; }
	.bim-hero h1 { font-size: 30px; }
	.bim-hero-teksti { font-size: 15.5px; }
	.bim-nappi { padding: 12px 18px; font-size: 14px; }
	.bim-kuvastot-nosto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.bim-kuvastot-nosto a { padding: 14px 15px; }
	.bim-kuvastot-nosto strong { font-size: 15px; }
	.bim-kuvastot-nosto span { font-size: 12px; }
	.bim-ohje { grid-template-columns: 1fr; gap: 18px; }
}


/* ===== OSA 9 — tarjouspyyntönappi kompaktiksi ====================
   YITH tulostaa oman inline-tyylinsä !importantilla, joten värit
   asetetaan lisäosan omasta asetuksesta (ywraq_add_to_quote_button_color).
   Täällä hoidetaan vain koko ja tyhjä tila.
   ================================================================= */

.woocommerce div.product .yith-ywraq-add-to-quote { margin: 0 0 14px; }
.woocommerce div.product .add-request-quote-button {
	display: inline-block !important;
	width: auto !important;
	padding: 11px 26px !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	border-radius: 4px;
}
.woocommerce div.product .yith-ywraq-add-button { display: inline-block; }

@media (max-width: 767px) {
	.woocommerce div.product .add-request-quote-button {
		width: 100% !important;
		padding: 11px 14px !important;
		font-size: 14px !important;
	}
}

/* Etusivun oma otsikko riittää — sivun nimi "Tervetuloa" on turha toisto */
.home .entry-header,
.home .entry-title { display: none; }
/* Storefront alleviivaa sisältölinkit; nostoissa ja napeissa se on häiriö */
.bim-kuvastot-nosto a,
.bim-kuvastot-nosto a strong,
.bim-hero a { text-decoration: none !important; box-shadow: none !important; }


/* ===== OSA 10 — mobiilin tuotekortti =============================
   TÄMÄN ON OLTAVA TIEDOSTON LOPUSSA. Aiemmin lohko oli ennen kortin
   perussääntöjä, jolloin samanpainoiset myöhemmät säännöt kumosivat sen
   eikä mikään mobiilisäätö purrut.
   ================================================================= */

@media (max-width: 767px) {
	.woocommerce ul.products li.product { padding-bottom: 12px; }
	.woocommerce ul.products li.product a img { padding: 8px; margin-bottom: 8px; }

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 12.5px;
		line-height: 1.3;
		padding: 0 10px;
		min-height: 3.2em;
		margin-bottom: 5px;
	}
	.woocommerce ul.products li.product .bim-meta {
		padding: 0 10px;
		gap: 3px;
		margin-bottom: 6px;
	}
	.woocommerce ul.products li.product .bim-koodi,
	.woocommerce ul.products li.product .bim-ean { font-size: 10.5px; }
	.woocommerce ul.products li.product .bim-siru { font-size: 10.5px; padding: 2px 5px; }

	.woocommerce ul.products li.product .price {
		font-size: 13px;
		padding: 0 10px;
		margin-bottom: 8px;
	}
	.woocommerce ul.products li.product .price .bim-puuttuu { font-size: 12px; }

	.woocommerce ul.products li.product .yith-ywraq-add-to-quote { margin: auto 10px 0; }
	.woocommerce ul.products li.product .add-request-quote-button {
		padding: 7px 6px !important;
		font-size: 11px !important;
		line-height: 1.3 !important;
		white-space: nowrap;
	}

	.bim-uutuus { font-size: 9.5px; padding: 2px 5px; top: 6px; left: 6px; }
}

/* Tilaviestit ("Lisätty pyyntöön" / "Näytä pyyntö") pieninä molemmissa
   näkymissä — oletuksena ne perivät kortin linkkikoon ja rivittyivät
   kolmelle riville. */
.woocommerce ul.products li.product .yith_ywraq_add_item_response_message,
.woocommerce ul.products li.product .yith_ywraq_add_item_browse_message,
.woocommerce ul.products li.product .yith_ywraq_add_item_response_message *,
.woocommerce ul.products li.product .yith_ywraq_add_item_browse_message * {
	font-size: 11.5px !important;
	line-height: 1.35 !important;
	font-weight: 500 !important;
	font-style: normal !important;
	text-align: center;
	margin: 0;
	padding: 0;
}
.woocommerce ul.products li.product .yith_ywraq_add_item_response_message {
	color: var(--bim-harmaa-2);
	padding: 6px 10px 2px !important;
}
.woocommerce ul.products li.product .yith_ywraq_add_item_browse_message {
	padding: 0 10px 2px !important;
}
.woocommerce ul.products li.product .yith_ywraq_add_item_browse_message a {
	color: var(--bim-paa) !important;
	text-decoration: underline;
}


/* ===== OSA 11 — napit blueimport.fi:n mukaisiksi ==================
   Mitattu sivustolta 8.8.2026:
     ensisijainen  tausta #053E58 · valkoinen teksti · radius 12px
                   padding 15px 35px · font-weight 400
     toissijainen  läpinäkyvä · 1px valkoinen reuna · sama muoto
   ================================================================= */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.bim-nappi {
	background: var(--bim-paa-tumma);
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 13px 30px;
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--bim-paa);
	color: #fff;
}

/* Tarjouspyyntönappi: värit tulevat YITH:n omasta asetuksesta
   !importantilla, muoto tästä. */
.woocommerce .add-request-quote-button,
.woocommerce .add-request-quote-button.button {
	border-radius: 12px;
	font-weight: 400;
}
.woocommerce div.product .add-request-quote-button {
	padding: 13px 30px !important;
	font-size: 15px !important;
}

/* Etusivun heron napit samaan muotoon */
.bim-nappi { border-radius: 12px; font-weight: 400; padding: 14px 32px; }
.bim-nappi-ensisijainen { background: #fff; color: var(--bim-paa-tumma); }
.bim-nappi-toissijainen { background: transparent; border: 1px solid rgba(255,255,255,.85); }

/* Vientinappi hillitympänä toissijaisena */
.bim-vienti { border-radius: 12px; font-weight: 400; }

/* --- Tarjouspyyntösivun lomake --- */
.ywraq-view-form-wrapper,
#yith-ywraq-form { max-width: 680px; }
#yith-ywraq-form label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 6px;
	color: var(--bim-teksti);
}
#yith-ywraq-form input[type="text"],
#yith-ywraq-form input[type="email"],
#yith-ywraq-form textarea {
	width: 100%;
	background: #fff;
	border: 1px solid var(--bim-reuna-2);
	border-radius: 6px;
	padding: 11px 13px;
	font-size: 15px;
	margin-bottom: 18px;
}
#yith-ywraq-form input:focus,
#yith-ywraq-form textarea:focus {
	border-color: var(--bim-paa);
	outline: none;
}
#yith-ywraq-form textarea { min-height: 130px; }
.woocommerce table.shop_table.ywraq_table th { white-space: nowrap; }

/* Virtuaali-tuontitiedoston latauslinkki tarjouspyyntösivulla */
.bim-virtuaali-vienti {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 18px 0 28px;
	padding: 14px 16px;
	background: var(--bim-huomio-bg);
	border: 1px solid var(--bim-huomio-reuna);
	border-radius: var(--bim-pyoristys);
}
.bim-virtuaali-vienti span { font-size: 13.5px; color: var(--bim-huomio-tekst); }

/* Otsikko ja rivit samaan vaakavieritykseen: molemmat vähintään sarakkeiden
   yhteisleveyden verran, jolloin ne pysyvät kohdakkain myös kapealla ruudulla. */
.bim-taulu .bim-rivi,
.bim-lista.woocommerce ul.products li.product .bim-rivi { min-width: 1188px; }
.bim-lista.woocommerce ul.products { min-width: 1188px; }

/* Mediapankin tekniset tiedot — vapaata tekstiä attribuuttitaulukon yllä */
.bim-tekniset {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--bim-harmaa);
	margin: 0 0 22px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--bim-reuna);
	max-width: 70ch;
}
.bim-tekniset p:last-child { margin-bottom: 0; }

/* Kuvaston omat mittatermit erottuvat versaalilla ja monospacella */
.bim-kuvastomitat th {
	font-family: var(--bim-mono);
	font-size: 11.5px;
	letter-spacing: .04em;
	color: var(--bim-teksti);
	width: 250px;
}
.bim-kuvastomitat td { font-variant-numeric: tabular-nums; }

/* ===== Palaveri 28.8.2026 ======================================== */

/* Brändi tuotenimen yläpuolella kortissa */
.bim-kortti-brandi {
	display: block;
	padding: 10px 14px 0;
	font-family: var(--bim-mono);
	font-size: 10.5px;
	letter-spacing: .08em;
	color: var(--bim-harmaa-2);
	text-transform: uppercase;
}

/* EAN + myyntierä tuotesivun tunnuslohkossa */
.bim-tuotemeta {
	display: block;
	font-family: var(--bim-mono);
	font-size: 12.5px;
	color: var(--bim-harmaa-2);
}
.bim-tuotemeta span { color: var(--bim-teksti); }

/* Kuvastosuodatin päällä -tila */
.bim-kuvastonappi.on { background: var(--bim-paa-tumma); color: #fff; }

/* Brändilogolaatat kuvaston pääsivulla */
.bim-brandilogot {
	clear: both;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	margin: 0 0 22px;
}
.bim-brandilogot a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	background: #fff;
	border: 1px solid var(--bim-reuna);
	border-radius: var(--bim-pyoristys);
	padding: 12px 16px;
	text-decoration: none;
}
.bim-brandilogot a:hover { border-color: var(--bim-paa); }
.bim-brandilogot img { max-height: 46px; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; }
.bim-brandilogot span {
	font-family: var(--bim-fontti);
	font-weight: 700;
	font-size: 15px;
	color: var(--bim-paa-tumma);
	letter-spacing: .02em;
	text-align: center;
}
@media (max-width: 700px) {
	.bim-brandilogot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tuoteryhmänapit kategorian alussa */
.bim-ryhmanapit { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.bim-ryhmanapit a {
	border: 1px solid var(--bim-reuna-3);
	background: #fff;
	color: var(--bim-teksti);
	border-radius: 999px;
	padding: 7px 15px;
	font-size: 13px;
	text-decoration: none;
}
.bim-ryhmanapit a:hover { border-color: var(--bim-paa); color: var(--bim-paa); }
.bim-ryhmanapit a.on { background: var(--bim-paa-tumma); border-color: var(--bim-paa-tumma); color: #fff; }

/* Brändilogo tuotesivulla nimen yllä */
.bim-tuote-brandilogo { display: inline-block; margin: 0 0 14px; }
.bim-tuote-brandilogo img { max-height: 64px; max-width: 320px; object-fit: contain; }
@media (max-width: 767px) {
	.bim-tuote-brandilogo img { max-height: 40px; max-width: 200px; }
}

/* --- Loputon vieritys ja AJAX-suodatus (bim.js) --- */
.bim-lisaa {
	clear: both;
	text-align: center;
	color: var(--bim-harmaa-2);
	font-size: 13px;
	padding: 22px 0;
}
body.bim-ladataan ul.products { opacity: .45; transition: opacity .15s; }

/* --- Jakonapit tuotesivulla (WhatsApp + tuotekortti-PDF) --- */
.bim-jakonapit { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 6px; }
.bim-jakonapit a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 22px;
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .12s, box-shadow .12s, background .12s;
}
.bim-jakonapit a:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(5, 62, 88, .18);
}
.bim-jakonapit svg { flex: 0 0 auto; }
.bim-jakonapit .bim-whatsapp {
	background: #25D366;
	color: #fff;
	border: none;
}
.bim-jakonapit .bim-whatsapp:hover { background: #1EBE5B; color: #fff; }
.bim-jakonapit .bim-kortti-lataus {
	background: #fff;
	color: var(--bim-paa-tumma);
	border: 1.5px solid var(--bim-paa-tumma);
}
.bim-jakonapit .bim-kortti-lataus:hover {
	background: var(--bim-paa-tumma);
	color: #fff;
}

/* --- Varianttiryhmä tuotesivulla (koot ja värit) --- */
.bim-variantit { margin: 18px 0 8px; }
.bim-variantit h3 {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--bim-paa);
	margin: 0 0 6px;
}
.bim-variantit table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bim-variantit th {
	text-align: left;
	color: var(--bim-harmaa-2);
	font-weight: 500;
	font-size: 11.5px;
	padding: 4px 10px;
	border-bottom: 1px solid var(--bim-reuna-2);
}
.bim-variantit td { padding: 6px 10px; border-bottom: 1px solid var(--bim-kerma); }
.bim-variantit .bim-koodi { font-family: var(--bim-mono); font-size: 12px; white-space: nowrap; }
.bim-variantit tr.bim-tama td { background: var(--bim-huomio-bg); font-weight: 600; }
.bim-variantit a { color: var(--bim-paa-keski); text-decoration: none; }
.bim-variantit a:hover { text-decoration: underline; }


/* --- Logolaatat: keskitys ja tiivis mobiili --- */
.bim-brandilogot a {
	display: flex !important;
	align-items: center;
	justify-content: center;
}
@media (max-width: 767px) {
	.bim-brandilogot { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
	.bim-brandilogot a { padding: 8px 6px !important; min-height: 0 !important; }
	.bim-brandilogot img { max-height: 28px; }
}

/* --- Pikatilaus --- */
.bim-pikatilaus textarea {
	width: 100%;
	font-family: var(--bim-mono);
	font-size: 13px;
	border: 1px solid var(--bim-reuna-3);
	border-radius: var(--bim-pyoristys);
	padding: 12px;
	margin: 0 0 14px;
}
.bim-pt-esimerkki {
	background: var(--bim-kerma);
	border-radius: var(--bim-pyoristys);
	padding: 10px 14px;
	font-size: 12.5px;
	color: var(--bim-harmaa);
	display: inline-block;
}
.bim-pikatilaus .button {
	background: var(--bim-paa-tumma);
	color: #fff;
	border-radius: 12px;
	padding: 12px 28px;
}
.bim-pt-raportti {
	background: var(--bim-huomio-bg);
	border: 1px solid var(--bim-huomio-reuna);
	border-radius: var(--bim-pyoristys);
	padding: 12px 16px;
	margin: 0 0 18px;
}
.bim-pt-virhe { color: #A33; }

/* ===== OSA 9 — Typografia ja pehmennys (10.9.2026) =================
   Titillium Web koko sivustolle, isommat otsikot sinisellä korostus-
   viivalla, kortit ja laatat pehmeillä varjoilla ja hover-nostolla.
   Tavoite: vähemmän "konemainen", enemmän blueimport.fi:n tuntu.
   ================================================================= */
body, body.woocommerce { font-size: 15px; line-height: 1.55; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; }

/* Päävalikko */
.main-navigation ul li a { font-size: 15px; font-weight: 600; letter-spacing: .01em; }

/* Sivun/kategorian otsikko: iso ja navy, sininen korostusviiva alla */
.woocommerce-products-header__title.page-title,
.page .entry-title {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--bim-paa-tumma);
	position: relative;
	padding: 0 0 14px;
	margin: 0 0 24px;
}
.woocommerce-products-header__title.page-title::after,
.page .entry-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 52px;
	height: 4px;
	border-radius: 2px;
	background: var(--bim-paa);
}

/* Sivupalkin osio-otsikot */
.bim-navi-osio > .widget-title {
	font-size: 19px;
	font-weight: 700;
	color: var(--bim-paa-tumma);
	margin: 0 0 8px;
}
.bim-navi-osio li { font-size: 14.5px; }

/* Tuotekortit: pehmeä varjo ja hover-nosto */
.woocommerce ul.products li.product {
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(5, 62, 88, .04), 0 8px 20px -10px rgba(5, 62, 88, .12);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px -14px rgba(5, 62, 88, .26);
	border-color: var(--bim-reuna-2);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-weight: 600;
	color: var(--bim-paa-tumma);
}
.bim-loop-brandi { color: var(--bim-paa); }

/* Logolaatat ja nappirivi samaan pehmeään kieleen */
.bim-brandilogot a {
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(5, 62, 88, .04), 0 6px 16px -10px rgba(5, 62, 88, .12);
	transition: transform .16s ease, box-shadow .16s ease;
}
.bim-brandilogot a:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -12px rgba(5, 62, 88, .24);
}
.bim-ryhmanapit a { font-size: 13.5px; font-weight: 600; padding: 8px 17px; }
.bim-ryhmanapit a:hover { background: var(--bim-huomio-bg); }

/* Napit: Titillium 600, kevyt nosto */
.button, button, input[type="submit"],
.woocommerce a.button, .yith-ywraq-add-to-quote .button,
.bim-vaihdin a, .bim-vienti {
	font-family: var(--bim-fontti);
	font-weight: 600;
	letter-spacing: .01em;
}
.woocommerce a.button:hover, .yith-ywraq-add-to-quote .button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -6px rgba(5, 62, 88, .4);
}

/* Tuotesivu */
.single-product div.product .product_title {
	font-size: 32px;
	font-weight: 700;
	color: var(--bim-paa-tumma);
}
.woocommerce-tabs ul.tabs li a { font-family: var(--bim-fontti); font-weight: 600; }

/* Työkalurivin tekstit hienovaraisemmiksi */
.woocommerce-result-count { color: var(--bim-harmaa-2); font-size: 13.5px; }

/* ===== OSA 10 — Määrävalitsin (10.9.2026) ==========================
   Kortin alarivi: [Tarjouspyyntöön] [− ME +]. Askel = myyntierä.
   ================================================================= */
.bim-tilaus { display: flex; align-items: center; gap: 8px; margin: auto 14px 6px; }
.bim-tilaus .yith-ywraq-add-to-quote { flex: 1; margin: 0 !important; min-width: 0; }
.bim-maara {
	display: inline-flex;
	align-items: stretch;
	flex: none;
	height: 40px;
	border: 1px solid var(--bim-reuna-3);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.bim-maara button {
	width: 30px;
	border: none;
	background: var(--bim-kerma);
	color: var(--bim-paa-tumma);
	font: 600 17px/1 var(--bim-fontti);
	padding: 0;
	cursor: pointer;
	border-radius: 0;
}
.bim-maara button:hover { background: var(--bim-huomio-bg); color: var(--bim-paa); }
.bim-maara input {
	width: 48px;
	border: none;
	background: #fff;
	text-align: center;
	font: 500 13.5px var(--bim-mono);
	color: var(--bim-teksti);
	padding: 0;
	-moz-appearance: textfield;
	box-shadow: none;
}
.bim-maara input::-webkit-outer-spin-button,
.bim-maara input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bim-maara input:focus { outline: none; background: var(--bim-huomio-bg); }

/* tuotesivu: oma rivi napin yllä */
.bim-tilaus-yksin { margin: 0 0 12px; gap: 14px; }
.bim-maara-otsikko { font-size: 14px; color: var(--bim-harmaa); }
.bim-maara-otsikko em { font-style: normal; color: var(--bim-vaalea); font-size: 12.5px; }

/* listanäkymä: tiiviimpi */
.bim-lista .bim-tilaus { margin: 0; gap: 6px; }
.bim-lista .bim-maara { height: 32px; }
.bim-lista .bim-maara button { width: 24px; font-size: 15px; }
.bim-lista .bim-maara input { width: 40px; font-size: 12.5px; }

/* mobiili: valitsin oikeaan kulmaan, nappi täysleveä sen alle */
@media (max-width: 767px) {
	.bim-tilaus { flex-wrap: wrap; margin: auto 10px 6px; gap: 6px; }
	.bim-tilaus .yith-ywraq-add-to-quote { flex: 1 1 100%; order: 2; }
	.bim-maara { margin-left: auto; height: 32px; }
	.bim-maara button { width: 26px; font-size: 15px; }
	.bim-maara input { width: 40px; font-size: 12.5px; }
}

/* ===== OSA 11 — Pehmennys tuotesivulle ja listanäkymään (10.9.2026) ===== */
/* Tuotesivu: kuva-alue, välilehdet ja varianttitaulukko samaan korttikieleen */
.single-product div.product .woocommerce-product-gallery {
	background: #fff;
	border: 1px solid var(--bim-reuna);
	border-radius: 14px;
	padding: 14px;
	box-shadow: 0 1px 2px rgba(5, 62, 88, .04), 0 10px 24px -14px rgba(5, 62, 88, .16);
	overflow: hidden;
}
.single-product div.product .woocommerce-product-gallery img { border-radius: 8px; }
.woocommerce div.product .woocommerce-tabs {
	border: 1px solid var(--bim-reuna);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(5, 62, 88, .04), 0 10px 24px -14px rgba(5, 62, 88, .14);
	margin: 0 0 36px;
}
.woocommerce div.product .woocommerce-tabs .panel { border: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-size: 14.5px; color: var(--bim-harmaa-2); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--bim-paa-tumma);
	box-shadow: inset 0 -3px 0 var(--bim-paa);
}
.bim-variantit {
	background: #fff;
	border: 1px solid var(--bim-reuna);
	border-radius: 12px;
	padding: 12px 14px 6px;
	box-shadow: 0 1px 2px rgba(5, 62, 88, .04), 0 8px 20px -12px rgba(5, 62, 88, .14);
}
.bim-variantit table { font-size: 13.5px; }
.woocommerce .related > h2,
.woocommerce .up-sells > h2 {
	font-size: 24px;
	color: var(--bim-paa-tumma);
	position: relative;
	padding: 0 0 12px;
	margin: 0 0 20px;
}
.woocommerce .related > h2::after,
.woocommerce .up-sells > h2::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 44px; height: 4px; border-radius: 2px; background: var(--bim-paa);
}
.woocommerce-breadcrumb { font-size: 13.5px; }
.single-product div.product .product_title { margin-bottom: 14px; }

/* Listanäkymä: pehmeä taulu, selkeä otsikkorivi, rivikorostus hoverissa */
.bim-taulu {
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(5, 62, 88, .04), 0 10px 24px -14px rgba(5, 62, 88, .16);
}
.bim-rivi-otsikko {
	background: var(--bim-kerma);
	font-family: var(--bim-fontti);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--bim-harmaa);
}
.bim-rivi:not(.bim-rivi-otsikko):hover { background: var(--bim-paneeli); }
.bim-rivi .bim-s-tuote a { font-weight: 600; color: var(--bim-paa-tumma); }
.bim-lista.woocommerce ul.products li.product,
.bim-lista.woocommerce ul.products li.product:hover {
	box-shadow: none;
	transform: none;
	border-radius: 0;
	border: none;
}

/* ===== OSA 12 — Mobiilitarkistus 10.9.2026 =========================
   Storefrontin alapalkki (ostoskori "0") pois — meillä ei ole koria;
   tuotesivun otsikko ja varianttitaulukko mobiilikokoon.
   ================================================================= */
.bim-variantit { max-height: 420px; overflow: auto; }
.bim-variantit th { position: sticky; top: 0; background: #fff; }
@media (max-width: 767px) {
	.storefront-handheld-footer-bar { display: none !important; }
	.site { padding-bottom: 0 !important; }
	.single-product div.product .product_title { font-size: 24px; }
	.woocommerce-products-header__title.page-title,
	.page .entry-title { font-size: 28px; }
	.bim-variantit { max-height: 360px; }
	.bim-variantit table { font-size: 13px; }
	.bim-variantit th:nth-child(3),
	.bim-variantit td:nth-child(3) { display: none; }
	.bim-variantit td { padding: 6px 8px; }
	.woocommerce-breadcrumb { font-size: 12.5px; }
}

/* Listanäkymä: silmukan brändirivi ei kuulu taulukkoon (brändi on jo rivillä) */
.bim-lista.woocommerce ul.products li.product > .bim-loop-brandi { display: none; }

/* Listanäkymä mobiilissa: vain koodi · kuva · tuote · ME · määrä+nappi */
@media (max-width: 767px) {
	.bim-rivi {
		grid-template-columns: 58px 34px 112px 42px 104px;
		column-gap: 6px;
		padding: 6px 8px;
	}
	.bim-s-ean, .bim-s-toimitus, .bim-s-ovh, .bim-s-netto { display: none; }
	.bim-rivi .bim-s-tuote { font-size: 12.5px; line-height: 1.3; }
	.bim-rivi .bim-rivi-brandi { display: none; }
	.bim-lista .bim-tilaus { flex-direction: column; align-items: stretch; gap: 4px; }
	.bim-lista .bim-maara { margin: 0; height: 30px; align-self: flex-end; }
	.bim-lista .add-request-quote-button { padding: 6px 4px !important; font-size: 11px !important; }
}

/* Listanäkymä: silmukan brändirivi (.bim-kortti-brandi) pois taulukosta */
.bim-lista.woocommerce ul.products li.product > .bim-kortti-brandi { display: none !important; }
@media (max-width: 767px) {
	/* Otsikkorivin soluilla ei ole luokkia → piilotus järjestysnumerolla
	   (4 EAN, 6 Toimitus, 7 Ovh, 8 Netto) */
	.bim-rivi-otsikko > :nth-child(4),
	.bim-rivi-otsikko > :nth-child(6),
	.bim-rivi-otsikko > :nth-child(7),
	.bim-rivi-otsikko > :nth-child(8) { display: none; }
	.bim-rivi, .bim-lista.woocommerce ul.products { min-width: 0 !important; }
}
@media (max-width: 767px) {
	/* 54+34+96+40+96 = 320 + 4×6 välit + 16 padding = 360 < 366 (taulun sisäleveys) */
	.bim-rivi { grid-template-columns: 54px 34px 96px 40px 96px; }
	.bim-lista .bim-maara input { width: 34px; }
	.bim-lista .bim-maara button { width: 22px; }
}
@media (max-width: 767px) {
	/* Storefrontin gutter (2×28px + marginaalit) jätti sisällölle 292/390 px.
	   Kauppasivuilla 12px riittää → listan rivit (352px) ja kortit mahtuvat. */
	.bim-suodattimet .col-full,
	.bim-koko-leveys .col-full,
	.single-product .col-full {
		padding-left: 12px !important;
		padding-right: 12px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
	}
	.bim-suodattimet #primary,
	.bim-koko-leveys #primary,
	.single-product #primary { width: 100% !important; }
}

/* Logistiikka-/spec-taulukko: otsikkosarake ei riviydy, ei versaalia */
.woocommerce table.bim-spec th,
.woocommerce table.shop_attributes th {
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--bim-fontti);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bim-harmaa);
	white-space: nowrap;
	width: 240px;
	vertical-align: top;
}
@media (max-width: 767px) {
	.woocommerce table.bim-spec th,
	.woocommerce table.shop_attributes th { white-space: normal; width: 44%; }
}

/* ===== OSA 13 — Saatavuusvalo (11.9.2026) ==========================
   vihreä = varastossa · keltainen = vähän · oranssi = tulossa · harmaa = loppu
   ================================================================= */
.bim-saatavuus { padding: 0 14px; margin: -4px 0 10px; }
.bim-valo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bim-harmaa);
	white-space: nowrap;
}
.bim-valo i {
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--bim-haamu);
	box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}
.bim-valo-vihrea    { color: #1E7E3E; } .bim-valo-vihrea i    { background: #2BB54A; box-shadow: 0 0 0 3px rgba(43,181,74,.18); }
.bim-valo-keltainen { color: #9A6B00; } .bim-valo-keltainen i { background: #F2B400; box-shadow: 0 0 0 3px rgba(242,180,0,.2); }
.bim-valo-tulossa   { color: #B35A00; } .bim-valo-tulossa i   { background: #F28C1E; box-shadow: 0 0 0 3px rgba(242,140,30,.2); }
.bim-valo-loppu     { color: var(--bim-harmaa-2); } .bim-valo-loppu i { background: #B4B8BC; }
.bim-saatavuus-yksin { padding: 0; margin: 0 0 12px; }
.bim-saatavuus-yksin .bim-valo { font-size: 14px; white-space: normal; }
.bim-lista .bim-s-toimitus .bim-valo { font-size: 12px; }
@media (max-width: 767px) {
	.bim-saatavuus { padding: 0 10px; }
	.bim-valo { font-size: 11.5px; }
}