:root {
    /* Färger */
    --primary-color: #000;
    --primary-hover: #232323;
    --accent-color: #ea8216;

    /* Bakgrunder */
    --light-bg: #f7f7f7;

    /* Neutrala färger */
    --white: #fff;
    --black: #000;

    /* Text */
    --text-dark: #444;
    --text-white: #fff;
    --text-black: #000;
}

/* Logo i huvudet */
#lay_megawrapper {
	background-image: url("Logo.png");
}


.home-link #imgLogo{
	position:relative;
	width:200px;
}


/*Bakgrundsfärg i huvudet*/
header {
	background-color: var(--primary-color);
	color: var(--text-white);
}


/* meny bar*/
.nav-wrapper {
	background-color: var(--primary-color);
	border-bottom:2px solid #f3f3f3;
	color: var(--text-white);
	margin-top:1em;
}


/*egenskap kategori utan underkategori*/
.nav-wrapper a {
	color: var(--text-white);
}


.nav-tree .level1 div.nolink, .nav-tree .level1 > div a, .nav-tree .level1 > a{
	Color: var(--text-white);
	font-family:"open sans condensed", sans-serif;
	font-weight:bold;
	text-transform: uppercase;
}

/*egenskap kategori Hover*/
.nav-tree .level1:hover{
	background-color: var(--primary-hover);
}


/*Aktuell kategori*/
.nav-tree .current{
	background-color: var(--primary-hover);
}

/*underkategorier*/
.nav-tree .level1 > ul {
	background-color: var(--primary-color);
}


  /*Textfärg övre meny*/
  .nav-menu {
      color: var(--text-white);
      }

  .nav-menu li a {
          color: var(--text-white);
      }


/* Dölj filtermeny startsida */
#StartView .filter-wrapper {
	display: none;
}


  /* Hover-effekt på länkar i menyn */
  #MainMenu .menu li a:hover {
      background-color: var(--primary-color); 
      color: var(--text-white);
  }
  
  /* Hover-effekt för span-taggar (t.ex. Hjälp, Logga in, etc.) */
  #MainMenu .menu li span:hover {
      background-color: var(--primary-hover);
      color: var(--text-white);
  }
  
  /* För att ändra bakgrundsfärg och textfärg på länkar i dropdown-menyn under 'Hjälp' */
  #MainMenu .menu li.title:hover .fw-drawerContent li a {
      background-color: var(--primary-color);
      color: var(--text-white);
  }
  
  /* För att ändra bakgrundsfärg och textfärg för länkar när de hovras över */
  #MainMenu .menu li.title:hover .fw-drawerContent li a:hover {
      background-color: var(--primary-hover);
      color: var(--text-white);
  }
  
  /* Ta bort ramen från dropdown-menyn */
  #MainMenu .menu li.title:hover .fw-drawerContent {
      border: none;  
      box-shadow: none;  
  }
  
  /* Ändra bakgrundsfärgen för alla aktiva menyposter */
  #MainMenu .menu .active_last>a {
      background-color: var(--primary-hover);
      color: var(--text-white);
  }
  
  /* Ändra färg för alla aktiva menyposter när underkategori i menyn är vald */
  .menu li.active > span.fw-drawerToggle {
      background-color: var(--primary-hover);
      color: var(--text-white) !important;
  }
  
  /* Ändra färg när för kategorin i huvudmenyn när man hovrar över underkategorierna */
  .menu li.title:hover > span.fw-drawerToggle {
      background-color: var(--primary-hover);
      color: var(--text-white) !important;
  }


/*Logga in*/
.loginFlyout .login-title {
	color: var(--text-dark);
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: .3em;
}

/* Loginfälten ärver vit text från .nav-menu.
   Sätt egen textfärg så användarnamn/lösenord syns. */
.nav-menu .loginFlyout input.textBox,
.nav-menu .loginFlyout input.textBox:focus,
.nav-menu .loginFlyout input[type="text"],
.nav-menu .loginFlyout input[type="password"] {
    color: #444 !important;
    caret-color: #444 !important;
}

/* Loginruta: återställ textfärger som annars ärver från .nav-menu */
.nav-menu .loginFlyout,
.nav-menu .loginFlyout label,
.nav-menu .loginFlyout .labelRight,
.nav-menu .loginFlyout #ForgotPasswordText {
    color: #444 !important;
}

