/* assets/styles/base.css */

:root {
  /* Basvärden för t.ex. mobil */
  --spacing-sm: 0.5rem;
  --spacing-sm-halfstep: 0.75rem; /* Mellansteg mellan sm och md */
  --spacing-md: 1rem;
  --spacing-md-halfstep: 1.5rem; /* Mellansteg mellan md och lg */
  --spacing-lg: 2rem;
  --spacing-lg-halfstep: 2.5rem; /* Mellansteg mellan lg och xl */
  --spacing-xl: 3rem;

  /* Vertikal spacing i steg för mobil */
  --spacing-vertical-sm: 0.5rem;
  --spacing-vertical-sm-halfstep: 0.75rem; /* Mellansteg mellan sm och md */
  --spacing-vertical-md: 1rem;
  --spacing-vertical-md-halfstep: 1.5rem; /* Mellansteg mellan md och lg */
  --spacing-vertical-lg: 2rem;
  --spacing-vertical-lg-halfstep: 2.5rem; /* Mellansteg mellan lg och xl */
  --spacing-vertical-xl: 3rem;

  /* Horisontell spacing i steg för mobil */
  --spacing-horizontal-sm: 0.5rem;
  --spacing-horizontal-sm-halfstep: 0.75rem; /* Mellansteg mellan sm och md */
  --spacing-horizontal-md: 1rem;
  --spacing-horizontal-md-halfstep: 1.5rem; /* Mellansteg mellan md och lg */
  --spacing-horizontal-lg: 2rem;
  --spacing-horizontal-lg-halfstep: 2.5rem; /* Mellansteg mellan lg och xl */
  --spacing-horizontal-xl: 3rem;
}

@media (min-width: 768px) {
  :root {
    /* Större skärmar */
    --spacing-sm: 1rem;
    --spacing-sm-halfstep: 1.5rem; /* Mellansteg mellan sm och md */
    --spacing-md: 2rem;
    --spacing-md-halfstep: 3rem; /* Mellansteg mellan md och lg */
    --spacing-lg: 4rem;
    --spacing-lg-halfstep: 5rem; /* Mellansteg mellan lg och xl */
    --spacing-xl: 6rem;

    --spacing-vertical-sm: 1rem;
    --spacing-vertical-sm-halfstep: 1.5rem; /* Mellansteg mellan sm och md */
    --spacing-vertical-md: 2rem;
    --spacing-vertical-md-halfstep: 3rem; /* Mellansteg mellan md och lg */
    --spacing-vertical-lg: 4rem;
    --spacing-vertical-lg-halfstep: 5rem; /* Mellansteg mellan lg och xl */
    --spacing-vertical-xl: 6rem;

    --spacing-horizontal-sm: 1rem;
    --spacing-horizontal-sm-halfstep: 1.5rem; /* Mellansteg mellan sm och md */
    --spacing-horizontal-md: 2rem;
    --spacing-horizontal-md-halfstep: 3rem; /* Mellansteg mellan md och lg */
    --spacing-horizontal-lg: 4rem;
    --spacing-horizontal-lg-halfstep: 5rem; /* Mellansteg mellan lg och xl */
    --spacing-horizontal-xl: 6rem;
  }
}


:root {
    --myproject-primary-color: #457D99;
    --black-primary: #222222;
    --grey-primary: #4a4a4b;
}



@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Regular-Subset.woff2') format('woff2');
    font-weight: 100 900; /* Variable weight */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Italic-Subset.woff2') format('woff2');
    font-weight: 100 900; /* Variable weight */
    font-style: italic;
    font-display: swap;
}



/* Trustpilot mini-widget fix */

/* Set a minimum height for the widget */
.trustpilot-widget {
    min-height: 24px;
}

/* Hide the <a> tag within the TrustBox widget */
.trustpilot-widget a {
    display: none;
}

p, li {
    
font-kerning: normal;
text-wrap: pretty;
    
}

b, strong {
    
font-weight: 600;

}

h1, h2, h3, h4, h5 {
    

text-wrap: balance;
    
}

.hero-title  {
    
color: #fff;

}

@media (max-width: 768px) {
    .hero-bg {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        max-width: 100vw !important;
    }
}

@media (min-width: 769px) {
    .hero-bg {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        min-width: 100% !important;
        max-width: 100vw !important;

    
}
    }
    
    
@media (max-width: 768px) {
    .full-width-section {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        max-width: 100vw !important;
    }
}

@media (min-width: 769px) {
    .full-width-section {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        min-width: 100% !important;
        max-width: 100vw !important;

    
}
    }
    
.full-width-section .full-width-body {
    
      width: 80ch;
  margin: 0 auto;
    
}


    

@media only screen and (max-width: 480px) {
  .category-grid .elementor-widget-text-editor {
    display: none;
  }
}

