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

	header #logo img {
		max-height: 60px;
		max-width: 200px;
	}
	
	.kavennettu {
		width: calc(100% - 24px);
	}
	


	
	
	#pienetTuotekortit {
		grid-template-columns: 1fr;
	}
	
	
	
	#sivustobody.ohjepaneeli #ohjepaneeli {
		right: 0;
	}
	
	


	


	
		
}

@media screen and (max-width: 1000px) {
	#inforuutu {
		width: 100%;
		border-radius: 0;
	}
}

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

	/* YLEISET */

	#mobiilivalikkoToggle,
	#kayttajatiedotToggle {
		display: block;
	}
	
	.eiMobiili {
		display: none !important;
	}
	.vainMobiili {
		display: revert !important;
	}
	
	.mobiiliLevea {
		width: 100% !important;
	}
	.mobiili_v {
		text-align: left !important;
		justify-content: left !important;
	}
	
	.sarakejako:not(.sailytaMobiilissa) {
		grid-template-columns: 1fr !important;
	}
	
	.paddingS {
		padding: 8px !important;
	}
	.paddingM {
		padding: 12px !important;
	}
	.paddingMov {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.paddingL {
		padding: 16px !important;
	}
	.paddingLov {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.paddingLya {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}
	.paddingXL {
		padding: 20px !important;
	}
	.paddingXLov {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	
	body.mobiilivalikkoAuki, body.mobiilivalikkoAuki main,
	body.valintapaneeliAuki, body.valintapaneeliAuki main,
	body.suodattimet, body.suodattimet main,
	body.inforuutu, body.inforuutu main {
	   overflow: hidden;
	}
	
	.riviominaisuus {
		white-space: unset;
	}
	
	.pinotutTuotetiedot .tuotemerkki {
		font-size: 12px;
	}
	.pinotutTuotetiedot .tuotenimi {
		font-size: 16px;
	}
	.pinotutTuotetiedot .koodi {
		font-size: 12px;
	}
	
	.kkgrid {
		grid-template-columns: repeat(4, 1fr);
	}
	.kkgrid label:nth-of-type(4) {
		border-radius: 0 8px 0 0;
	}
	.kkgrid label:nth-of-type(9) {
		border-radius: 0 0 0 8px;
	}
	.kkgrid label:nth-of-type(6),
	.kkgrid label:nth-of-type(7) {
		border-radius: 0;
	}
	
	.yhteenvetotaulukko {
		width: 100%;
		margin-top: 15px;	
	}
	.yhteenvetotaulukko>div:nth-of-type(even) {
		white-space: nowrap;
	}
	
	.napillinenHaku {
		grid-template-columns: auto 45px;
	}
	
	/* KIRJAUTUMINEN */
	
	#kirjautumislomake .kirjautumistapavalinta {
		gap: 0;
	}
	
	
	/* HEADER */
	
	header {
		margin: 0;
		border-radius: 0;
	}
	header #logo {
		height: 60px;
	}
	header #ylavalikkoalue {
		position: absolute;
		display: none;
	}
	header #ylatunniste {
		margin: 0;
		border-radius: 0;
		height: 60px;
		background: #000;
		grid-template-columns: auto 50px 50px;
	}
	header #ylatunniste>div:not(:first-of-type) {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	header #ylatunniste>div:empty {
		display: none !important;
	}
	header #kayttajavalikkoalue {
		display: none !important;
	}
	header #kayttajatiedotMobiili {
		display: block;
	}
	header #kayttajalinkit {
		border-top: 25px solid #000;
		display: grid;
		grid-template-columns: 1fr;
	}
	header #kayttajalinkit div {
		text-align: right;
	}
	header #kayttajalinkit a {
		width: 100%;
	}
	header #ylatunniste .material-symbols-outlined {
		font-size: 30px;
	}
	header #paavalikkoalue, header #paavalikko {
		position: absolute;
		display: none;
	}
	header nav#paavalikko {
		position: absolute;
		z-index: 70;
		top: -100dvh;
		top: 60px;
		left: 0;
		width: 100dvw;
		height: calc(100vh - 60px);
		height: auto;
		display: block;
		border-radius: 0;
		padding: 0;
		transition: all 0.2s ease-in;
		max-height: 0;
		border-radius: 0 0 8px 8px;
		overflow: hidden;
	}
	header nav#paavalikko a {
		line-height: 45px;
		padding: 0 15px !important;
		text-align: right;
		font-size: 1.2em;
		font-weight: 300;
	}
	header nav#paavalikko>a {
		width: 100dvw;
	}
	header nav#paavalikko span.spacer {
		display: none;
	}
	header a::after {
		display: none;
	}
	header #tuotekori .tuotteita::before {
		top: 15px;
		left: 32px;
	}
	.mobiilivalikkoAuki header #paavalikko {
		max-height: 100dvh;
		
	}

	/* MAIN */
	
	main {
		border-radius: 0;
		min-height: calc(100vh - 60px);
		padding: 0;
	}
	
	/* FOOTER */
	
	footer {
		font-size: 0.8em;
		margin: 0;
		border-radius: 0;
	}
	
	/* VALINTAPANEELI */
	
	.valintapaneeli main {
		display: block;
	}
	
	#valintapaneeli {
		position: absolute;
		width: 100vw;
		height: calc(100dvh - 60px);
		bottom: 0px;
		z-index: 20;
		background: #fff;
		border-radius: 0;
		left: -100vw;
		overflow-y: scroll;
	}
	.valintapaneeli.valintapaneeliAuki #valintapaneeli {
		left: 0;
	}
	
	/* PROSESSIVAIHEET */
	
	.prosessinVaiheet .teksti {
		display: none;
	}
	.prosessinVaiheet li:not(:first-of-type)::before,
	.prosessinVaiheet li:not(:last-of-type)::after {
		display: none;
	}
	
	/* OTSIKKOPALKKI */
	
	.otsikkopalkki {
		padding: 15px;
		display: block;
		height: auto;
	}
	.otsikkopalkki h1 {
		font-size: 1.3em;
		line-height: 25px;
		height: auto;
	}
	.otsikkopalkki .valinnat {
		margin-top: 10px;
		text-align: left !important;
		justify-content: left !important;
		
	}
	.otsikkopalkki .valinnat>button, .otsikkopalkki .valinnat>a {
		flex: 1 1 0;
	}
	.otsikkopalkki .valinnat.tiedote {
		display: block;
	}
	.otsikkopalkki .valinnat.tiedote>button {
		width: 100%;
	}
		
	/* TUOTTEET-SIVU */

	#tuotelistanValinnat {
		grid-template-columns: auto 40px;
		grid-gap: 10px;
	}
	#tuotelistanValinnat button {
		position: relative;
	}
	#tuotelistanValinnat #alueTuoteryhmat button { 
		width: 100%;
	}
	#tuotelistanValinnat #alueSuodattimet button, 
	#tuotelistanValinnat #alueToiminnot button {
		padding: 12px 8px;
	}
	#tuotelistanValinnat #alueSuodattimet button>span:last-of-type, 
	#tuotelistanValinnat #alueToiminnot button>span:last-of-type {
		display: none;
	}
	#tuotelistanValinnat .sisaltotapla {
		background: var(--oranssi);
		width: 10px;
		height: 10px;
		border-radius: 50%;
		position: absolute;
		right: 4px;
		top: 4px;
	}
	#tuotelistanValinnat .tapla .sisaltotapla {
		display: block;
	}
	
	.oikeustaso-40 #tuotelistanValinnat {
		grid-template-columns: auto 40px 40px;
	}
	
	#pienetTuotekortit {
		grid-gap: 15px;
	}
	#pienetTuotekortit>a {
		grid-template-columns: 100px auto;
		grid-template-rows: 100px auto;
		grid-gap: 0;
	}
	#pienetTuotekortit>a figure {
		padding: 5px;
		height: 100px;
	}
	#pienetTuotekortit>a>div:first-of-type {
		padding: 10px;
		height: 100%;
		border-left: 1px solid var(--vaaleanharmaa);
	}
	#pienetTuotekortit>a>div:last-of-type {
		padding: 5px 15px 30px 15px;
		grid-column: span 2;
		border-top: 1px solid var(--vaaleanharmaa);
	}
	#pienetTuotekortit>a img {
		max-width: 90%;
		max-height: 90%;
	}
	#pienetTuotekortit .tn {
		max-height: 40px;
		display: -webkit-box;
		-webkit-line-clamp: 2;     /* montako riviä */
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	#pienetTuotekortit .ko_va {
		display: block;
		height: 20px;
		white-space: nowrap;
		overflow: hidden;
	}
	#pienetTuotekortit .va {
		font-size: 0.8em;
		margin-left: 5px;
		padding: 0 5px;
	}
	#pienetTuotekortit .omv_hi_alv {
		bottom: 10px;
		right: 10px;
	}
	#pienetTuotekortit>a input.joukkovalinta {
		width: 20px;
		height: 20px;
		top: 6px;
		left: 6px;
	}
	#pienetTuotekortit .or,
	#pienetTuotekortit>a div.suodatinosumat {
		margin: 0;
	}
	
	/* TUOTEKORTTI */
	
	#isoTuotekortti #tuotekuvat .swiper {
		width: 90dvw;
	}
	
	#isoTuotekortti #tuotekuvat .tuotekuvat-main-slider {
		width: 90dvw;
		height: 90dvw;
	}
	#isoTuotekortti #kuvienVarinimiAlue {
		top: 80dvw;
	}
	#isoTuotekortti .tuoterivi, #isoTuotekortti .tuoterivilabelit {
		grid-template-columns: 1fr 1fr;
	}
	#isoTuotekortti .tuoterivi .tuoterivialueVari,
	#isoTuotekortti .tuoterivi .tuoterivialueHenkilo,
	#isoTuotekortti .tuoterivi .tuoterivialueKustannuspaikka,
	#isoTuotekortti .tuoterivi .tuoterivialueToiminnot {
		grid-column: span 2;
	}
	#isoTuotekortti .tuoterivi .tuoterivialueToiminnot {
		margin-top: 5px;
	}
	#isoTuotekortti .tuotekortinTuotetiedot>div:first-of-type>div:last-of-type {
		text-align: left !important;
	}
	#isoTuotekortti #merkkauskuvat .merkkauskuvat-main-slider, #tuoteasetukset #merkkauskuvat .merkkauskuvat-main-slider {
		width: calc(100dvw - 50px);
		height: calc(100dvw - 50px);		
	}
	#isoTuotekortti .prosessinapit {
		width: 100%;
	}
	#isoTuotekortti #uusiRiviPainikealue {
		text-align: center;
	}
	#isoTuotekortti #kaaviokuvaAlue {
		max-height: 0;
		overflow: hidden;
	}
	.kaaviokuvatAuki #isoTuotekortti #kaaviokuvaAlue {
		max-height: initial;
	}

	
	/* TUOTEASETUKSET */
	#tuoteasetukset .yhteenvetotaulukko {
		width: 100%;
		margin-top: 15px;	
	}
	#tuoteasetukset .yhteenvetotaulukko>div:nth-of-type(even) {
		white-space: nowrap;
	}
	
	
	/* SUODATINPANEELI */
	
	#sivustobody .suodatinpaneeli {
		right: -100dvw;
		transition: all 0.5s;
		width: 100dvw;
	}
	#sivustobody.suodattimet .suodatinpaneeli {
		right: 0;
	}
	.suodatinpaneeli .painikkeet {
		width: calc(100% - 50px);
	}
	
	
	/* INFORUUTU */
	#inforuutukehys {
		height: 100dvh;
	}
	#inforuutu {
		width: 100dvw;
		height: 100dvh;
		top: 0;
	}
	#inforuudunOtsake {
		grid-template-columns: auto 50px;
	}
	#inforuudunOtsake button>span:last-of-type {
		display: none;
	}
	#inforuudunOtsake>div:last-of-type {
		padding: 0 !important;
	}
	#inforuudunOtsake>div:last-of-type button {
		border: 0;
	}
	#inforuudunOtsake>div:last-of-type button>span {
		font-size: 24px;
		color: #000;
	}
	#inforuutu .korttilista {
		columns: 1 !important;
	}
	#noutopistehaunKentat {
		grid-template-columns: 1fr;
		grid-gap: 5px;
	}
	#noutopistehaunKentat #haeNoutopisteet {
		height: 45px; 
		width: 100%;
		line-height: 45px;
		margin-top: 5px;
	}
	
	
	/* OHJEPANEELI */
	
	#sivustobody.ohjepaneeli #ohjepaneeli {
		width: 100vw;
	}
	#ohjepaneeli .painikkeet {
		width: calc(100vw - 53px);
	}
	
	/* TOIMITUSTAPANÄYTTÖ */
	
	#toimitustapanaytto {
		grid-template-columns: 100px auto;
	}
	
	/* NAUHAVALINNAT */
	
	.nauhavalinta img {
		display: none;
	}
	.nauhavalinta>a {
		font-weight: 400;
		font-size: 0.9em;
		padding: 5px !important;
	}
	
	/* ETUSIVU */
	
	.uusinTiedote {
		line-height: 1;
		margin-bottom: 10px;
	}
	.toimintonauha>div {
		text-align: left !important;
	}
	.uusinTiedote {
		display: block;
		width: 100%;
	}
	iframe {
		min-height: calc(100vw / 1.7);
	}
	
	/* KORTTILISTAT */

	/* Yleiset */

	.korttilista .mobiiliLabel {
	    display: grid !important;
		grid-template-columns: auto 1fr; /* vasen label, oikea sisältö */
		gap: 0.5rem;
		align-items: start;
		text-align: right;
		justify-content: right;
	}
	.korttilista .mobiiliLabelYlos {
	    display: grid !important;
		grid-template-columns: 1fr; /* vasen label, oikea sisältö */
		gap: 2px;
		align-items: start;
		text-align: left;
	}
	.korttilista .mobiiliLabel::before, .korttilista .mobiiliLabelYlos::before {
		content: attr(data-label);
		color: var(--tummanharmaa);
		font-size: 0.8em;
		font-weight: 700;
		white-space: nowrap;
		text-align: left;
		justify-content: left;
	}
	.korttiasettelu {
		gap: 10px;
	}
	
	.korttilista .painikkeet {
		display: flex;
		flex-wrap: nowrap; 
		gap: 10px;          
		align-items: center;
		overflow: hidden;  
	}
	.korttilista .painikkeet button {
		flex: 1 1 0;          /* kasvavat suhteessa, mutta myös kutistuvat */
		min-width: 0;         /* Erittäin tärkeä: ilman tätä elem. ei aina kutistu sisällön alle */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;  /* lyhentää tekstiä ellipsiksiksi, ei rivitä */	
		justify-content: center;
	}
	
	.korttilista .pinotutTuotetiedot {
		border: 0;
		padding: 5px;
	}
	
	.rivituotekuva {
		max-height: 66px !important;
		max-width: 66px !important;
	}
	
	

	
	/* Etusivu */

	.korttilista#etusivunTilauslista .korttiasettelu-2 {
		grid-template-columns: auto 120px;	
	}
	.korttilista#etusivunTilauslista .korttiasettelu-2>div:nth-of-type(1),
	.korttilista#etusivunTilauslista .korttiasettelu-2>div:nth-of-type(2),
	.korttilista#etusivunTilauslista .korttiasettelu-2>div:nth-of-type(3),
	.korttilista#etusivunTilauslista .korttiasettelu-2>div:nth-of-type(4) {
		grid-column: span 2;
		
	}
	.korttilista#etusivunTilauslista .korttiasettelu-2>div:nth-of-type(4)>div {
		text-align: left !important;
	}
	
	.korttilista#kayttajalista .korttiasettelu-2 {
		grid-template-columns: 1fr 1fr;	
		
	}
	.korttilista#kayttajalista .korttiasettelu-2>div:nth-of-type(1) {
		grid-column: span 2;
	}
	
	/* Hyväksyttävä tilaus */
	
	.korttilista#hyvaksyttavanTilauksenRivit .korttiasettelu {
		column-gap: 0;
		row-gap: 5px;
	}
	
	.korttilista#hyvaksyttavanTilauksenRivit .korttiasettelu-2 {
		grid-template-columns: 86px auto;	
	}
	
	.korttilista#hyvaksyttavanTilauksenRivit .korttiasettelu-2>div:nth-of-type(n+3)	{
		grid-column: span 2;
	}

	.korttilista#hyvaksyttavanTilauksenRivit .korttiasettelu-2>div:last-of-type	{
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		
	}
	.korttilista#hyvaksyttavanTilauksenRivit .korttiasettelu-2>div:last-of-type	a {
		justify-content: center;
		padding: 16px 8px;
	}
	
	/* Tuotekori */

	.korttilista#tuotekorilista .korttiasettelu-1 {
		grid-template-columns: 86px auto;	
	}	
	.korttilista#tuotekorilista .korttiasettelu-1>div:nth-of-type(n+3)	{
		grid-column: span 2;
	}
	.korttilista#tuotekorilista .korttiasettelu-2 {
		grid-template-columns: 2fr 1fr auto 1fr;	
	}	
	.korttilista#tuotekorilista .korttiasettelu-3 {
		grid-template-columns: 1fr;	
	}
	.korttilista#tuotekorilista .korttiasettelu-3>div:empty {
		display: none;
	}
	
	
	/* Hallintavalikko */
	
	.korttilista#hallintavalikko .korttiasettelu {
		gap: 0;
	}
	.korttilista#hallintavalikko .korttiasettelu-1 {
		grid-template-columns: 1fr;	
	}	
	
	/* Käyttäjälista */

	.korttilista#kayttajalista .korttiasettelu-1 {
		grid-template-columns: 1fr 1fr;	
	}		
	.korttilista#kayttajalista .korttiasettelu-1>div:nth-of-type(1),
	.korttilista#kayttajalista .korttiasettelu-1>div:nth-of-type(2),
	.korttilista#kayttajalista .korttiasettelu-1>div:nth-of-type(3),
	.korttilista#kayttajalista .korttiasettelu-1>div:nth-of-type(4)	{
		grid-column: span 2;
	}
	.korttilista#kayttajalista .korttiasettelu-1 .riviominaisuus {
		border: 0;
		padding: 0;
	}		
	
	/* Omavastuulista */
	
	.korttilista#omavastuulista .korttiasettelu-1 {
		grid-template-columns: 1fr;	
	}		
	
	/* Hankintakausilista */
	
	.korttilista#hankintakausilista .korttiasettelu-1 {
		grid-template-columns: 1fr;	
	}		
	
	/* Hankintakausilista */
	
	.korttilista#painatuslista .korttiasettelu-1 {
		grid-template-columns:  100px auto;	
	}			
	.korttilista#painatuslista .korttiasettelu-1>div:nth-of-type(3),
	.korttilista#painatuslista .korttiasettelu-1>div:nth-of-type(4) {
		grid-column: span 2;
	}
	
	/* Painatuslista */
	
	.korttilista#painatuslista .korttiasettelu-1 .riviominaisuus {
		border: 0;
		padding: 0;
	}	
	
	/* Raporttivalikko */
	
	.korttilista#raporttivalikko .korttiasettelu {
		gap: 0;
	}
	.korttilista#raporttivalikko .korttiasettelu-1 {
		grid-template-columns: 1fr;	
	}	
	
	/* Tuotepakettilista */

	.korttilista#tuotepakettilista .korttiasettelu-1 {
		grid-template-columns: 1fr;	
	}	
	.korttilista#tuotepakettilista .korttiasettelu-1 a {
		width: 100%;
	}	
	.korttilista#tuotepakettilista .korttiasettelu-2 {
		grid-template-columns:  100px auto;	
	}
	.korttilista#tuotepakettilista .korttiasettelu-2>div:nth-of-type(3) {
		grid-column: span 2;
	}
	
	/* Tuotepaketin tuotteet */
	
	.korttilista#tuotepaketinTuotteet .korttiasettelu-1 {
		grid-template-columns:  100px auto;	
	}	
	.korttilista#tuotepaketinTuotteet .korttiasettelu-1>div:nth-of-type(3),
	.korttilista#tuotepaketinTuotteet .korttiasettelu-1>div:nth-of-type(4),
	.korttilista#tuotepaketinTuotteet .korttiasettelu-1>div:nth-of-type(5) {
		grid-column: span 2;
	}
	
	/* Omat varusteet */
	.korttilista#omatVarusteetLista .korttiasettelu-1 {
		grid-template-columns:  100px auto;	
	}		
	.korttilista#omatVarusteetLista .korttiasettelu-1>div:nth-of-type(3),
	.korttilista#omatVarusteetLista .korttiasettelu-1>div:nth-of-type(4)	{
		grid-column: span 2;
	}
	.korttilista#omatVarusteetLista .korttiasettelu {
		gap: 0;
	}
	.korttilista#omatVarusteetLista .korttiasettelu-1 .vk.paddingM {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	.korttilista#omatVarusteetLista .korttiasettelu-1 .painike {
		margin-left: 0 !important;
		margin-right: 10px !important;
	}
	.korttilista#omatVarusteetHankintakausiLista .korttiasettelu-1 {
		grid-template-columns: auto;
	}
	
	/* Vaihto/palautus */

	.korttilista#vaihtopalautuslista .korttiasettelu-1 {
		grid-template-columns:  100px auto;	
	}
	.korttilista#vaihtopalautuslista .korttiasettelu-1>div:nth-of-type(3),
	.korttilista#vaihtopalautuslista .korttiasettelu-1>div:nth-of-type(4)	{
		grid-column: span 2;
	}	
	.korttilista#vaihtopalautuslista .korttiasettelu-2 {
		grid-template-columns: auto;	
		display: grid !important;
		gap: 0;
	}
	#palautusohjeidenVastaanotto .k {
		text-align: left !important;
		justify-content: left !important;
	}
	.korttilista#vaihtopalautusohjeet .korttiasettelu-1 {
		
	}
	
	/* Joukkotoiminto: tuoteasetukset */
	
	.korttilista#joukkotoimintoTuoteasetuksetLista .korttiasettelu-2 {
		grid-template-columns: 100px auto;
		grid-gap: 0;
	}
	.korttilista#joukkotoimintoTuoteasetuksetLista .korttiasettelu-2>div:nth-of-type(n+3)	{
		grid-column: span 2;
	}
	.korttilista#joukkotoimintoTuoteasetuksetLista .korttiasettelu-2>div:nth-of-type(3)	{
		border-top: 1px solid var(--vaaleanharmaa);
	}	
	.korttilista#joukkotoimintoTuoteasetuksetLista .korttiasettelu-2>div:nth-of-type(8)	{
		justify-content: center;
	}
	.korttilista#joukkotoimintoTuoteasetuksetLista .korttiasettelu-2>div:nth-of-type(8)>div	{
		display: grid !important;
		grid-template-columns: 1fr 25px 1fr;
	}	
	
	/* PROSESSINAPIT */
	
	.prosessinapit {
		display: grid;
	}
	.prosessinapit a, .prosessinapit button, .prosessinapit select {
		width: 100%;
		margin: 0 !important;
	}

	/* TUKI */
	
	#yhteystiedot {
		margin-top: 25px;
	}

	
}


@media screen and (max-width: 500px) {
	
	#kirjautumislomake {
		margin: 0;
		width: 100%;
		box-shadow: none;
	}
	#kirjautumislomake #logoalue img {
		max-width: 80%;
	}
	#kirjautumislomake #sisaltoalue {
		padding: 25px;
	}
	#kirjautumislomake .syottotapa {
		width: 44px;
		background-size: 25px;
		background-repeat: no-repeat;
		background-position: center center;
	}
	#kirjautumislomake #ktAlue>div {
		display: grid;
		grid-template-columns: auto 44px 44px;
		grid-gap: 5px;
	}
	#kirjautumislomake #ktAlue button {
		display: block;
		margin: 0;
	}
	
	body {
		background: #fff;
	}
	
}