/* Import av typsnitt Greycliffe */  
@import url("https://use.typekit.net/zqh6cmk.css");

/* -- STORLEKAR -- */
.esska-storlek-item{
	margin-top: -26px!important;
}

.esska-storlek-item li a{
	padding: 10px!important;
	font-size: 14px!important;
	line-height: 2!important;
	text-decoration: none!important;
}

.esska-storlek-item li:hover{
	background-color: var(--global-palette8) !important;

}

/* VARIANTER */
.esska-produkt-varianterlabel{
	margin-bottom: 0px!important;
}

.esska-color-item .is-active {
	border: 2px solid var(--brown-light) !important;
}

.landtable td{
	padding: 6px;
}




/* --COLORS-- */

:root {
	--white: #FFFFFF;
	
	--brown-dark: #342a25;
	--brown: #4e3e38;
	--brown-medium: #68534a;
	--brown-light: #86756e;
	
	--beige: #b9af9b;
	--beige-medium: #d5cfc3;
	--beige-light: #eae7e1;
	
	
	--pink: #cd9191;
	--pink-medium: #e1bdbd;
	--pink-light: #f0dede;
	
	--yellow: #dcaa19;
	--yellow-medium: #eacc75;
	--yellow-light: #f4e5ba;
	
	--blue: #69878C;
	--blue-medium: #A5B7BA; 
	--blue-light: #d2dbdc;
	
	--orange: #d26932;
	--orange-medium: #e4a484;
	--orange-light: #f1d2c1;
	
	--esska-button-padding: 10px 20px 10px 20px;
	--esska-button-dd-padding: 5px;
	--esska-filter-padding: 5px 40px 5px 10px;
	--esska-button-border: solid 1px var(--brown);
	--esska-button-radius: 50px;
	--esska-button-fontsize: 18px;
	--esska-filter-fontsize: 16px;
}


/* --FONTS-- */

* {
font-family: greycliff-cf, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: greycliff-cf, sans-serif;
	font-style: normal;
	font-weight: 600;
}

p, a, span, div {
	font-family: greycliff-cf, sans-serif;
	font-weight: 400;
	font-style: normal;
}

button {
	font-family: greycliff-cf, sans-serif !important;
	font-weight: 400;
	font-style: normal;
}


/* --GENERAL-- */

.kadence-breadcrumbs {
	margin-bottom: 1rem;
}

.single-content {
	margin: 0px !important;
}

.border-s {
	border-radius: 1rem !important;
}

.border-m {
	border-radius: 2rem !important;
}

.border-l {
	border-radius: 3rem !important;
}

.border-xl {
	border-radius: 4rem !important;
}

.padding-normal>.kt-inside-inner-col {
	padding: 2rem !important;
}

@media screen and (max-width: 500px) {
	.padding-normal>.kt-inside-inner-col {
		padding: 1rem !important;
	}
}

.img-contain>div>img {
	object-fit: contain !important;
}

.esska-page-preamble {
	margin: 0 0 2rem 0 !important;
}

@media screen and (max-width: 500px) {
	.esska-page-preamble {
		margin: 0 0 1rem 0 !important;
	}
}


/* --HEADER-- */

.header-link:hover {
	border-bottom: solid 1px var(--brown-dark) !important;
}

.social-button:hover {
	border-bottom: solid 1px var(--brown-dark) !important;
}

.secondary-menu-container>ul>.menu-item {
	margin-left: 2rem !important;
}

.secondary-menu-container>ul>.menu-item>a:hover {
	border-bottom: solid 1px var(--brown-dark) !important;
}


/* --FOOTER-- */

.footer-nav-container>nav>div>ul>li {
	width: auto !important;
}

.footer-nav-container>nav>div>ul>li>div>a {
	padding: 0px !important;
	margin-bottom: 1rem !important; 
	border-bottom: solid 1px transparent !important;
}

.footer-nav-container>nav>div>ul>li>div>a:hover {
	border-bottom: solid 1px var(--brown-dark) !important;
}


/* --TAG PILL-- */

/* Universal Tag Pill */
.tag-pill {
	padding: 5px 10px 8px 10px !important;
	border: solid 1px var(--brown-dark) !important; 
	border-radius: 50px !important;
}