.category-child  {
    
aspect-ratio: 1/1;

}

.start-container {
  /* Mobile (default) */
  margin-left: 12px;
  margin-right: 12px;
  contain: layout;
}

/* Tablet (768px and up) */
@media (min-width: 768px) {
  .start-container {
    margin-left: 24px;
    margin-right: 24px;
    contain: layout;
  }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  .start-container {
    margin-left: 24px;
    margin-right: 24px;
    contain: layout;
  }
}

.woocommerce ul.products li.product a img  {
    
aspect-ratio: 1/1;
height: auto;
width: 100%;
background: #ffffff;
display: block;
filter: brightness(.96);
box-sizing: border-box;

}



/* HEADER CSS */

/* Top bar*/

.top-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Improved column distribution */
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  max-width: 100%;
  contain: layout;
  
}

.top-bar .social-icons {
  display: grid;
  grid-auto-flow: column; /* Makes children layout in columns → horizontal row */
  gap: 8px;
  justify-self: start; /* Aligns to left grid line */
  place-items: center;
}

.top-bar .social-icons a {
    
min-width: 28px;
min-height: 28px;
display: grid;
place-items: center;

}

.social-icons a {
  color: var(--grey-primary);
  font-size: 1.25rem;
}

.top-bar .trustpilot-widget {
  justify-self: center; /* Centers in middle column */

  contain: paint;
  width: 100%;
}

.top-bar .free-shipping {
  justify-self: end; /* Aligns to right grid line */
}

/* Mobile styles */
@media (max-width: 767px) {
 .top-bar .social-icons,
 .top-bar .free-shipping {
    display: none;
  }
  
 .top-bar .trustpilot-widget {
    grid-column: 1 / -1; /* Span full width */
    justify-self: center;
    height: 24px;
    width: 100%;
  }
}

/* Header */

.main-menu  {

display: grid;
  grid-template-columns: 1fr 130px 1fr;
  align-items: center;
  column-gap: 16px;
  padding: 16px;
  position: relative;
  width: 100%;

  
}

@media screen and (min-width: 1024px) {
    
    .main-menu  {
        
    grid-template-columns: 1fr 600px 1fr;
    width: 100%;
    
    }
    
   }

.main-menu .hamburger {
    
display: grid;
place-items: center;
width: 44px;
height: 44px;

}

@media screen and (min-width: 1024px) {
    
    .main-menu .hamburger  {
        
    display: none;
    
    }
    
    }



.main-menu .logo-a {

justify-self: start; 

}

@media screen and (min-width: 1024px) {

.main-menu .logo-a {

justify-self: start; 

    }

}

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

.logo-a img {

max-width: 112px; 

    }

}

.main-menu .search-bar {
    
justify-self: center;   
width: 100%;

}

.main-menu .dgwt-wcas-search-wrapp  {
    
margin-bottom: 0 !important;

}

.main-menu .contact-info  {
    
justify-self: end;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
column-gap: 8px;

}

.icon-link {
    display: grid; /* Ensures alignment of the icon within the link */
    place-content: center;
    width: 44px; 
    height: 44px; 
    color: var(--black-primary);
    font-size: 1.5em;
    
}

.contact-info a:hover {
  color: var(--myproject-primary-color);
}

.icon-link .cart-icon {
  position: relative;
}

.main-menu span.cart-count {
  background-color: #47819e;
  color: #fff;
  font-size: 0.75em !important;
  border-radius: 100%;
  height: 24px !important;
  width: 24px !important;
  font-weight: 500;
  display: grid;
  pointer-events: none;
  place-content: center;
  position: absolute;
  bottom: 44px !important;
  right: 12px !important;
  border: 2px solid #fff;
}





/* Mobile menu re-write */



.hamburger-container.active  {
    
top: 100% !important;

}

@media (max-width: 1024px) {
 .main-menu  {
     
     position: relative;
  }
  

}

.hamburger-container .input-group {
    
    margin-top: 12px;
    margin-bottom: 32px;
}

.mobile-cat-wrapper {  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 24px 16px;
  grid-auto-flow: row;
  margin-top: 16px;
  margin-bottom: 16px;
}

.mobile-cat-wrapper .hamburger-menu-cat {
    
    display: inline-grid;
    row-gap: 8px;
    place-items: center;
    
}

.mobile-cat-wrapper .category-title {
    
    color: var(--black-primary);
    font-size: 18px;
    font-weight: 500;
    
}

.mobile-cat-wrapper .category-img  {
    
    aspect-ratio: 3/2;
    object-fit: cover;
    height: auto;
    width: 100%;
    overflow-clip-margin: content-box;
    overflow: clip;
    
}

