@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200);
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Globala inställningar */
* {
  box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
	  font-family: "Inter", sans-serif;
	  font-size: 12px;
	  font-weight: 400;
	  font-style: normal;
	  line-height: 1.6;
	  color:#000;
	  
	  background-color: #fff;
}

h1{
	  font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 500;
    font-style: normal;
    line-height: 2.2;
    margin: 0px;
    padding: 0px;
  }

h2{
	  font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    line-height: 2.2;
    margin: 0px;
    padding: 0px;
  }
  
h3{
	  font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    margin: 0px;
    padding: 0px;
  }  

p {
	  font-family: "Inter", sans-serif;
	  font-size: 12px;
	  font-weight: 400;
	  font-style: normal;
	  line-height: 1.6;
	  color:#000;
	  margin: 0px;
    padding: 0px;
}


 .clear {clear: both;}
 .clear5 {clear: both;height: 5px;}
 .clear10 {clear: both;height: 10px;}
 .clear15 {clear: both;height: 15px;}
 .clear16 {clear: both;height: 16px;}
 .clear20 {clear: both;height: 20px;}
 .clear25 {clear: both;height: 25px;}
 .clear30 {clear: both;height: 30px;}
 .clear32 {clear: both;height: 32px;} 
 .clear40 {clear: both;height: 40px;}
 .clear50 {clear: both;height: 50px;}
 .clear100 {clear: both;height: 100px;} 




.bg {
		width: 100%;
    padding: 0px;
    margin: 0px auto;
    background-color: #fff;
}



.header_div {
    position: sticky;
    top: 0;
    z-index: 100;		
    background-color: #0E0634;
    width: 100%;
    
  background-clip: padding-box;
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;    
}	

/* Klass som appliceras när man scrollar nedåt */
.header_div.scrolled {
  backdrop-filter: blur(12px) !important;
  /* #fffc = vit med 80% opacitet (hex-färg med alfa) */
  background: #fffc !important;
  box-shadow: 0 0 10px #0000001a;
}

/* För att backdrop-filter skall visas korrekt i WebKit-baserade browserar */
.header_div.scrolled {
  -webkit-backdrop-filter: blur(12px) !important;
}



/* Endast dessa element får svart text vid scroll */
.header_div.scrolled .openMenu,
.header_div.scrolled .header_kat_div,
.header_div.scrolled .header_icon_box,
.header_div.scrolled .logo-text {
  color: #0E0634;
}





.header_box {
    width: 100%;
    max-width: 1200px;
    height: 90px;
    margin: 0 auto;
    padding: 25px 40px;
}

.content_div {
    width: 100%;
    max-width: 1200px;
    min-height: 600px;
    margin: 0px auto;
    padding: 0px 40px;
    background-color: #fff;
    /* margin-top: 84px; */
}



.footer_div {
    width: 100%;
    max-width: 1200px;
    min-height: 400px;
    margin: 0px auto;
    padding: 0px 40px;
    background-color: #fff;
    clear: both;
}

@media (max-width: 768px) {
.header_box{
    padding: 10px 20px;
    height: 100px;
  } 
  .content_div{
    padding: 0px 20px;
  }  
  .footer_div{
    padding: 0px 20px;
  }       
}


/* header - start */
.menu_div {
    float: left;
    min-width: 25%;
} 	
 	
 .logo_div {
    float: left;
    min-width: 12%;
    padding-right:20px;
}

@media (max-width: 900px) {
  .logo_div {
   padding-right:10px;
  }
}

.av_logo {
    height: 40px;
    width: auto;
}

@media (max-width: 768px) {
  .logo_div {
   width: 30%;
   padding:0px;
   text-align:right;
  }
	.av_logo {
	    height: 34px;
	    width: auto;
	}  
}



.header_kat_div {
    float: left;
    min-width: 10%;
    padding-right:20px;
	  font-family: "Inter", sans-serif;
	  font-size: 18px;
	  font-weight: 500;
	  font-style: normal;
	  line-height: 2.2;
	  color: #fff;    
}



@media (max-width: 900px) {
  .header_kat_div {
   padding-right:10px;
  }
}

.header_sok_div {
    float: left;
    width: 35%;
    border: 0px dotted #000;
    padding-left:10px;
}