/* Ingen hoverbakgrund på "Kom ihåg mig" eller glömt lösenordstext */
.nav-menu .loginFlyout label:hover,
.nav-menu .loginFlyout .labelRight:hover,
.nav-menu .loginFlyout .checkboxrow:hover,
.nav-menu .loginFlyout #ForgotPasswordText:hover {
    background-color: transparent !important;
    color: #444 !important;
}


  /* Neutral stil för vanlig login-text */
  .login-form label,
  .login-form .hint,
  .login-form .forgot-info {
      background-color: transparent !important;
      color: var(--text-dark) !important;
      text-decoration: none;
  }

/* "Skapa nytt konto" – återställ rätt färg */
.login-form a[href*="Register"] {
	color: var(--link-color, #1b59a4) !important;
	background-color: transparent !important;
}
  
/* "Skapa nytt konto" – återställ rätt färg vid hover */
.login-form a[href*="Register"]:hover {
	color: var(--link-color, #1b59a4) !important;
	background-color: transparent !important;
}

/*Produkt tillagd i varukorg*/
.addedToCart-wrapper{
	background-color: var(--primary-hover);
	color: var(--text-white);
}



/*produktbenämning*/
a.itemnamelink{
	color: var(--text-dark);
}


/*Header varukorg och kassa */
.table .header {
	background-color: var(--light-bg);
}

/*Varukorg*/
.smallcart{
	border:none;
}

/*varukorgsfot*/
.cart-footer .totalinfo{
	background-color: var(--light-bg);
}

/*kundvagn symbolfärg*/
 .cart-header::before {
        color: #fff;
    }


/*Kundvagn tom*/
.empty .cart-header{
	background-color: var(--primary-color);
}


/*Kundvagn fylld*/
.cart-header{
	background-color: var(--primary-color);
}

/*Symbol antal i varukorgen */
    .cart-header .cartquantity .quantity {
        background-color: var(--accent-color);
    }


/*Produkt tillagd i varukorg*/
.addedToCart-wrapper{
	background-color: var(--primary-color);
	color: var(--text-white);
}


/* Anger om språkval ska visas eller ej */
.flags {
	display: none;
}

.startView .prodlist-header .list_info h1:first-child {
  display: none;
}

.prodlist-header .list_info h1:first-child {
  display: none;
}

/* Bakgrundsfärg filtermenyerna för alla sidor */
#FilterWrapper.filter-wrapper {
	background-color: var(--light-bg);
}

#Filters.filters {
	background-color: var(--light-bg);
}

/* Sidfot yttre ram */
footer {
	background-color: var(--light-bg);
	border-top: 2px solid #ccc;
}

/* Sidfot inre ram */
footer .footer-inner>div {
	background-color: #fff;
}

/* Knappar – men exkludera plus, minus och bläddringsknappar */
.fw-button:not(.plus):not(.minus):not(.btn-prev):not(.btn-next):not(.btn-first):not(.btn-last) {
    background-color: var(--primary-color);
    color: var(--text-white);
    border: none;
}

/* Knappar – men exkludera plus/minus hover */
.fw-button:not(.plus):not(.minus):not(.btn-prev):not(.btn-next):not(.btn-first):not(.btn-last):hover {
    background-color: var(--primary-hover);
    color: var(--text-white);
    border: none;
}

/* Bakgrundsfärg formulär kontaktsida */
#ContactFormWrapper {
	background-color: var(--light-bg);
}

/* Bakgrundsfärg formulär skapa konto */
#RegUser.form-wrapper {
	background-color: var(--light-bg);
}

#ProductPrices {
	background-color: var(--light-bg);
}

/* Bakgrundsfärg saldoruta produkt */
#Availability {
	background-color: var(--light-bg);
}

/* Bakgrundsfärg ruta bevakning av produkt */
#Monitor {
	background-color: var(--light-bg);
}

/* Knapp produktfråga frågetecken */
#hlProdAsk .fw-icon-help {
	color: white;
}

/* Kavoritknapp färg hjärta */
#lbtnAddFavorite .fw-icon-heart {
	color: #f44336;
}

/* Kavoritknapp färg hjärta hover */
#lbtnAddFavorite:hover .fw-icon-heart {
	color: #cc0000;
}

/* Bakgrundsfärg rubriker variantlista för ex storlek */
#MainContent_ddlDoubleDim_pnlDataContainer .header {
  background-color: var(--light-bg);
}