.hamburger-container {
  
  position: absolute;
  top: 100%;             
  right: 0;
  z-index: 9999;
  width: 100%;          
   transform: translateX(-100%); 
  transition: transform 0.5s ease;

 
  background-color: #fff;
  box-shadow: none;     
  padding: 16px;
  overflow-y: auto;
  display: none;
  visibility: hidden;
  pointer-events: none;
  
}


.hamburger-container.active {
  transform: translateX(0);
  box-shadow: 0 20px 40px -25px rgba(0, 0, 0, 0.5);
  visibility: visible;
  pointer-events: auto;
  display: block;
}


.woocommerce .products ul, .woocommerce ul.products  {
    
width: 100%;

}

/* TEMP DESKTOP MENU REWRITE */



.nav-menu ul {
    display: flex;
    margin: 0px;
    gap: 28px;
    padding-left: 0px;
    flex-direction: row;
    left: 0;
    align-items: center;
    justify-content: center;
    position: relative;
}

@media (min-width: 1024px) and (max-width: 1279px) {
 
  .nav-menu ul {
    gap: 20px;
  }
}

.nav-menu ul li {
  list-style: none;
  font-size: 16px;
  font-weight: 500;
}

.nav-menu ul.sub-menu {
  background-color: #fff;
  display: none;
  max-width: 175px;
  left: auto;
  position: absolute;
  z-index: 999;
  text-transform: none;
  padding-bottom: 12px;
  padding-top: 20px;
  top: 100%;
  margin-left: -16px;
  transition: all 0.3s ease;
}

.nav-menu ul li a {
  color: #333333;
  text-decoration: none;
 
}

.nav-menu ul.sub-menu li a {
  margin-right: 0;
  word-break: break-word;
  text-wrap: balance;
}

.nav-menu ul li.menu-item-has-children:after {
  font-family: "Font Awesome Subset";
  content: "\f107";
  font-size: 12px;
  margin-left: 4px;
  color: #47819e;
  font-weight: normal;
  display: inline-block;
  vertical-align: baseline;
}




/* TEMP FONT SIZES IN PX FOR BOOTSTRAP 3 REMOVAL */

.h2,
h2 {
  font-size: 24px !important;
  
}

.title-startpage h2 {
  font-size: 32px !important;
  line-height:40px; 
}

.additional-title  {
    
font-size: 24px !important;
line-height: 32px;

}

.cat-desc h1  {
    
font-size: 32px !important;
line-height: 40px;

}

h2.cart-heading {
    
font-size: 24px !important;
line-height: 32px;
    
}

.woocommerce-cart h2.cart-heading, .cross-sells h2 {
    
font-size: 24px !important;
line-height: 32px;
    
}


h3.elementor-heading-title {
    
font-size: 16px;

}   

.compare-product-name h3  {
    
font-size: 16px;

} 

h4  {
    
font-size: 16px;

} 


@media (min-width: 768px) { 

.h2,
h2 { font-size: 32px !important;  } 

.title-startpage h2 {
  font-size: 40px !important;
  line-height:48px; 
}

.additional-title {
    
font-size: 32px !important;
line-height: 40px;
    
}

.cat-desc h1  {
    
font-size: 40px !important;
line-height: 48px;

}

h2.cart-heading {
    
font-size: 24px !important;
line-height: 32px;
    
}

.woocommerce-cart h2.cart-heading, .cross-sells h2 {
    
font-size: 24px !important;
line-height: 32px;
    
}

.woocommerce-cart .cart_totals h2  {
    
    
font-size: 24px !important;
line-height: 32px;
    
}    

h4  {
    
font-size: 18px;

} 


}

/* Global */

.onsale {
	background-color: #C70000 !important;
}

.woocommerce ul.products li.product .price del  {
    
opacity: 1;

}

/* Temp campaign end info */

.campaign-end-date-grid {
    font-size: 0.85rem;
    color: #aa1f1b ; 
    line-height: 0.85rem;
    font-weight: 400;
    margin-top: -0.5rem;
    
}

.campaign-end-date-single {   font-size: 0.85rem;
    color: #aa1f1b ; 
    line-height: 0.85rem;
    font-weight: 400;
    margin-bottom: 1rem;
    margin-top: -0.5rem;
    
    
    
}

/* New badge product grid */

.product-badges-wrapper {
    
top: 0;
left: 0;
position: absolute;
display: flex;
flex-direction: column;
gap: 0.25rem;
z-index: 10;

}



.product-badge {
    
font-size: 1rem;
font-weight: 500;
max-width: fit-content;
padding: 0.25rem 0.5rem;

}

@media (max-width: 768px) {
    
.product-badge {
    
font-size: 0.85rem;

    } 
    
}    

.new-badge {
    
    background: #47819e;
    color: #fff;
}

/* Elementor fix ragged lines */

.elementor-widget-text-editor {

text-wrap: balance;

}