.tag-pill:hover {
	padding: 5 10 8 10px !important;
	border: solid 1px var(--brown-dark) !important; 
	border-radius: 50px !important;
	cursor: default!important;
}

/* Basic White Tag Pill */
.tag-pill-basic {
	background-color: var(--white) !important;
}

/* Glow Tag Pill */
.tag-pill.glow {
	background-color: #EEF3AB !important; 
}

/* Silikon Tag Pill */
.tag-pill.silikon {
	background-color: #dddce2 !important; 
}

/* Latex Tag Pill */
.tag-pill.latex {
	background-color: #efd48b !important; 
}

.tag-pill-list>li {
	padding: 4px 8px 4px 8px !important;
	border: none !important;
	border-radius: 50px !important;
	background-color: var(--beige-light) !important;
	color: var(--global-palette3) !important;
	font-size: 14px !important;
}


/* --GENVÄGAR-- */

.shortcut-box>div {
	padding: 8rem 2rem;
}

@media screen and (max-width: 500px) {
	.shortcut-box>div {
		padding: 6rem 1rem !important;
	}
}


/* --STARTSIDA-- */

.logos-carousel>img {
	object-fit: contain !important;
}


/* --PRODUKTFILTRERING-- */

.esska-filter-container>div {
	padding: 0 !important;
	margin: 0 0 2rem 0 !important;
}

@media screen and (max-width: 1024px) {
	.filter-modal-button>button {
		width: 100% !important;
	}

	.filter-modal-button {
		width: 100% !important;
	}
	
	.kt-modal-overlay {
		padding: 0px !important;
	}
}

.kb-filter {
	padding: var(--esska-filter-padding) !important;
	font-size: var(--esska-filter-fontsize) !important;
}

.kb-sort {
	padding: var(--esska-filter-padding) !important;
	font-size: var(--esska-filter-fontsize) !important;
}

.kb-query-filter-reset-button {
	padding: 5px 10px 5px 10px !important;
	font-size: var(--esska-filter-fontsize) !important;
}



@media screen and (max-width: 1024px) {
	.kb-filter {
		padding: var(--esska-button-padding) !important;
		font-size: var(--esska-button-fontsize) !important;
	}
	
	.kb-sort {
		padding: var(--esska-button-padding) !important;
		font-size: var(--esska-button-fontsize) !important;
	}
	
	.kb-query-filter-reset-button {
		padding: var(--esska-button-padding) !important;
		font-size: var(--esska-button-fontsize) !important;
	}
	
	.kb-query-filter-reset-button:hover {
		background-color: transparent !important;
	}
}

.kb-radio-check-item {
	font-size: var(--esska-filter-fontsize) !important;
}

.kb-query-basic-style .kadence-filter-wrap input[type=checkbox] {
	height: 20px !important;
	width: 20px !important;
}

.kb-query-basic-style .kadence-filter-wrap input[type=checkbox]:checked {
	background: var(--brown-medium) !important;
	border: var(--brown-dark) !important;
}

@media screen and (max-width: 1024px) {
	.kb-radio-check-item {
		font-size: 22px !important;
	}

	.kb-query-basic-style .kadence-filter-wrap input[type=checkbox] {
		height: 40px !important;
		width: 40px !important;
	}
	
	.kb-query-basic-style .kadence-filter-wrap input[type=checkbox]:before {
		height: 20px !important;
		width: 20px !important;
	}
}

/* --PRODUKTSIDOR-- */

.esska-product-container>div {
	padding: 1rem 0 4rem 0 !important;
}

.ind-product-image>div>img {
	object-fit: contain !important;
}

/* Video på produktsida */

.esska-video-grid{
	display:grid;
	grid-template-columns:repeat(var(--esska-cols,2),minmax(0,1fr));
	gap:var(--esska-gap,16px)
}


@media (max-width:640px){
	.esska-video-grid{
		grid-template-columns:1fr
	}
}
        
.esska-embed{
	position:relative;
	width:100%;
	aspect-ratio:16/9;background:#000;
	border-radius:12px;
	overflow:hidden
}
    
.esska-embed iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0
}
        
.esska-embed video{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	background:#000
}
        
.esska-title{
	margin:.5rem 0 0;
	font-weight:600;
	font-size:1rem;
	line-height:1.3
}

/* --PRODUKTKORT-- */