@media (max-width: 1050px) {
  .header_sok_div {
   width: 30%;
  }
}
@media (max-width: 920px) {
  .header_sok_div {
   width: 20%;
  }
}


@media (max-width: 768px) {
  .header_sok_div {
   width: 100%;
   padding: 5px 0px 0px 0px;
  }
}

.sokruta {
    float: left;
    height: 38px;
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 100px;
    width: 100%;
    color: #000;
    text-align: left;
    outline: 0;
	  font-family: "Inter", sans-serif;
	  font-size: 14px;
	  font-weight: 400;
	  font-style: normal;
    text-indent: 35px;
    box-sizing: border-box;
    background-image: url("https://audiovision.hemsida.eu//pix/search_24.svg");
    background-position: 8px center;
    background-repeat: no-repeat;
    background-size: 24px;
}

@media (max-width: 768px) {
  .sokruta {
  border-radius: 4px;
  }
}

.header_kund_div {
    float: right;
    min-width: 25%;
    text-align:right;
}	

@media (max-width: 768px) {
  .header_kund_div {
   width: 45%;
  }
}


.vk_account_button {
		float:right;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #875EF7;
    color: #fff;
    border: none;
    padding: 5px 12px;
    /*width: 90px;*/
    margin-top: -5px;
    min-width:100px;
    max-width:130px;
    height:50px;
	  font-family: "Inter", sans-serif;
	  font-size: 13px;
	  font-weight: 400;
	  font-style: normal;
	  text-align: left;
	  line-height: 1.2;
    border-radius: 100px;
    cursor: pointer;
    overflow:hidden
} 
@media (max-width: 768px) {
  .vk_account_button {
   width:38px;
   padding: 6px;
  }
}

.openMenu{
color:#fff;
font-size:32px;
cursor:pointer;
}

.breadcrumb{
			font-family: "Inter", sans-serif;
		  font-size: 14px;
		  font-weight: 500;
		  font-style: normal;  
		}


.header_icon_box {
	  float:right;
		position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width:38px;
    height:38px;
    color: #fff;
    border: 0px solid #875EF7;
    padding: 0px;
    margin-right:25px;
    cursor:pointer;
} 

  .header_icon_label {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 300;
    font-style: normal;
    white-space: nowrap;
  }
  
@media (max-width: 768px) {
  .header_icon_box {
   margin-right:10px;
  }
}  



/* header - slut */



/*  listboxar artiklar - start */	
	
  .lista-flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;               /* 3 mellanrum à 16px = 48px totalt */
  padding: 0px;
  background: none;
}

.lista-flex-item {
  /* Dra av 48px (3 * gap) från 100% och dela på 4 */
  flex: 0 0 calc((100% - 48px) / 4);
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid #ddd;
  text-align: left;
  position:relative;
}

@media (max-width: 950px) {
  .lista-flex-item {
   flex: 0 0 calc((100% - 16px) / 3.1); /* 1 mellanrum à 16px, två kolumner */
  }
}

@media (max-width: 768px) {
  .lista-flex-item {
   flex: 0 0 calc((100% - 16px) / 2); /* 1 mellanrum à 16px, två kolumner */
  }
}
@media (max-width: 480px) {
  .lista-flex-item {
    flex: 0 0 100%;
  }
}


.lista_flash {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    top: 15px;
    left: 0px;
    background-color: #875EF7;
    padding: 3px 16px 3px 10px;
		font-family: "Inter", sans-serif;
    font-weight: 500;    
    color: #fff;
    font-size: 14px;
    z-index: 1;
    width: fit-content;
}


.lista_flash .material-symbols-outlined {
  font-size: 20px;  /* storlek på ikonen */
}




.lista-flex-image {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}







.lista_varumarke{
	  font-family: "Inter", sans-serif;
	  font-size: 12px;
	  font-weight: 500;
	  color:#875EF7;	
}
.lista_artikelnamn{
	  font-family: "Inter", sans-serif;
	  font-size: 14px;
	  font-weight: 600;
	  color:#000;	
	  height: 45px;
}