/* Bakgrundsfärg varannan rad variantlista för ex storlek */
#MainContent_ddlDoubleDim_pnlDataContainer .row:nth-child(even) {
  background-color: var(--light-bg);
}

/*Header varukorg och kassa */
.table .header {
	background-color: var(--light-bg);
	color: var(--text-dark);
}

/* Bakgrundfärg sida kassa */
.page-Checkout .content-wrapper {
	background-color: var(--light-bg);
}

/* Summeringsruta kassa */
.totalbox {
	background-color: var(--primary-color);
	color: var(--text-white);
}

/* Bakgrundsfärg kampanjkod */
#CheckoutCampaign {
	background-color: #fff;
}

/* Bakgrundsfärg kampanjkod bakom ruta */
#ActivateCampaign {
	background-color: #fff;
}

/* Bakgrundsfärg ange tillfällig leveransadress */
#MainContent_MyInfo_DeliveryAddress {
	background-color: #fff;
}

/* Bakgrundsfärg logga in formulär kassa */
#MainContent_MyInfo_login_LoginForm {
	background-color: var(--light-bg);
}

/* Bakgrund formulär kassa */
#MainContent_OtherInfo_ExtraForm {
	background-color: #fff;
}

/* Bakgrundsfärg mitt konto inloggat läge */
#UserInformationWrapper {
	background-color: var(--light-bg);
}

/* Bakgrundsfärg orderöversikt mitt konto */
#SelectWrapper {
	background-color: var(--light-bg);
}

/* Bakgrundsfärg favoriter mitt konto inloggat läge */
#MainContent_FavouritesWrapper {
	background-color: var(--light-bg);
}

/* Bakgrundsfärg på knapparna för underkategorer när man klickat i menyn */
#MainContent_GroupView .group-title {
  display: block;
  background-color: var(--primary-color);
}

/* Bakgrundsfärg på knapparna för underkategorer när man klickat i menyn hover */
#MainContent_GroupView .group-title:hover {
  background-color: var(--primary-hover);
}





  /* Bakgrundsfärg meny i mobilläge */
  @media screen and (max-width: 950px) {
    .nav-menu {
        background-color: var(--primary-color);
        visibility: visible;
        -webkit-transition: visibility 0s ease 0s,max-height 1s ease 0s;
        transition: visibility 0s ease 0s,max-height 1s ease 0s;
    }
  }
  
  /* Bakgrundsfärg meny header mobilläge */
  @media screen and (max-width: 950px) {
      .header-top {
          background-color: var(--primary-color);
      }
  }
  
  /* Färg text meny header mobilläge */
  @media screen and (max-width: 950px) {
      .menu-open-btn {
          color: var(--text-white);
      }
  }
  
  @media (min-width: 951px) {
      #MainMenu .level1 ul a {
          color: var(--primary-color);
      }
  }
  
  /* Ikoner kategorimeny mobilläge */
.header-icons,.header-icons a {
    color: var(--text-white);
}
  
  /* Bakgrundsfärg header skrollat läge */
  .scrolled .logo {
      background-color: var(--primary-color);
  }


/* Varukorg färg på antal i mobilläge */
.cart-open-btn .quantity {
    background-color: var(--accent-color);
}

/* Varukorg färg på antal i mobilläge i skrollat läge*/
.scrolled .cart-open-btn .quantity:not(.empty) {
        background-color: var(--accent-color);
}


/* Bakgrundsfärg varukorg mobilläge */
.smallcart{
	background-color: var(--light-bg);
	border: none;
}

/* Bakgrundsfärg logga in formulär mobilläge */
@media screen and (max-width: 950px) {
    .form-wrapper {
        background-color: var(--light-bg);
    }
}


/* Centrera loggan skrollat mobilläge */
.scrolled .logo {
    background-color: var(--primary-color);
    min-height: 25px; /* öka lite */
    padding: 10px 15px; /* detta ger luft */
    
    left: 0;
    width: 100%;
    
    display: flex;
    align-items: center;     /* vertikal centrering */
    justify-content: center; /* horisontell centrering */
}

.scrolled .logo img,
.scrolled #imgLogo,
.scrolled .PNGLogo {
    height: 25px !important;
    max-height: none !important;
    width: auto !important;
    transform: none !important;
}