/* 3 kolumner på UL */
ul.produktlista {
  list-style: none;
  margin: 0;
  padding: 0 0 30px 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem; /* avstånd mellan korten */
}

/* Porträtt-läge på mobil: stacka till 1 kolumn */
@media (orientation: portrait) and (max-width: 640px) {
  .produktlista {
    grid-template-columns: 1fr;
  }
	
}

/* Kortets container */
.produktcard {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.produktcard:hover{
	border: 1px solid rgba(0, 0, 0, 1);
}

.produktlista a,
.produktlista a:visited,
.produktlista a:hover,
.produktlista a:focus,
.produktlista a:active {
  text-decoration: none !important;
  color: inherit !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important; /* vissa teman (t.ex. Kadence) sätter underline via box-shadow */
}


/* Bild på rad 1 */
.produkt_image {
  aspect-ratio: 1 / 1;
  display: block;
  line-height: 0;
  padding:20px;
  width: 100%;
}

.produkt_image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; background:#fff;
}


/* Info-sektionen (rad 2 och 3) */
.produkt_info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* avstånd mellan namn och taggar */
  padding: 0.75rem 1rem 1rem;
}

/* Produktnamn (rad 2) */
.produkt_namn {
  padding-top: 10px;
  margin: 0px;
  text-align: left;
  font-size: 20px;
  font-style: normal;
  font-weight: 100;
  color: var(--global-palette4, #2D3748);
  border-top: 1px solid var(--global-palette4, #2D3748);	
}


/* Taggar (rad 3) */
ul.taggar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.taggar li {
  font-size: 0.75rem;
  padding: 0.10rem 0.3rem;
  border: 0px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: var(--beige-light, #3182ce);
}

/* Färgikoner produkter */

ul.esska-color-list{
  --esska-size: 40px;
  --esska-gap: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esska-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.esska-color-item{
  list-style: none;
  margin: 0;
  padding: 0;
}
.esska-color{
  display: inline-block;
  width: var(--esska-size);
  height: var(--esska-size);
  border-radius: 9999px;
  overflow: hidden;
  border: 2px solid rgba(104,83,74,0.2)
}


.esska-color:hover{
	border: 2px solid var(--brown);
}



.esska-color img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ikon fyller cirkeln */
}
.esska-color:focus{
  outline: 2px solid #111;
  outline-offset: 2px;
}

input::placeholder {
  color: var(--brown) !important; 
  opacity: 1; /* Viktigt i vissa browsers */
}




/* --ÅTERFÖRSÄLJARE-- */

/* Återförsäljare bildsnurra */
.kb-gallery-ul.kb-gallery-type-fluidcarousel .kt-blocks-carousel figure .kb-gal-image-radius img {
    height: 50px !important; 
}

.kb-gallery-ul.kb-gallery-type-fluidcarousel .kt-blocks-carousel figure .kb-gal-image-radius {
	height: 50px !important;
}

/* 8 ikoner i rad (desktop), 6 i rad på ≤768px */
ul.af-links{
  --af-size: 48px;             /* ikon-knappens storlek */
  --af-gap: 12px;              /* mellanrum */
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: var(--af-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}

.af-links li{
  margin: 0;
  padding: 0;
  display: flex;               /* centrera knappen i cellen */
  justify-content: center;
}

ul.af-links a{
  display: inline-flex;
  width: var(--af-size);
  height: var(--af-size);
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
  border: 0px solid rgba(0,0,0,.08);
  /*box-shadow: 0 1px 2px rgba(0,0,0,.06);*/
  transition: transform .15s ease, box-shadow .15s ease;
}

ul.af-links a:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

ul.af-links img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Bryt till 6 kolumner på surfplatta/mobil */
@media (max-width: 768px){
  ul.af-links{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
	
	ul.produktlista {
	  list-style: none;
	  margin: 0;
	  padding: 0 0 30px 0;
	  display: grid;
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	  gap: 1rem; /* avstånd mellan korten */
	}
	
	ul.taggar {
	 gap: 4px;
	}
	
	.produkt_info {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		padding: 0px 1rem 1rem;
	}
	
	h2.produkt_namn {
		margin-bottom: 1px;
		padding-top: 5px;
	}
	
	.produkt_image {
    	padding: 10px 15px; 
	}
	
	
}