.lista_kortbesk{
	  font-family: "Inter", sans-serif;
	  font-size: 12px;
	  font-weight: 400;
	  color:#404040;	
	  height: 40px;
    overflow: hidden;
    word-break: break-word; /* eller break-all */
    overflow-wrap: anywhere;    
}
.lista_listpris{
	  font-family: "Inter", sans-serif;
	  font-size: 12px;
	  font-weight: 400;
	  color:#404040;	
}
.lista_rabatt{
	  font-family: "Inter", sans-serif;
	  font-size: 12px;
	  font-weight: 400;
	  color:#000;	
}
.lista_pris{
	  font-family: "Inter", sans-serif;
	  font-size: 12px;
	  font-weight: 600;
	  color:#000;	
}

	.lista_asterix {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 400;
    font-style: italic;
    color: #000;
}



	.lista_add_submit {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 82%;
    height:35px;
    background-color: #0E0634;
    color: #fff;
    border: none;
    border-radius: 100px;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
	  font-family: "Inter", sans-serif;
	  font-size: 12px;
	  font-weight: 500;        
}
.lista_add_submit:hover {
  background-color: #0e0634c9;
}

.lista_add_icon_submit {
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 54px;
    height:34px;
    background-color: #0E0634;
    color: #fff;
    border: none;
    border-radius: 100px;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
     
}
.lista_add_icon_submit:hover {
  background-color: #0e0634c9;
}

.lista_fav_submit {
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 35px;
    max-width: 16%;
    height:35px;
    background-color: #fff;
    color: #000;
    border: 1px solid #ddd;
    border-radius: 100px;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.lista_fav_submit:hover {
		background-color: #F9F9F9;
}

.lista_call_box {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 82%;
    height: 35px; 
    background-color: #fff;
    color: #0E0634;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    border-radius: 100px;
    border: 2px dashed #0E0634;
}	



.lista_box_ikoner{
	width:100%;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 4px;
	min-height:78px; 
}

.lista_ikon {
  display: flex;      /* eller display: flex om du vill ta hela raden */
  justify-content: flex-start;       
  gap: 10px;
  padding: 2px 0px;                 
}

.lista_ikon .material-symbols-outlined {
  font-size: 20px;  /* storlek på ikonen */
}

.lista_ikon .ikon_bild {
  width: 20px;  /* storlek på ikonen */
  height: 20px;  /* storlek på ikonen */
}



.lista_lager {
  display: flex;      /* eller display: flex om du vill ta hela raden */
  justify-content: flex-start;       
  gap: 10px;                 
}

.lista_lager .material-symbols-outlined {
  font-size: 20px;  /* storlek på ikonen */
}



/* listboxar artiklar - slut */



/* orderform - start */

	.vo_orderruta {
    float: left;
    width: 100%;
    min-height:50px;
    border: 1px solid #DBDBDB;
    border-radius: 4px 4px 4px 4px;
}

.vo_tabell_radbox {
    float: left;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #DBDBDB;
    padding:10px;
}

.vo_tabell_rader {
    float: left;
    position:relative;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 18px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    border: 0px solid #ccc;
    box-sizing: border-box;
}

.vo_tabell_123 {
    float: left;
    width:60%;
    box-sizing: border-box;
}

.otr_bild {width: 10%;}
.otr_artnr {width: 25%;top: 20px;}
.otr_beskr {width: 50%;top: 20px;}
.otr_antal {width: 25%;top: 20px;}
.otr_pris {width: 10%;text-align:right;top: 20px;}
.otr_totalt {width: 10%;text-align:right;top: 20px;}

.otr_rubrik {font-weight:500;top: 0px;}

@media (max-width: 799px) {
	.vo_tabell_123 {padding-left:10px;}
	.otr_artnr {width: 100%;top: 0px;padding-bottom:0px;}
	.otr_beskr {width: 100%;top: 0px;padding-bottom:0px;}
	.otr_antal {width: 100%;top: 0px;padding-bottom:0px;}
	.vo_tabell_123 {width: 56%;}
	.otr_pris {width: 17%;}
	.otr_totalt {width: 17%;float:right;}
	
}

.vo_update_button {
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 500;	
    font-size: 14px;
    text-align: center;
    line-height: 12px;
    height: 26px;
    width: 26px;
    border: 0px solid #ddd;
    border-radius: 4px;
    padding: 0px;
    background-color: #875EF7;
    color: #fff;

}

.vo_antalruta {
    font-size: 12px;
    border: 1px solid #DBDBDB;
    height: 28px;
    width: 28px;
    padding-top: 2px;
    margin: 0px 5px;
    border-radius: 4px;
	-webkit-border-radius: 4px;
	-webkit-box-shadow: none;    
    text-align: center;
}

.vo_delete_button {
    text-align: center;
    border: 0px solid #fff;
    background-color: #fff;
    margin-left:15px;
    
}

.vo_bildbox {
    border: 1px solid #dedede;
    width: 65px;
    min-height: 65px;
    padding: 3px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.vo_tabell_summa_txt{
	float:right;
	width:50%;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;	
	text-align:right;
	line-height: 24px;
}
.vo_tabell_summa_varde{
	float:right;
	width:20%;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;	
	text-align:right;
	line-height: 24px;
}

.vo_tabell_summa_rubrik{
  font-weight: 600;
  font-size: 12px;	
	line-height: 24px;
}

@media (max-width: 799px) {
	.vo_tabell_summa_varde {width: 50%;}
	.vo_tabell_summa_txt_mobil {text-align:left;}
}


.vo_tabell_radbox_right
 {
    width: 50%;
    float:right
}
.vo_tabell_radbox_left
 {
    width: 50%;
    float:left;
}
@media (max-width: 799px) {
.vo_tabell_radbox_right {width: 100%;}
.vo_tabell_radbox_left {width: 100%;padding-top:0px;}
}


.order_footer_text_box{	
	float:left;
	width:50%;
	padding:0px 24px 0px 0px;
	margin-top:16px;
}
.order_footer_text_box_rund{	
	float:left;
	width:50%;
	padding:0px 24px 0px 0px;
}

.order_footer_saljare_round {
    width: 85%;
    height: 85%;
    border-radius: 50%;
    border: 0px solid #ccc;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:30px;
}
.order_footer_saljare_round img {
  max-width: 100%;
  max-height: 100%; 
}
.order_footer_hrubrik{	
	font-weight:600;
	font-size: 14px;
}
.order_footer_urubrik{	
	font-weight:500;
	color:#875EF7;
	font-size: 14px;
}
.order_footer_mailto{	
	text-decoration:underline;
}
.order_footer_mailto:hover {
    text-decoration: underline !important;
}

.order_footer_pakettext{	
    margin-top: 70px;
    padding-right: 50px;
}
@media (max-width: 1099px) {
	.order_footer_pakettext {margin-top: 40px;padding-right: 20px;}
}
@media (max-width: 799px) {
	.order_footer_pakettext {margin-top: 0px;padding-right: 0px;}
}
/* orderform - slut */




/* Globala inställningar */


.lista_imageContainer {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;        /* Viktigt för att dölja det utzoomade området */
  text-align: center;
  /* display: table-cell; */ /* kan behållas om det funkar, men overflow fungerar även */
}

.lista_imageContainer img.imageContainerImg {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;  /* mjuk övergång */
  transform-origin: center center;
}

.lista_imageContainer:hover img.imageContainerImg {
  transform: translate(-50%, -50%) scale(1.1);  /* zooma till 110% */
}

img.imageContainerImg:empty
{
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

@media screen and (orientation: portrait) {
  img.imageContainerImg {
      max-width: 100%;
	  max-height: 100%;
  }
}

@media screen and (orientation: landscape) {
  img.imageContainerImg {
      max-height: 100%;
	  max-height: 100%;
  }
}

.border_linje {
    width: 100%;
    float: left;
    clear: both;
    margin:0px;
    padding:5px;
    border-bottom: 1px solid #ddd;
}

	/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}	

/* Applicera på alla <a>-element */
a {
  color: inherit;          /* Ärver textfärgen från föräldern */
  text-decoration: none;   
}
a:visited {
  color: inherit !important;
  text-decoration: none !important;
}
a:hover {
  color: inherit !important;
  text-decoration: none !important;
}
a:active {
  color: inherit !important;
  text-decoration: none !important;
}



@media (min-width: 768px) {
.desktop_dont_show{
    display: none;
  }       
}
	
@media (max-width: 767px) {
.mobile_dont_show{
    display: none;
  }   
}